对象或方法链接如何在jQuery中工作

如果你有一个包含某些方法的对象，如果每个方法都返回一个带有方法的对象，你可以简单地从返回的对象调用一个方法。

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

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

它所做的只是在方法完成时返回对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 。

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

松散

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

return $this;

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

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

关键是函数的计算结果必须为"父"函数。所以例如

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，所以可以立即一次性调用第二个函数。

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

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

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

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

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

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

艾克桑普

无链接

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

带链接

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

注意：链条从左到右开始。所以左边大多数将首先被称为，依此类推。

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

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

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