What does the fn here mean?
jQuery.fn.jquery
Add a comment
|
5 Answers
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"
answered Nov 3, 2010 at 0:49
Christian C. Salvadó
831k185 gold badges929 silver badges845 bronze badges
11 Comments
Brandon
Is this guaranteed to be true? Can I assume a call to jQuery.prototype is exactly the same as jQuery.fn? My worry is if jQuery does some magic when you call .fn then they aren't interchangeable
E.E.33
Oh, I am missing something.. 'window.foo = foo' gives 'foo' a global scope? never new that, I'll add that to my list of techniques to learn.
Shawn
@E.E.33 If I'm not mistaken, the global scope in javascript simply means that your variable is a parameter of the window object.
Racing Tadpole
Zack
@Shawn I think it would be called a property, not a parameter, right? A parameter would be the 'a' variable here
function func1 (a) { ... }, and a property would be the 'a' variable here var foo = {}; foo.a = 'a'. |
fn literally refers to the jquery prototype.
This line of code is in the source code:
jQuery.fn = jQuery.prototype = {
//list of functions available to the jQuery api
}
But the real tool behind fn is its availability to hook your own functionality into jQuery. Remember that jquery will be the parent scope to your function, so this will refer to the jquery object.
$.fn.myExtension = function(){
var currentjQueryObject = this;
//work with currentObject
return this;//you can include this if you would like to support chaining
};
So here is a simple example of that. Lets say I want to make two extensions, one which puts a blue border, and which colors the text blue, and I want them chained.
jsFiddle Demo
$.fn.blueBorder = function(){
this.each(function(){
$(this).css("border","solid blue 2px");
});
return this;
};
$.fn.blueText = function(){
this.each(function(){
$(this).css("color","blue");
});
return this;
};
Now you can use those against a class like this:
$('.blue').blueBorder().blueText();
(I know this is best done with css such as applying different class names, but please keep in mind this is just a demo to show the concept)
This answer has a good example of a full fledged extension.
6 Comments
vinczemarton
Can't you just skip the
each in your example code? $.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; }; would work fine, as .css() alerady iterates over the elements.
Travis J
@SoonDead - You certainly could because if the jQuery object holds a collection then the
css function will automatically iterate over them internally with each. It was just an example of showing the differences in this where the outer one is the jquery object and the inner one references the element itself.
Sander
@SoonDead Good comment, but I really like how Travis J explained the idea/principle. :)
Gerard ONeill
This is the best comment -- Knowing that fn is just an alias is not nearly as useful as knowing why anyone should care, and this answer demonstrated it beautifully.
VivekP
After going through the other answers, I found this one to be easier to understand the main concept. Thank you. :)
|
jQuery.fn is defined shorthand for jQuery.prototype. From the source code:
jQuery.fn = jQuery.prototype = {
// ...
}
That means jQuery.fn.jquery is an alias for jQuery.prototype.jquery, which returns the current jQuery version. Again from the source code:
// The current version of jQuery being used
jquery: "@VERSION",
4 Comments
E.E.33
I like this answer. I shows exactly how to find the definition inside the source code, and then how to interpret the definition in a useful manner. The good ol' "teach a man to fish" method of answering. +1.
slier
but what is the purpose of doing that? just saving couple of keystroke?
Andy E
@slier: yes, pretty much.
slier
i bet there is other purpose..attaching function to $.fn, will make static function
The $.fn is an alias for jQuery.prototype which allows you to extend jQuery with your own functions.
For Example:
$.fn.something = function{}
will allow you to use
$("#element").something()
The $.fn is also synonymous with jQuery.fn.
1 Comment
JTCon
Its possible to return a value? how?
In the jQuery source code we have jQuery.fn = jQuery.prototype = {...} since jQuery.prototype is an object the value of jQuery.fn will simply be a reference to the same object that jQuery.prototype already references.
To confirm this you can check jQuery.fn === jQuery.prototype if that evaluates true (which it does) then they reference the same object