jquery has two methods for developing Plug-ins, respectively:
The code is as follows |
Copy Code |
JQuery.fn.extend (object); and Jquery.extend (object); Jquery.extend (object); To extend the jquery class itself. Adds a new method to the class. JQuery.fn.extend (object); Add methods to the JQuery object. |
What is FN? See the jquery code, it's not hard to find.
The code is as follows |
Copy Code |
Jquery.fn = Jquery.prototype = {Init:function (selector, context) {////...}; |
The original Jquery.fn = Jquery.prototype. It's certainly not strange to prototype.
Although JavaScript does not have a well-defined class concept, it is more convenient to use classes to understand it.
jquery is a very nicely encapsulated class, such as we use Statement $ ("#btn1 ″") to generate an instance of a jquery class.
Jquery.extend (object); Adding a class method to the jquery class can be understood as adding a static method. Such as:
The code is as follows |
Copy Code |
$.extend ({add:function (a,b) {return a+b;} }); |
Add a "static method" for jquery, and then you can use this method in the place where jquery is introduced,
JavaScript code $.add (3,4); Return 7
JQuery.fn.extend (object); The extension to Jquery.prototype is to add a "member function" to the jquery class. Examples of jquery classes can use this "member function".
JQuery.fn.extend is an extension of the jquery method
Demo:jquery itself does not provide the Jquery.color () method, and if we need to extend the methods provided by jquery itself, we need to use the JQuery.fn.extend
code is as follows |
copy code |
JQuery.fn.extend ({ Color:function (Val) { if (val==undefined) {
return $ (this). CSS ("color"); }else{
return $ (this). CSS ("Color", Val); } } }) $ (this). Color ("red")//The jquery object is set Alert ($ (this). color ());//Get the colors of the jquery object and use the dialog box to eject |
2.jquery.extend extensions to JQuery objects can be understood as static methods that can be used without the need for instance jquery
The code is as follows |
Copy Code |
Jquery.extend ({ Myshow:function (A,B) { return a+b; } }) |
Call: Alert ($.add (3, 4));
The real development process, of course, will not do so small white plug-ins, in fact, jquery arch the rich operation of the document, events, CSS, Ajax, the effect of the method, combined with these methods, you can develop a more niubility plug-ins.
Simple to understand
The first way
The code is as follows |
Copy Code |
Jquery.extend (object); The extended method can directly call the $.extend ({add:function (a,b) {return a+b;} }); |
The method is called:
The code is as follows |
Copy Code |
$.add (3,4); JQuery.fn.extend (object); The extended method cannot be invoked directly, and must match the jquery object |
The second way
The code is as follows |
Copy Code |
$.fn.extend ({show:function () {Alert ($ (this). Text ())}}; |
Call Mode:
The code is as follows |
Copy Code |
$ ("#testid"). Show ();//jquery object can be invoked. $.show ()//This call is incorrect and does not get the desired effect. |
Attention:
There is also a special place where there is a jquery.extend = JQuery.fn.extend at the beginning of the function, and the Jquery.prototype is assigned to Jquery.fn before the program, so it appears in the following call Different invocations of Jquery.extend () and JQuery.fn.extend (), and the result of the two method invocations is not the same, the Jquery.extend () call does not extend the method to an instance of the object. The method of referencing it also needs to be implemented through the JQuery class, such as Jquery.init (), while the JQuery.fn.extend () call extends the method to the prototype of the object, so it has these methods when instantiating a JQuery object. This is very important, and it is reflected in the jquery.js.