jquery plug-in production prompt box plug-in implementation code_jquery

Let's first introduce the development of custom selectors. His code structure is as follows:

Copy code The code is as follows:

(function ($) {
$.expr[':'].customselector = function (object,index,properties,list) {
//code
};
})(jQuery);

Writing when calling:
$(a:customselector) Now let’s first explain the various parameters used in the function.
Object: A reference to the current dom element, not a jquery object. It needs to be emphasized that dom elements and jquery objects are completely different. The a tag represents the dom element, $('a') represents the jquery object, which itself is a js object. I don’t know about google related knowledge about friendship.
Index: Array index with subscript 0.
Properties: Selector metadata array.
List: DOM element array.
Among these parameters, the first parameter is required, and the other parameters are optional.
The selector function determines whether the current element is included through the bool value, true is included, false is not included.
Here we implement an a tag selector to select only a tags pointing to external links. The code is as follows:

Copy code The code is as follows:

(function ($) {
$.expr[':'].external = function (object) {
if ($(object).is( 'a')) {
return object.hostname != location.hostname;
}
};
})(jQuery);

Now we start to implement The development process of the prompt box plug-in will not be discussed in detail. The main thing is the code implementation, which has notes.

Copy code The code is as follows:

(function ($) {//Update coordinate position
$.fn.updatePosition = function (event) {
return this.each(function () {
$(this).css({
left: event.pageX 20,
top : event.pageY 5
});
});
}
//Prompt box plug-in, which will display the content of the title attribute of the a tag
$.fn.tooltip = function () {
return this.each(function () {
//Get the current object
var self = $(this);
//Get the title attribute value
var title = self.attr ('title');
//Determine whether the current object is a tag and whether the title attribute has content
if (self.is('a') && title != '') {
self. removeAttr('title')
.hover(function (event) {
//The mouse is on the target object
$('

') .appendTo('body')
.text(title)
.hide()
.updatePosition(event)
.fadeIn(400);
}, function () {
//Mouse out
$('#tooltip').remove();
}).mousemove(function (event) {
//Mouse move
$('#tooltip') .updatePosition(event);
});
}
});
};
})(jQuery);

I hope this article will be helpful to It is useful for you. Friends who want to see the complete effect can download the demo. Download address: jQuery.plugin.tooltip