I'd like to understand the jQuery plugin syntax

function(x){     x...}

is just a function without a name, that takes one argument, "x", and does things with x.

Instead of 'x', which is a common variable name, you can use $, which is a less common variable name, but still legal.

function($){     $...}

I'll put it in parentheses to make sure it parses as an expression:

(function($){    $....})

To call a function, you put () after it with a list of arguments. For example, if we wanted to call this function passing in 3 for the value of $ we would do this:

(function($){    $...})(3);

Just for kicks, let's call this function and pass in jQuery as a variable:

(function($){     $....})(jQuery);

This creates a new function that takes one argument and then calls that function, passing in jQuery as the value.

WHY?

• Because writing jQuery every time you want to do something with jQuery is tedious.

WHY NOT JUST WRITE $ = jQuery?

• Because someone else might have defined $ to mean something else. This guarantees that any other meanings of $ are shadowed by this one.

(function( $ ){})( jQuery );

That is self-executing anonymous function that uses $ in argument so that you can use it ($) instead of jQuery inside that function and without the fear of conflicting with other libraries because in other libraries too $ has special meaning. That pattern is especially useful when writing jQuery plugins.

You can write any character there instead of $ too:

(function(j){  // can do something like   j.fn.function_name = function(x){};})(jQuery);

Here j will automatically catch up jQuery specified at the end (jQuery). Or you can leave out the argument completely but then you will have to use jQuery keyword all around instead of $ with no fear of collision still. So $ is wrapped in the argument for short-hand so that you can write $ instead of jQuery all around inside that function.

If you even look at the source code of jQuery, you will see that everything is wrapped in between:

(function( window, undefined ) {  // jQuery code})(window);

That is as can be seen also a self-executing anonymous function with arguments. A window (and undefined) argument is created and is mapped with global window object at the bottom (window). This is popular pattern these days and has little speed gain because here window is will be looked into from the argument rather than global window object which is mapped below.

The $.fn is jQuery's object where you create your new function (which is also an object) or the plugin itself so that jQuery wraps your plugin in its $.fn object and make it available.

Interestingly, I had answered similar question here:

JavaScript / jQuery closure function syntax

You can also check out this article to know more about self-executing functions that I had written:

Javascript Self-executing Functions

The basic plugin syntax allows you to use $ to refer to jQuery in the body of your plugin, regardless of the identify of $ at the time the plugin is loaded. This prevents naming conflicts with other libraries, most notably Prototype.

The syntax defines a function that accepts a parameter known as $ so you can refer to it as $ in the function body, and then immediately invokes that function, putting jQuery in as the argument.

This also helps not pollute the global namespace (so declaring var myvar = 123; in your plugin body won't suddenly define window.myvar), but the main ostensible purpose is to allow you to use $ where $ may have since been redefined.