jquery - difference between $.functionName and $.fn.FunctionName

In jQuery, I have seen both the following ways of defining a jQuery function:

$.fn.CustomAlert = function() {
  alert('boo!');
};

$.CustomAlert = function() {
  alert('boo!');
};

I understand that they are attached to the jQuery object (or $), but what is the difference between the two? When should I use one or the other?

Thanks.

Solution 1:

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 the text 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());
        });
    };
})(jQuery);

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.

Finally, I found similar questions :-)

• Difference between jQuery.extend and jQuery.fn.extend?
• jQuery plugin .fn question
• jQuery Plugin Authoring: Why do some do jQuery.pluginName and others jQuery.fn.pluginName?
• in jQuery what is the difference between $.myFunction and $.fn.myFunction?

Solution 2:

A

$.a = function() {
  return "hello world";
};

alert($.a());

B

$.fn.b = function() {
  return "hello " + $(this).length + " elements";
}

alert($("p").b());