jQuery 链(Chaining)

jQuery提供了另一个强大的功能，称为方法链接。

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

jQuery方法链

到目前为止，我们一次只写一个jQuery语句（一个又一个）。

但是，有一种称为链接的技术，该技术可在单个语句中的同一元素上运行多个jQuery命令。

这样，浏览器不必多次查找相同的元素。

这是可能的，因为大多数jQuery方法都返回一个jQuery对象，该对象可以进一步用于调用另一个方法。

下面的实例链在一起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);
});

我们可以在一条语句中链接任意数量的方法：

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

注意：有些jQuery方法不返回jQuery对象，而另一些仅根据我们传递给它的参数返回它。考虑以下示例：

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

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