Summary of jquery plug-in development methods_jquery

jQuery provides two methods for developing plug-ins, namely:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object); to extend the jQuery class itself. Adds new methods to the class.
jQuery.fn.extend(object); Add methods to jQuery objects.
What is fn? Looking at the jQuery code, it's not hard to find.

Copy code The code is as follows:

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....　
　 //......
};

Original jQuery.fn = jQuery.prototype. Right Prototype will definitely be familiar to you.
Although JavaScript does not have a clear concept of classes, it is more convenient to use classes to understand it.
jQuery is a very well-encapsulated class. For example, if we use the statement $("#btn1"), an instance of the jQuery class will be generated.
jQuery.extend(object); Add a class method to the jQuery class, which can be understood as adding a static method. For example:

Copy code The code is as follows:

$.extend({
　add: function(a,b){return a b;}
});

Add a "static method" called add to jQuery, and then you can use this wherever jQuery is introduced. Method,
$.add(3,4); //return 7
jQuery.fn.extend(object); To extend jQuery.prototype is to add "member functions" to the jQuery class. Instances of the jQuery class can use this "member function".
For example, we want to develop a plug-in to create a special edit box. When it is clicked, the content in the current edit box will be alerted. You can do this:
Java code

Copy code The code is as follows:

$.fn .extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //On the page:
$. fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //On the page:

$("#input1") is a jQuery instance. When it calls the member method alertWhileClick, it implements expansion. Each time it is clicked, it will pop up the current content in the editor.
In the real development process, of course you will not make such a novice plug-in. In fact, jQuery provides a wealth of operation documents, events, CSS, Ajax, and effect methods. Combining these methods, you can develop more Niubility plug-in.