The difference between JQuery and JQuery.fn

 

原文链接: http://stackoverflow.com/questions/2845981/jquery-difference-between-functionname-and-fn-functionname

 

 

I'm sure this question has been asked several times before, but I can't find the link.

$.fn points to the jQuery.prototype. Any methods or properties you add to it become available to all instance of the jQuery wrapped objects.

$.something adds a property or function to the jQuery object itself.

Use the first form $.fn.something when you're dealing with DOM elements on the page, and your plugin does something to the elements. When the plugin has nothing to do with the DOM elements, use the other form $.something.

For example, if you had a logger function, it doesn't make much sense to use it with DOM elements as in:

$("p > span").log();

For this case, you'd simply add the log method to the jQuery object iself:

jQuery.log = function(message) {
    // log somewhere
};

$.log("much better");

However, when dealing with elements, you would want to use the other form. For example, if you had a graphing plugin (plotGraph) that takes data from a <table> and generates a graph - you would use the $.fn.* form.

$.fn.plotGraph = function() {
    // read the table data and generate a graph
};

$("#someTable").plotGraph();

On a related note, suppose you had a plugin which could be used either with elements or standalone, and you want to access it as $.myPlugin or $("<selector>").myPlugin(), you can reuse the same function for both.

Say we want a custom alert where the date is prepended to each alert message. When used as a standalone function, we pass it the message as an argument, and when used with elements, it uses thetext of the element as the message:

(function() {
    function myAlert(message) {
        alert(new Date().toUTCString() + " - " + message);
    }

    $.myAlert = myAlert;

    $.fn.myAlert = function() {
        return this.each(function() {
            myAlert($(this).text());
        });
    };
})();

It's wrapped in a self-executing function so myAlert doesn't spill out to the global scope. This is an example or reusing functionality between both the plugin forms.

As theIV mentioned, it is a good practice to return the jQuery wrapped element itself since you wouldn't want to break chaining.

 

总结如下：

1. JQuery的继承是对于对象本身的拓展， 不影响其他的实例.  fn则会影响所有的实例，是对prototype的拓展。

2.  JQuery的拓展只是针对功能，与DOM没有关系的功能。 fn需要与DOM的element有关系。