Javascript jquery 链接是如何工作的？

how does jquery chaining work?

提问by isJustMe

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!

谢谢！

回答by user113716

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

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

演示：http : //jsfiddle.net/5kkCh/

回答by Tejs

All that it is doing is returning a reference to thiswhen the method finishes. Take this simple object for example:

它所做的只是this在方法完成时返回一个引用。以这个简单的对象为例：

 var sampleObj = function()
 {
 };

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

You could chain these calls all day because you return a reference to this:

您可以整天链接这些调用，因为您返回对 的引用this：

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

jQuery simply performs an operation, then returns this.

jQuery 只是执行一个操作，然后返回this.

回答by Daniel A. White

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

基本上，第一个函数调用$('myDiv')返回一个 jQuery 对象，然后每个后续调用都返回相同的对象。

Loosely,

松散地，

var $ = function(selector) {
   return new jQuery(selector);
};

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

回答by GSto

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 函数都返回一个 jQuery 类的实例，然后可以在其上调用方法。你可以分解它，这段代码会产生同样的效果。

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

回答by pimvdb

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:

以便您可以在 上调用另一个函数foo()。为此，您可以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.

因此，因为something.bar()计算为something，您可以立即一次性调用第二个函数。

回答by Muhammad Usman

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 jQueryor $returns itself (an object) which allows the chaining.

在链接父函数/方法时返回一个对象，然后由子函数/方法使用，事情就这样进行。简而言之jQueryor$返回自身（一个对象），它允许链接。

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

回答by Matthew.Lothian

Here is an example of conditional callback chaining, like is used on the $.ajaxjQuery function.

这是条件回调链接的示例，就像在$.ajaxjQuery 函数上使用的一样。

// 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;
}

回答by Shoib Mohammed A

One of the way to chaining, check demo .

链接的方法之一，检查演示。

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

回答by Srikrushna

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,

链接用于连接选择器中的多个事件和函数。

在同一个元素上一个接一个地运行多个 jQuery 命令。通常，链接使用 jQuery 内置函数使编译速度更快。

它使您的代码简短且易于管理，并提供更好的性能，

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.

注意：链条从左到右开始。所以最左边的将首先被调用，依此类推。

回答by Hamdy Saady

Chainingallows us to run multiple jQuery methods (on the same element) within a single statement.

链接允许我们在单个语句中运行多个 jQuery 方法（在同一个元素上）。

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 :

下面的例子链在一起css()，slideUp()和slideDown()方法。“p1”元素首先变为红色，然后向上滑动，然后向下滑动：

 $("#p1").css("color", "red").slideUp(2000).slideDown(2000);