Javascript jquery链接是如何工作的？

我不是问什么是链接的适当语法，我知道它可能是这样的：

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

然而，我真的很想了解它的内部工作原理，据我所知，链接是与其他著名框架相比的优势之一，但对于像我这样的新手程序员来说，这是一个非常抽象的概念，我相信有人可以为我提供一个解释，让我了解链接是如何工作的

---

谢谢

基本上第一个函数调用

$（'myDiv'）

返回一个jQuery对象，然后每个后续调用返回相同的对象

松散地

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

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

---

它所做的只是在方法完成时返回对

this

的引用。以这个简单的对象为例：

 var sampleObj = function()
 {
 };

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

您可以整天链接这些调用，因为您返回了对

this

的引用：

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

function foo() {
    // empty, nothing interesting here
}

foo.prototype.bar = function() {
    return this;
}

foo.prototype.test = function() {
    return this;
}

---

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

this

如果您有一个带有特定方法的对象，如果每个方法返回一个带有方法的对象，那么您只需从返回的对象调用一个方法即可

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

演示：

每个jQuery函数返回jQuery类的一个实例，然后可以对其调用方法。你可以把它分解，这段代码也会有同样的效果

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

---

关键是函数必须计算为“父”函数。例如

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

必须评估：

foo().test();

这样您就可以在

foo（）

上调用另一个函数。为此，您可以

返回此

：

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

function foo() {
    // empty, nothing interesting here
}

foo.prototype.bar = function() {
    return this;
}

foo.prototype.test = function() {
    return this;
}

那么

正因为如此：

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

---

因此，由于

something.bar（）

的计算结果为

something

，因此您可以立即调用第二个函数。

在链接中，父函数/方法返回一个对象，然后子函数/方法使用该对象，事情就是这样进行的。简而言之，

jQuery

或

$

返回允许链接的自身（对象）

这与下面的机制相同

var obj=$('input');    //returns jQuery object
var obj1=obj.val('a'); //returns jQuery object
var obj2=obj1.fadeOut();//returns jQuery object

如果是通过链接完成的，它看起来是这样的

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

---

下面是一个条件回调链接的示例，如在

$.ajax

jQuery函数上使用的

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

---

链接的方法之一，检查

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

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

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

Eaxample

没有锁链

用链子

注意：链条从左到右开始。所以最左边的将被称为第一位，以此类推

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

下面的示例将

css（）

、

slideUp（）

和

slideDown（）方法链接在一起。“p1”元素首先变为红色，然后向上滑动，然后向下滑动：

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

下面的答案都不完整，请查看
.end（）
：：上的文档，因为jQuery不仅返回函数正在操作的对象，而且如果选择器在链中更改，它还会保留所用选择器的历史记录，以便您可以“返回”这里是设计模式：@Vibhu:OP想知道链接是如何工作的，而不是jQuery实现的所有细节。“…对于像我这样的新手程序员来说，我相信有人能为我提供一个解释，让我了解链接是如何工作的。”得到了非常好的答案！谢谢大家。我喜欢这个例子，使它更简单了。。感谢您不要使用
返回obj
，您可以说
返回此
？因为我进行了测试，它给出了相同的结果。@Derek:您可以这样做，因为示例中函数中的
这个
将是每个方法调用的对象。@Derek朕會功夫 我认为对于那些不熟悉JavaScript的人来说，@squint-answer的方法（返回对变量的引用而不是
this
）更为清晰，因为
var-that=this
似乎让我的经验中的人不想学编程，他们认为这很难。但我认为你的建议更清晰，因为它使你可以更清楚地了解如何实现多个“深度”的chainshow访问，就像array工作一样，
$（'a'）[0]
给出了第一个元素。我发现这比公认的答案更能解释它的工作原理。
$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});

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

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