欢迎光临
我的个人博客网站

jQuery的链式编程风格

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的链式编程风格

 

 上述代码的扩展效果就是通过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的链式编程风格。

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery的链式编程风格
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏