• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

实例详解jQuery的链式编程风格

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

链式编程的实现原理

jQuery可以让我们开发者一直使用点语法调用自身方法的原理,主要原因是jQuery内部利用了js的对象来实现。

在jQuery中,如果一直对同一个元素或元素的其他关系元素(兄弟元素,父子元素)进行操作,那么可以使用 .语法(点语法),一直写下去。

$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");

可以写成:

$("#box").css("background", "pink").siblings().css("background", "red");

实现链式编程jQuery选择器本身是一个jquery对象。jQuery内部利用this返回了自己本身。

    //js中,声明一个对象
       var obj = {  
         name:"姓名", 
        desc: function(){   
        console.log(this); // 打印当前自身对象  
        console.log(this.name); // 调用自身对象的属性   
        return this;  // 实现链式编程的原理,就是在调用方法后,方法本身返回对象。
},  
      read: function(){  
        console.log("hello!");    
        return this; 
    }}


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

总结

到此这篇关于jQuery链式编程风格的文章就介绍到这了,更多相关jQuery链式编程内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
替换json对象中的key最佳方案发布时间:2022-02-05
下一篇:
vue3 可拖动的左右面板分割组件实现发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap