jQuery的链式编程风格

更新日期: 2021-02-27阅读: 1.5k标签: jquery分享

复制链接

新浪微博

QQ 好友

扫一扫分享

首先本人通过一个案例来展示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的链式编程风格。

链接: https://fly63.com/article/detial/10364

jQuery的链式编程风格

是时候和 jQuery 说拜拜了么？

前端程序员应该知道的15个jQuery小技巧

Jquery插件开发的方法总汇

JQuery 自动触发事件

高版本jquery中attr和prop的区别

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery分页插件pagination.js报错pagination is not a function的bug解决方法

jQuery 常用小技巧分享

jquery动画实现_浅谈jQuery之动画

jQuery如何为指定标签添加和删除一个样式