What is the difference between $.pluginName and $.fn.pluginName

Question

I see the following two patterns quite often. What is the difference between the two? When is each appropriate?

$.pluginName = function(){}

and

$.fn.pluginName = function(){}

Answer 1

Very simple:

$.fn.pluginName is a function callable on all jQuery.init* objects. This is useful for making chain-able functions to use with objects:

Example:

$.fn.foo = function(){...};

$('#bar').foo(); 

To continue chaining objects, you need to return another jQuery.init object (could be the original one, or a filtered one):

$.fn.foo = function(){ return this; };

---

$.pluginName is a function callable as $.pluginName(). This is useful for making utility functions, or storing a particular plugin's default states.

Example:

$.foo = function(){...};

bar = $.foo();

_{*The jQuery factory function (jQuery() or $()) actually returns a new jQuery.init object}

Answer 2

$.pluginName is for utility functions that have been added to the jQuery namespace, such as:

$.isArray();
$.extend();
etc

$.fn.pluginName is for functions that work on lists of elements as returned by the jQuery $(...) function:

$(...).attr( ... );
$(...).first( ... );
etc