How does jquery chaining work?

Question

I am not asking what is the proper syntax for the chain, I know it could be something like:

$('myDiv').removeClass('off').addClass('on'); 

However, I am very curious to understand the internal work on it, as far as I know that the chain is one of the advantages against other well-known frameworks, but this is for a significant abstraction for a novice programmer like myself, I’m sure that there is someone there who can provide me with an explanation that allows me to understand how the chain works.

Thank!

Answer 1

If you have an object with specific methods, if each method returns an object using methods, you can simply call the method from the returned object.

 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(); 

DEMO: http://jsfiddle.net/5kkCh/

Answer 2

All it does is return a reference to this when the method completes. Take this simple object, for example:

  var sampleObj = function() { }; sampleObj.prototype.Foo = function() { return this; }; 

You can link these calls all day because you are returning a link to this :

 var obj = new sampleObj(); obj.Foo().Foo().Foo().Foo() // and so on 

jQuery just does the operation, then returns this .

Answer 3

Basically, the first call to the $('myDiv') function returns a jQuery object, then each subsequent call returns the same.

Loose

 var $ = function(selector) { return new jQuery(selector); }; jQuery.prototype.removeClass = function(className) { // magic return this; } 

Answer 4

 return $this; 

each jQuery function returns an instance of the jQuery class, which can then have methods called on it. you can break it and this code will have the same effect.

 jQuery_obj = $('myDiv'); jQuery_obj = jQuery_obj.removeClass('off'); jQuery_obj = jQuery_obj.addClass('on'); 

Answer 5

The fact is that the function must be evaluated using the "parent" function. For example,

 foo().bar().test(); 

must evaluate:

 foo().test(); 

so you can call another function on foo() . For 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 

Because of this:

 something.bar().test() === something.test(); // true 

Since something.bar() evaluates to something , you can immediately call the second function at a time.

Answer 6

In the chain of the parent function / method, an object is returned, which is then used by the child function / method, and everything happens in this way. In short, jQuery or $ returns itself (an object) that allows chaining.

This 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's done with a chain

 $('input').val('a').fadeOut(); 

Answer 7

Here is an example of a conditional callback chain, as in 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; } 

Answer 8

One way to bind, check out the demo .

 test("element").f1().f2().f3() 

Answer 9

The chain is used to connect several events and functions in the selector.

To run multiple jQuery commands one by one, on the same element. Typically, the chain uses jQuery built-in functions, which makes compilation a little faster.

It makes your code short and easy to manage, and it gives better performance,

Eaxample

Without a chain

 $(document).ready(function(){ $('#dvContent').addClass('dummy'); $('#dvContent').css('color', 'red'); $('#dvContent').fadeIn('slow'); }); 

With chain

 $(document).ready(function(){ $('#dvContent').addClass('dummy') .css('color', 'red') .fadeIn('slow'); }); 

Note The chain starts from left to right. Therefore, most of the rest will be called first and so on.