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的链式编程风格。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
