how does jquery chaining work?
JavascriptJqueryFrameworksJavascript Problem Overview
I am not asking what is the appropriate syntax for chaining, I know it could be something like:
$('myDiv').removeClass('off').addClass('on');
However I'm really curious to understand the inner working of it, as far as I know chaining is one of the advantages against other famous frameworks but this us to much abstraction for a novice programer like me, I'm sure there is someone out there that can provide me with a explanation that allows me to understand how chaining works.
Thanks!
Javascript Solutions
Solution 1 - Javascript
If you have an object with certain methods, if each method returns an object with methods, you can simply call a method from the object returned.
var obj = { // every method returns obj---------v
first: function() { alert('first'); return obj; },
second: function() { alert('second'); return obj; },
third: function() { alert('third'); return obj; }
}
obj.first().second().third();
Solution 2 - Javascript
All that it is doing is returning a reference to this
when the method finishes. Take this simple object for example:
var sampleObj = function()
{
};
sampleObj.prototype.Foo = function()
{
return this;
};
You could chain these calls all day because you return a reference to this
:
var obj = new sampleObj();
obj.Foo().Foo().Foo().Foo() // and so on
jQuery simply performs an operation, then returns this
.
Solution 3 - Javascript
Basically the first function call $('myDiv')
returns a jQuery object, then each subsequent call returns the same one.
Loosely,
var $ = function(selector) {
return new jQuery(selector);
};
jQuery.prototype.removeClass = function(className) {
// magic
return this;
}
Solution 4 - Javascript
return $this;
each jQuery function returns an instance of the jQuery class, which can then have methods called on it. you could break it down, and this code would have the same effect.
jQuery_obj = $('myDiv');
jQuery_obj = jQuery_obj.removeClass('off');
jQuery_obj = jQuery_obj.addClass('on');
Solution 5 - Javascript
The point is that a function must evaluate to the "parent" function. So e.g.
foo().bar().test();
has to evaluate to:
foo().test();
so that you can call another function on foo()
. To do this, you can return this
:
function foo() {
// empty, nothing interesting here
}
foo.prototype.bar = function() {
return this;
}
foo.prototype.test = function() {
return this;
}
Then,
var something = new foo();
something.bar() === something; // true
And because of this:
something.bar().test() === something.test(); // true
So because something.bar()
evaluates to something
, you can immediately call the second function in one go.
Solution 6 - Javascript
In chaining parent function/method returns an object which is then used by the child function/method, and things go on such a way. In short the jQuery
or $
returns itself (an object) which allows the chaining.
It is the same mechanism below
var obj=$('input'); //returns jQuery object
var obj1=obj.val('a'); //returns jQuery object
var obj2=obj1.fadeOut();//returns jQuery object
It looks like this if it is done with chaining
$('input').val('a').fadeOut();
Solution 7 - Javascript
Here is an example of conditional callback chaining, like is used on the $.ajax
jQuery function.
// conditional callback function example
myFunction = function () {
// define event callback prototypes without function parameter
var callback_f = new Object;
callback_f.callback1 = function () { return callback_f; };
callback_f.callback2 = function () { return callback_f; };
if ([condition]){
// redefine the callback with function parameter
// so it will run the user code passed in
callback_f.ReturnPlayer = function (f) { f(); return callback_f; };
}else{
callback_f.NewPlayer = function (f) { f(); return callback_f; };
}
return callback_f;
}
Solution 8 - Javascript
One of the way to chaining, check demo .
test("element").f1().f2().f3()
Solution 9 - Javascript
> Chaining is used to connect multiple events and functions in a selector. > > To run multiple jQuery commands, one after the other, on the same element(s). Generally chaining uses the jQuery built in functions that makes compilation a bit faster. > > It makes your code short and easy to manage and it gives better performance,
Eaxample
> Without Chaining
$(document).ready(function(){
$('#dvContent').addClass('dummy');
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
> With Chaining
$(document).ready(function(){
$('#dvContent').addClass('dummy')
.css('color', 'red')
.fadeIn('slow');
});
> Note: The chain starts from left to right. So left most will be called first and so on.
Solution 10 - Javascript
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
The following example chains together the css()
, slideUp()
, and slideDown()
methods. The "p1" element first changes to red, then it slides up, and then it slides down :
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);