Question

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

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

然而，我真的好奇理解它的内部工作，据我所知，链接是对其他着名框架的优势之一，但对于像我这样的新手程序员来说，我们有很多抽象，我敢肯定是那里有人可以给我一个解释，让我了解链是如何工作的。

谢谢！

Answer 1

如果你有一个具有某些方法的对象，如果每个方法都返回一个带方法的对象，你只需从返回的对象中调用一个方法。

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

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

 var sampleObj = function()
 {
 };

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

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

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

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

Answer 3

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

松散，

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

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

Answer 4

return $this;

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

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

Answer 5

关键是函数必须求值为“父”函数。例如，

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

必须评估为：

foo().test();

这样您就可以在foo()上调用另一个函数。为此，您可以return this：

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

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

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

然后，

var something = new foo();
something.bar() === something; // true

因此：

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

因为something.bar()评估为something，您可以立即调用第二个函数。

Answer 6

在链接中，父函数/方法返回一个对象，然后由子函数/方法使用，事情就这样了。简而言之，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();

Answer 7

这是一个条件回调链接的例子，就像$.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;
}

Answer 8

链接方式之一，请检查demo 。

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

Answer 9

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

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

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

<强> Eaxample

没有链接

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

使用链接

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

注意：链从左到右开始。所以最左边的人会先被召唤等等。

Answer 10

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

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

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

jquery链接如何工作？

10 个答案: