热门关键字:
jquery > jquery教程 > jquery教程 > jQuery方法链

jQuery方法链

250
作者:管理员
发布时间:2021/1/27 18:08:45
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3543
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
友荐云推荐