jquery plug-in learning (2)_jquery-JS Tutorial-php.cn

jquery plug-in learning (2)_jquery

WBOY

Release： 2016-05-16 17:51:06

Original

1208 people have browsed it

Creating a global function only requires adding attributes to the jquery object, and the method of creating a jquery object can also be achieved by adding attributes to jquery.fn. In fact, the jquery.fn object is an alias of the jquery.prototype prototype object. Use the alias to change Easy to reference.

demo:

Copy code The code is as follows:

 
jQuery.fn. test = function(){ 
alert('This is a jquery object method'); 
} 

Then, you can call this method in any jquery object.

Copy code The code is as follows:

 
$(function(){ 
$(' h1').click(function(){ 
$(this).test(); 
}); 
}); 

Because here, there is no place Matching dom nodes, so it is also possible to write global functions (as mentioned in the previous section). However, when using the jquery object method, the this keyword in the function body always refers to the current jquery object, so we can use the above Rewrite the method to implement dynamic prompt information. The code is as follows:

Copy the code The code is as follows:

 
jQuery.fn.test = function(){ 
alert(this[0].nodeName); //Prompt for the dom node name of the current jquery object
} 

Here comes the important point , in the above example, you can see that since the jquery selector returns an array type DOM node collection, the this pointer points to the current collection, so to display the node name of the current element, you must specify the current one after the this pointer. The sequence number of the element.

Thinking: If the jquery selector matches multiple elements, how can we accurately specify the object of the current element? -----

To solve this problem, we might as well call the each() method in the context of the current jquery object method, and let this pointer drink each matching dom element in turn through implicit iteration Object, for example, with further modifications to the previous example

Copy the code The code is as follows:

 
 jQuery.fn.test = function(){ 
this.each(function(){ //Traverse the matching elements, this here represents the object collection 
alert(this.nodeName); // Prompt the current jquery The DOM node name of the object (note the changes here and above, the subscript disappears) 
}); 
} 

Then, when calling the method, there is no need to worry, jquery How many elements the selector matches. For example, in the following example, when clicking on different elements, the current node name will be prompted

Copy code The code is as follows:

 
$(function(){ 
$('body *').click(function(){ 
$(this).test(); 
}); 
}); 

Copy code The code is as follows:

< ;h1>ceshi
dddddddddd

div element< /div>