What does jquery $.fn $.fx mean and what is it used for_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()
then you can do this: $("#div").abc();
Usually use the extend method to extend, please see the API for details.
$.fx refers to the special effects of jquery.
If using display, slide, fade, animation, etc.
$.fx.off can turn off the animation, but actually displays the result directly.

jquery’s extend and fn.extend

jQuery provides two methods for developing plug-ins, which are:
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.
jQuery.fn = jQuery.prototype = {
　 init: function( selector, context ) {//....　
　 //......
};
Original jQuery.fn = jQuery.prototype. You are 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:
$.extend({
　add:function(a,b){return a b;}
});
adds a "static method" called add for jQuery, and then You can use this method where jQuery is introduced,
$.add(3,4); //return 7
jQuery.fn.extend(object); To extend jQuery.prototype, it is jQuery class adds "member functions". 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());
} );
}
});
$("#input1").alertWhileClick();

On the page:
$("#input1") is a jQuery instance. When it calls the member method alertWhileClick, it implements expansion. Each time it is clicked, it will first pop up the content in the current edit.
In the real development process, of course you will not make such a novice plug-in. In fact, jQuery provides a wealth of operation documents, events, CSS, Ajax, and effect methods. Combining these methods, you can develop more Niubility plug-in.

The difference between jquery(function(){}) and (function(){}(jQuery)
1.
jQuery(function(){});
is written in full as
jQuery(docunemt).ready(function(){
});
means to execute the ready() method after the DOM is loaded
2.
(funtion (){
}(jQuery);
actually executes the ()(para) anonymous method, but passes the jQuery object

Summary: jQuery(funtion(){}); is used. The code that stores the DOM object already exists when the code is executed. It cannot be used to store the development plug-in code. Because the jQuery object is not passed, the method cannot be called externally through jQuery.methodye. 🎜>}(jQuery);
is used to store the code for developing plug-ins. The DOM may not exist when executing the code. Please use caution when executing the DOM operation code directly.