in jQuery what is the difference between $.myFunction and $.fn.myFunction?

jquery-plugins

Solution

Looking at the jQuery source code will clear things up. By the way, `jQuery` and `$` refer to the same object, and this is how the jQuery object is defined:

var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
}

`jQuery` is a function and in Javascript, a function is also an object of the type `Function`. So `jQuery.f` or `$.f` attaches `f` to the jQuery `Function` object, or call it the jQuery class if you will.

if you look at jQuery's source, you'll see that `jQuery.prototype` has been assigned to `jQuery.fn`

jQuery.fn = jQuery.prototype

So, whenever you attach a method (or property) to `jQuery.fn`, as in `jQuery.fn.f = ..`, or `$.fn.f = ..`, or `jQuery.prototype.f = ..`, or `$.prototype.f = ..`, that method will be available to all instances of this jQuery class (again, there are no classes in Javascript, but it may help in understanding).

Whenever you invoke the `jQuery()` function, as in `jQuery("#someID")`, a new jQuery instance is created on this line:

return new jQuery.fn.init( selector, context );

and this instance has all the methods we attached to the prototype, but not the methods that were attached directly to the `Function` object.

You will get an exception if you try calling a function that wasn't defined at the right place.

$.doNothing = function() {
    // oh noez, i do nuttin
}

// does exactly as advertised, nothing    
$.doNothing();

var jQueryEnhancedObjectOnSteroids = $("body");
// Uncaught TypeError: Object #<an Object> has no method 'doNothing'
jQueryEnhancedObjectOnSteroids.doNothing();

Oh, and finally to cut a long thread short and to answer your question - doing `$.f = $.fn.f` allows you to use the function as a plugin or a utility method (in jquery lingo).

Problem

I'm delving into writing plugins for jQuery and I'm trying to understand the distinction between $.f and $.fn.f I've seen pluggin authors use both, or sometimes assign $.f = $.fn.f Can someone explain this to me, reasoning, benefits, etc?

Original source