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