Introduction to usage examples of $.fn in jQuery_jquery

$.fn refers to the jquery namespace, plus the methods and attributes on fn, which will be valid for every jquery instance.
If you extend $.fn.abc(), that is, $.fn.abc() extends jquery with an abc method, then each of your subsequent jquery instances can reference this method.
Then you It can look like this: $("#div").abc();

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

jQuery.extend(object); 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.

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.
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){returna b;}
});

Add a "static method" called add for 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:

jQuery code

Copy code The code is as follows:

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val ());
});
}
});