jquery Plugin production prompt box plug-in implementation code _jquery

Let's first introduce the development of a custom selector, whose code structure is as follows:

Copy Code code as follows:

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

The wording of the call:
$ (a:customselector) Now let's explain the parameters that are used in the following function.
Object: A reference to the current DOM element, not a jquery object. One thing to emphasize is that DOM elements and jquery objects are completely different, that a tag represents a DOM element, and $ (' a ') represents a jquery object, which is itself a JS object. Not clear friends love Google related knowledge.
Index: The indexed array with the subscript 0.
Properties: An array of selector meta data.
An array of list:dom elements.
Of these parameters, the first argument is required, and several other parameters are optional.
The selector function determines whether the current element is contained by the BOOL value, True contains, false does not contain.
Here we implement an A tag selector, select only the a tag that points to the external link, and the code is as follows:

Copy Code code as follows:

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

Now we begin to implement the development of the prompt box plug-in, the development process is not much to say, mainly code implementation, which has a note.

Copy Code code as follows:

(function ($) {//update coordinate position
$.fn.updateposition = function (event) {
R Eturn This.each (function () {
$ (this). css ({
Left:event.pageX +,
Top:event.pageY + 5
});
});
}
//Prompt box plug-in that will display the contents of the a label title property
$.fn.tooltip = function () {
return This.each (function () {
//Get the current pair of Like
var self = $ (this);
//Get Title Property value
var title = self.attr (' title ');
//To determine whether the current object is a label, the title property has no content
if (self.is (' a ') && title!= ') {
self.removeattr (' title ')
. Hove R (function (event) {
//mouse on target object
$ (' <div id= ' tooltip ' ></div> '). Appendto (' body ')
. Text (title)
. Hide ()
. Updateposition (Event)
. FadeIn (400);
}, Function () {
//mouse to move out of
$ (' #tooltip '). Remove ();
}). MouseMove (function (event) {
//mouse move
$ (' #tooltip '). Updateposition (event);
});
}
});
};
}) (JQuery);

Hope this piece of article to you useful, want to see the full effect of friends can go to demo, download address: JQuery.plugin.tooltip