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的链式编程风格的更多相关文章

  1. jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  3. 模拟jquery底层链式编程

    //特点1:快级作用域,程序启动自动执行 //内部的成员变量,外部无法访问(除了var) //简单的函数链式调用 function Dog(){ this.run=function(){ alert( ...

  4. JQuery的链式编程，隐式迭代是啥意思？

    链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...

  5. JQuery的链式编程与隐式迭代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. iOS开发技巧系列---使用链式编程和Block来实现UIAlertView

    UIAlertView是iOS开发过程中最常用的控件之一,是提醒用户做出选择最主要的工具.在iOS8及后来的系统中,苹果更推荐使用UIAlertController来代替UIAlertView.所以本 ...

  7. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  8. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  9. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

随机推荐

  1. JVM学习笔记（二）：JVM基本结构

    1 来源 来源:<Java虚拟机 JVM故障诊断与性能优化>--葛一鸣 章节:第二章 本文是第二章的一些笔记整理. 2 JVM基本参数-Xmx java命令的一般形式如下: java [- ...

  2. 11- client测试

    client是客户端,软件分为客户端与服务端,客户端就是我们使用的软件,比如浏览器,QQ,抖音等.服务端就是客户端使用操作,服务端给你响应的请求.

  3. hdu4973 线段树（题目不错，用了点，段，更新查找还有DFS）

    题意:       给你一个初始序列,初始序列长度n,分别为1 2 3 4 5 ....n,有两种操作 (1)D l r 把l_r之间的数据都复制一遍 1 2 3 4 5 6 D 2 4 = 1 2 ...

  4. Python中对序列数据的汇总(collections模块)

    目录 Counter most_common 对于序列如字符串str.列表list和tuple可以统计里面数据出现的次数.我们使用的是 collections 模块. collections模块的常用 ...

  5. POJ3122贪心或者二分（分蛋糕）

    题意:        m+1个人来分n个蛋糕,每个人分到的蛋糕数必须一样而且还必须是同一个蛋糕上的,问每个人最多分多少蛋糕? 思路:      能想到的方法有两种,一个是直接贪心,另一个就是二分,这个 ...

  6. TLS实现代码段加密

    刚开始见到这个思路是看到周大师用这个东西做的免杀,当时感觉这个想法很好,但是由于当时对PE结构了解的少,看到二进制的东西就打怵,所以当时也没能成功的去实现这个思路,只是简单的记录了一下TLS的特性,直 ...

  7. Day002 Hello，World！！！

    Hello,World! 随便新建一个文件,存放代码 新建一个java文件 文件后缀名为.java Hello.java [注意点] 系统可能没有显示文件后缀名,我们需要手动打开 编写代码 publi ...

  8. jquery中定义数组并给数组赋值后转为json格式为[]问题的解决

    一.问题描述:jquery定义一个空数组,并赋值,结果转为json格式后打印值为空 我原本是这样写的,但是show_data值一直为[] var export_data = [];export_dat ...

  9. 通过Dapr实现一个简单的基于.net的微服务电商系统(十一)——一步一步教你如何撸Dapr之自动扩/缩容

    上一篇我们讲到了dapr提供的bindings,通过绑定可以让我们的程序轻装上阵,在极端情况下几乎不需要集成任何sdk,仅需要通过httpclient+text.json即可完成对外部组件的调用,这样 ...

  10. Linux上的Shebang符号(#!)

    使用Linux或者unix系统的同学可能都对#!这个符号并不陌生,但是你真的了解它吗? 本文了将给你简单介绍一下Shebang("#!")这个符号. 首先,这个符号(#!)的名称, ...