Two methods for developing plug-ins: jquery.fn.extend and jquery.extend_jquery

jQuery provides two methods for developing plug-ins, which are:

JavaScript code

Copy code The code is as follows :

jQuery.fn.extend(object);
jQuery.extend(object);

jQuery.extend(object); to extend the jQuery class itself .Add 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.

JavaScript code

Copy code The code is as follows:

jQuery.fn = jQuery.prototype = {

　 init: function( selector, context ) {//….　

　　 //……

};

It turns out that jQuery.fn = jQuery.prototype. I am definitely familiar with prototype.

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:

XML/HTML code

Copy code The code is as follows:

$.extend({

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

});

Add an add for jQuery "Static method", you can then use this method where jQuery is introduced,
JavaScript code

Copy code The code is as follows:

$.add(3,4); //return 7

jQuery.fn.extend(object); Expand jQuery.prototype , which 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:
JavaScript code

Copy code The code is as follows:

$.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 called When clicked, it will first pop up the content currently being edited.

In the real development process, of course you will not make such a novice plug-in. In fact, jQuery provides a wealth of methods for operating documents, events, CSS, Ajax, and effects. Combining these methods, you can develop Publish more Niubility plug-ins.

Note:

There is another special place here, that is, jQuery.extend = jQuery.fn.extend at the beginning of the function, and in the program jQuery.prototype has been assigned to jQuery.fn earlier, so different calls to jQuery.extend() and jQuery.fn.extend() will appear in subsequent calls. The results of these two method calls are also different. The call of jQuery.extend() does not extend the method to the instance of the object. The method that refers to it also needs to be implemented through the jQuery class, such as jQuery.init(), and the call of jQuery.fn.extend() extends the method Extended to the prototype of the object, so when a jQuery object is instantiated, it has these methods, which is very important, and this is reflected everywhere in jQuery.js