Jquery $.fn $.fx

$.fn refers to the jquery namespace, plus the methods and attributes on fn, will be valid for each jquery instance.
ABC () such as extended $. The fn.
So you could look like this: $("#div").abc();
The extend method is usually used to extend, see the API for details.
$.fx refers to the special effects of jquery.
If using display, slide, fade in, animation, etc.
$.fx. Off can turn off an animation and actually show the result directly.

Jquery's extend and fn.extend

JQuery provides two methods for developing plug-ins, which are:
JQuery. Fn. The extend (object);
JQuery. The extend (object);
JQuery. The extend (object); To extend the jQuery class itself. Add new methods to the class.
JQuery. Fn. The extend (object); Add methods to jQuery objects.

What is fn. If you look at the jQuery code, it's not hard to see.
JQuery. Fn = jQuery. Prototype = {
Init: function(selector, context) {//...
/ /...
};
JQuery. Fn = jQuery. Prototype.
Although javascript does not have a clear concept of classes, it is more convenient to understand them in terms of classes.
JQuery is a very well encapsulated class. For example, the statement $("#btn1") generates an instance of a jQuery class.

JQuery. The extend (object); Adding a class method to a jQuery class can be interpreted as adding static methods. Such as:
$. The extend ({
Add: function (a, b) {return a + b; }
});
Add a "static method" called add to jQuery, and then you can use this method where jQuery was introduced,
$. The add (3, 4); / / return 7
JQuery. Fn. The extend (object); The extension to jquery.prototype is to add a "member function" to the jQuery class. Instances of the jQuery class can use this "member function."
Let's say we want to develop a plug-in that makes a special edit box, and when it's clicked, we alert the current edit box. Here's how:

Jquery code:

 
$.fn.extend({ 
alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$("#input1").alertWhileClick(); 

On the page: < Input the id = "input1" type = "text" / >
$("#input1") is an instance of jQuery that extends when it calls the member method alertWhileClick, and each time it is clicked it pops up the contents of the current edit.
In the real development process, of course, we won't make such a small white plug-in, in fact, jQuery has raised rich operation documents, events, CSS,Ajax, effect methods, combined with these methods, you can develop a more Niubility plug-in.

The difference between jquery(function(){}) and (function(){}(jquery)
1.
JQuery (function () {});
All written as
JQuery (docunemt.) ready (function () {
});
The meaning is to execute the ready() method after the DOM has been loaded
2.
(funtion () {
} (jQuery);
Actually executes the ()(para) anonymous method, but passes the jQuery object.

Conclusion: the jQuery (funtion () {}); The code used to hold a DOM object that already exists when the code is executed. Cannot be used to store development plug-in code. Because the jQuery object is not passed, the method cannot be called externally through jQuery. Methodye.
(funtion () {
} (jQuery);
The code used to store the development plug-in, where the code DOM does not necessarily exist, direct automatic DOM operation code please use with care