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