What Does Jquery.Fn Mean

What does jQuery.fn mean?

In jQuery, the fn property is just an alias to the prototype property.

The jQuery identifier (or $) is just a constructor function, and all instances created with it, inherit from the constructor's prototype.

A simple constructor function:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

A simple structure that resembles the architecture of jQuery:

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"

In jQuery, what does $.fn. mean?

It allows you to extend jQuery with your own functions.

For example,

$.fn.something = function{}

will allow you to use

$("#element").something()

$.fn is also synonymous with jQuery.fn which might make your Google searches easier.

See jQuery Plugins/Authoring

What is the difference between $ and $.fn?

$ is a function (specifically, a variable pointing to the jQuery function — an alias). $.fn is a property on that function, which points to the prototype of the internal init function jQuery uses to create instances, as we can see in the jQuery code:

jQuery.fn.init.prototype = jQuery.fn;

(That's line 289 of the current un-minified jQuery file, v1.8.3.)

$.fn is there so that it's easy to add properties to it. When you create jQuery objects, they have those properties, because of JavaScript's prototypical inheritance. The most common properties to add to it are, of course, functions that do things (jQuery plug-ins).

What does fn in jQuery stand for?

fn as in f unctio n.

It is also the name of the formal parameter wherever a function is expected:

// Bind a function to a context, optionally partially applying any
// arguments.
proxy: function( fn, context ) {

What does (function($) {})(jQuery); mean?

Firstly, a code block that looks like (function(){})() is merely a function that is executed in place. Let's break it down a little.

1. (
2.    function(){}
3. )
4. ()

Line 2 is a plain function, wrapped in parenthesis to tell the runtime to return the function to the parent scope, once it's returned the function is executed using line 4, maybe reading through these steps will help

1. function(){ .. }
2. (1)
3. 2()

You can see that 1 is the declaration, 2 is returning the function and 3 is just executing the function.

An example of how it would be used.

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

As for the other questions about the plugins:

Type 1: This is not a actually a plugin, it's an object passed as a function, as plugins tend to be functions.

Type 2: This is again not a plugin as it does not extend the $.fn object. It's just an extenstion of the jQuery core, although the outcome is the same. This is if you want to add traversing functions such as toArray and so on.

Type 3: This is the best method to add a plugin, the extended prototype of jQuery takes an object holding your plugin name and function and adds it to the plugin library for you.

What is going on with the javascript and the fn?

In jQuery, jQuery.fn is simply a reference to jQuery.prototype.

So to understand what is happening, you really need to understand prototypal inheritance.

All objects created from the jQuery constructor will inherit any property that exists on the jQuery.prototype object.

Take this simplified example:

function jQuery() {
      // empty constructor function
}

jQuery.fn = jQuery.prototype;  // Make a "fn" property that simply references the 
                               //    jQuery.prototype object.

// So assigning a property to jQuery.fn 
//    is the same as assigning it to jQuery.prototype
jQuery.fn.sayHello = function() { alert( "Hi!" ); };

// Create an object from the jQuery constructor
var obj = new jQuery;

// Our new object will automatically inherit the "sayHello" function
obj.sayHello();  // "Hi!"

This is obviously very simple, and jQuery does much more than just this, but it is the prototypal inheritance that allows all jQuery objects to have the same set of methods.

To add a new method to all jQuery objects, you just add to its prototype.

jQuery.fn.sayGoodbye = function() { alert("Goodbye!"); };

// call the new method on our original object
obj.sayGoodbye();  // Goodbye!

As you can see, the sayGoodbye properly magically appeared, even though we didn't directly add that property to our obj.

---

JSFIDDLE DEMO of the above code.

---

I would assume that the reason they offer jQuery.fn as a property is simply because it is shorter, and perhaps easier to understand for someone who doesn't know how prototypal inheritance works.

jQuery newbie: what does jQuery(function($) { ... }) means?

jQuery(function($) {

});

is the safest version of all three. It makes $ the local variable and thus gracefully avoids the conflicts with any other variables which possibly use $ symbol.

I think it was also added fairly recently, don't remember seeing it before.

These function all do the same things - execute some code when DOM is ready. $(document).ready(function(){}) is the original one, and it matches the underlying javascript API.

"$" and "jQuery" which accept function as an arguments were created as shortcuts to avoid repeating such a common construct. Accepting a function which accepts $ as its first argument is a further syntax sugar - now you get convenience of the closures without the need to do it yourself.

Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn?

The jQuery.fn is just an alias for jQuery.prototype. I suppose it is defined for aesthetic and less typing reasons.

So

jQuery.fn.init.prototype = jQuery.fn;

is actually

jQuery.prototype.init.prototype = jQuery.prototype;

As why this needs to be done, this forum post is helpful:

It gives the init() function the same
prototype as the jQuery object. So
when you call init() as a constructor
in the "return new jQuery.fn.init(
selector, context );" statement, it
uses that prototype for the object it
constructs. This lets init()
substitute for the jQuery constructor
itself.

What you achieve is that the object returned from a jQuery.fn.init constructor has access to jQuery methods.

---

Related Topics