Understanding jquery's $.extend (), $.fn, and $.fn.extend ()

jquery has two methods for developing plug-ins, namely:

1. JQuery.fn.extend ();

2. Jquery.extend ();

Although JavaScript does not have a clear concept of classes, it is possible to construct definitions of similar classes.

jquery is a well-encapsulated class, such as $ ("#btn1") that generates an instance of the jquery class, which is important to understand.

(1). Jquery.extend (object);　

It is to add a class method to the jquery class, which can be understood as adding a static method. Such as:

a）jQuery.extend({

　　min: function(a, b) { return a < b ? a : b; },

　　max: function(a, b) { return a > b ? a : b; }

});

jquery.min (2,3);//  2 
jquery.max (4,5);//  5

B.) JQuery. extend (Target, Object1, [objectn] ) extends an object with one or more other objects, returning the extended object.
var settings = {validate:false, limit:5, Name: "foo"}; 
var options = {validate:true, name: "Bar"}; 
jquery.extend (settings, options);

Results:settings == { validate: true, limit: 5, name: "bar" }

(2). JQuery.fn.extend (object);

What is $.fn?

$.fn refers to the jquery namespace, and the members on FN (method function and property) are valid for each jquery instance.

If you look at the jquery code, it's not hard to find.

Jquery.fn = Jquery.prototype = {

Init:function (Selector, context) {//....

};

The original Jquery.fn = Jquery.prototype.

So, it's an extension to Jquery.prototype, which is adding "member functions" to the jquery class. An instance of the jquery class can use this "member function".

For example, we want to develop a plugin, make a special edit box, when it is clicked, then alert the contents of the current edit box. You can do this:

$.fn.extend ({
Doalertwhileclick:function () {
$ (this). Click (function () {
Alert (This). Val ());
});
}
});
$ ("#input1"). Doalertwhileclick (); On the page is:

$ ("#input1") is a jquery instance, and when it calls the Member method Doalertwhileclick, it implements the extension, which pops up the contents of the current edit each time it is clicked.

Understanding jquery's $.extend (), $.fn, and $.fn.extend ()