jQuery 鏈(Chaining)

jQuery提供了另一個強(qiáng)大的功能，稱為方法鏈接。

鏈接允許我們在單個語句中的同一元素上運(yùn)行多個jQuery方法。

jQuery方法鏈

到目前為止，我們一次只寫一個jQuery語句（一個又一個）。

但是，有一種稱為鏈接的技術(shù)，該技術(shù)可在單個語句中的同一元素上運(yùn)行多個jQuery命令。

這樣，瀏覽器不必多次查找相同的元素。

這是可能的，因?yàn)榇蠖鄶?shù)jQuery方法都返回一個jQuery對象，該對象可以進(jìn)一步用于調(diào)用另一個方法。

下面的實(shí)例鏈在一起css()，hide()和show()方法：

$("button").click(function(){
  $("p").css("background-color", "coral").hide(2000).show(2000);
});

我們還可以將一行代碼分成多行以提高可讀性。

例如，以上示例中的方法序列也可以寫成：

$("button").click(function(){
  $("p")
    .css("background-color", "coral")
    .hide(2000)
    .show(2000);
});

我們可以在一條語句中鏈接任意數(shù)量的方法：

$("button").click(function(){
  $("div")
    .animate({width:"500px"})
    .animate({height:"200px"})
    .animate({fontSize: "10em"})
    .animate({opacity: 0.3});
});

注意：有些jQuery方法不返回jQuery對象，而另一些僅根據(jù)我們傳遞給它的參數(shù)返回它。考慮以下示例：

// 正確用法
$("p").css("background-color", "coral").hide(2000).show(2000);

// 錯誤用法
$("p").css("background-color", "coral").hide().show();