How to Use extend and fn. extend of jquery

JQuery provides two methods for development plug-ins:
Copy codeThe Code is as follows:
JQuery. fn. extend (object );
JQuery. extend (object );


JQuery. extend (object); adds a new method to the class to extend the jQuery class itself.
JQuery. fn. extend (object); add a method to the jQuery object.

What is fn. It is not difficult to see jQuery code.

Copy codeThe Code is as follows:
JQuery. fn = jQuery. prototype = {
Init: function (selector, context ){//....
//......
};


It turns out that jQuery. fn = jQuery. prototype. It is certainly no stranger to prototype.

Although javascript does not have a clear concept of a class, it is more convenient to use a class to understand it.
JQuery is a well-encapsulated class. For example, we use the statement $ ("# btn1") to generate a jQuery class instance.

JQuery. extend (object); adding class methods to the jQuery class can be understood as adding static methods. For example:
Copy codeThe Code is as follows:
$. Extend ({
Add: function (a, B) {return a + B ;}
});


Add a "static method" for jQuery as add, and then you can use this method in the place where jQuery is introduced,
$. Add (3, 4); // return 7

JQuery. fn. extend (object); the extension to jQuery. prototype is to add "member functions" to the jQuery class ". JQuery class instances can use this "member function ".
For example, we want to develop a plug-in and create a Special edit box. When it is clicked, the content in the current edit box of alert is displayed. You can do this:
Copy codeThe Code is as follows:
$. Fn. extend ({
AlertWhileClick: function (){
$ (This). click (function (){
Alert ($ (this). val ());
});
}
});
$ ("# Input1"). alertWhileClick (); // <input id = "input1" type = "text"/>