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