jQuery的链式编程风格
首先本人通过一个案例来展示jQuery的链式编程风格。先写一个页面，展示一个列表，代码如下：
<body> <div> <ul class="menu"> <li class="level1"> <a href="#">水果</a> <ul class="level2"> <li><a href="#">苹果</a></li> <li><a href="#">菠萝</a></li> <li><a href="#">香瓜</a></li> </ul> </li> <li class="level1"> <a href="#">主食</a> <ul class="level2"> <li><a href="#">面条</a></li> <li><a href="#">馒头</a></li> <li><a href="#">米饭</a></li> </ul> </li> </ul> </div></body><script type="text/javascript"> $(function() { $(".level1 > a").click(function() { $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide(); return false; }); });</script>代码执行后的效果如下图所示：
上述代码的扩展效果就是通过jQuery的链式操作实现的，所有增加current类的操作、查询子元素的方法调用、动画方法的调用等都是对同一个元素进行的，所以在开始获取到一个jQuery对象后，后面的所有方法、属性的调用都通过 "." 进行连续调用即可，这种模式就是链式操作。
为了增加代码的可读性和可维护性，我们将上面的链式代码格式的修改如下：
<script type="text/javascript"> $(function() { $(".level1 > a").click(function() { // 给当前的元素添加current样式 $(this).addClass("current") // 下一个元素显示 .next().show() // 父元素的同辈元素的子元素a移除current样式 .parent.siblings().children("a").removeClass("current") // 他们的下一个元素隐藏 .next().hide(); return false; }); });</script>经过规范格式的调整后，增加了代码的易读性，更加方便后期的维护。
与此同时，我们对于同一个jQuery对象进行链式操作时，主要遵循下面3条格式规范。
（1）对于同一个对象不超过3个操作，可以直接写成一行，代码如下：
<script type="text/javascript"> $(function() { $("li").show().unbind("click"); });</script>（2）对于同一个对象的较多操作，建议每行写一个操作，代码如下：
<script type="text/javascript"> $(function() { $(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast", 0.5) .fadeTo("fast", 1) .unbind("click") .click(function() { ....... }); });</script>（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。代码如下：
<script type="text/javascript"> $(function() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); });</script>以上就是有关jQuery的链式编程风格。
原文转载：http://www.shaoqun.com/a/768932.html
wario：https://www.ikjzd.com/w/887
c2c模式：https://www.ikjzd.com/w/1576
jQuery的链式编程风格首先本人通过一个案例来展示jQuery的链式编程风格。先写一个页面，展示一个列表，代码如下：<body><div><ulclass="menu"><liclass="level1"><ahref="#">水果</a><ulclass=&
aca：https://www.ikjzd.com/w/1371
netporter：https://www.ikjzd.com/w/2132
parser：https://www.ikjzd.com/w/680
突破性进展！印度或给中国减免80%的关税！：https://www.ikjzd.com/articles/108522
见男网友后口述细节 我和他注定不是能走完一生的人：http://lady.shaoqun.com/m/a/270018.html
7 大招，教你全方位无死角获取关键词：https://www.ikjzd.com/articles/132222
没有评论:
发表评论