jQuery 链
在本教程中，您将学习如何在 jQuery 中链接多个方法。
jQuery 方法链
jQuery 提供了另一个强大的功能，称为方法链接，它允许我们在同一行代码中对同一组元素执行多个操作。
这是可能的，因为大多数 jQuery 方法返回一个 jQuery 对象，该对象可以进一步用于调用另一个方法。 这是一个例子。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
});
});
</script>上面的例子演示了三个 animate() 方法的链接。 当用户单击触发按钮时，它会将 <p> 扩展为 100% 宽度。 width 更改完成后，font-size 开始动画，完成后，border 动画将开始。
提示： 方法链接不仅可以帮助您保持 jQuery 代码简洁，而且还可以提高脚本的性能，因为浏览器不必多次查找相同的元素来处理它们。
您还可以将单行代码分成多行以提高可读性。 例如，上例中的方法序列也可以写成：
<script>
$(document).ready(function(){
$("button").click(function(){
$("p")
.animate({width: "100%"})
.animate({fontSize: "46px"})
.animate({borderWidth: 30});
});
});
</script>一些 jQuery 方法不返回 jQuery 对象。 通常，setters 即在选择上分配一些值的方法返回一个 jQuery 对象，它允许您继续在您的选择上调用 jQuery 方法。 而 getters 返回请求的值，因此您不能继续对 getter 返回的值调用 jQuery 方法。
此场景的一个典型示例是 html() 方法。 如果没有参数传递给它，则返回所选元素的 HTML 内容而不是 jQuery 对象。
<script>
$(document).ready(function(){
$("button").click(function(){
// 这将起作用
$("h1").html("Hello World!").addClass("test");
// 这行不通
$("p").html().addClass("test");
});
});
</script>Advertisements