设置一个初级菜单，点击显示本级菜单下的项目，被点击的同级其它菜单收起

html 代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <style>

         .bg {

             background: #ccc;

         }

         .none {

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <ul class="menu">

             <li class="level1">

                 <a href="#">衬衫</a>

                 <ul class="level2">

                     <li><a href="#" class="cc">长袖衬衫</a></li>

                     <li><a href="#" class="cc">短袖衬衫</a></li>

                     <li><a href="#" class="cc">长袖T shirt</a></li>

                     <li><a href="#" class="cc">短袖T shirt</a></li>

                 </ul>

             </li>

             <li class="level1">

                 <a href="#">卫衣</a>

                 <ul class="level2">

                     <li><a href="#" class="cc">开襟卫衣</a></li>

                     <li><a href="#" class="cc">套头卫衣</a></li>

                     <li><a href="#" class="cc">运动卫衣</a></li>

                     <li><a href="#" class="cc">童装卫衣</a></li>

                 </ul>

             </li>

             <li class="level1">

                 <a href="#">裤子</a>

                 <ul class="level2">

                     <li><a href="#" class="cc">短裤</a></li>

                     <li><a href="#" class="cc">牛仔裤</a></li>

                     <li><a href="#" class="cc">卡其裤</a></li>

                     <li><a href="#" class="cc">蚕丝库</a></li>

                 </ul>

             </li>

         </ul>

     </div>

 </body>

 </html>

js代码（非链式写法）：

     <script>

             $(function() {

                 $("ul.level2").addClass("none");

                 $(".level1>a").on("click", function() {

                     $(this).addClass("bg");

                     $(this).next().removeClass('none');

                     $(this).parent().siblings().children("a").removeClass("bg");

                     $(this).parent().siblings().children("a").next().addClass("none");

                 });

             })

     </script>

运行结果：

juery 链式写法：链式写法，可以把常规的需要写的代码简化，从而达到精简代码的目的

jquery 存在的意义：目的就是要达到少写代码，多做操作的事情，把写代码的问题简单化，也就是：write less,do more!

  <script>

         $(function() {

             $("ul.level2").addClass("none");

             $(".level1>a").on("click", function() {

                 $(this).addClass("bg").next().removeClass("none").end().parent().siblings().children("a").removeClass("bg").next().addClass("none");

             });

         })

     </script>

运行结果：

从以上的写法可以看出，虽然写的代码行数减少了，但是效果并没有打折，达到目的了

备注：其中end() 是一个改变指针的函数，在这一行代码中，如果某个时候，我不知道指针现在指到哪里去了，那就加一个end()函数，这样，指针就指向了最初的 this 了

jquery初级接触-----链式操作的更多相关文章

  1. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

  2. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  3. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  4. jquery中链式操作的this指向

    jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...

  5. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  6. jQuery 筛选器 链式编程操作

    $('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...

  7. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  8. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  9. PHP链式操作输出excel（csv）

    工作中经常会遇到产品运营让导出一些简单的比较规范的数据,这时候要是有一个简单的方法可以用就简单多了.下面是我的一个输出简单的excel(csv)的方法类,用到了链式操作.说到链式操作,在jquery中 ...

随机推荐

  1. 廖雪峰Java3异常处理-1错误处理-4自定义异常

    JDK已有的异常: RuntimeException * NullPointerException * IndexOutOfBoundsException * SecurityException * ...

  2. IE6/7 单选按钮 radio 无法选中解决方法

    原文地址:http://blog.sina.com.cn/s/blog_74d6cedd0100ugih.html 今天在做一个页面,居然ff没问题,ie6/7上浏览的时候radio单选按钮不能被选中 ...

  3. Ring3创建事件Ring0设置事件

    应用程序中创建的事件和在内核中创建的事件对象,本质上是同一个东西,在用户模式中,他用句柄表示,在内核模式下,他用KEVENT表示数据结构表示.在应用程序中,所有的内核对象都不会被用户看到,用户看到的知 ...

  4. [UE4]Break展开复杂数据结构

  5. Linux下rz，sz与ssh的配合使用

    Linux下rz,sz与ssh的配合使用 一般来说,linux服务器大多是通过ssh客户端来进行远程的登陆和管理的,使用ssh登陆linux主机以后,如何能够快速的和本地机器进行文件的交互呢,也就是上 ...

  6. hue中使用oozie的workflow执行mr

    workflow创建任务 进入hue–Workflows–编辑器–workflow–创建 拖一个mapreduce作业(在页面靠近顶端有一排选项图标)到页面中间虚线框中 Jar路径必须是hdfs中ja ...

  7. 安装 dubbo

    Dubbo的介绍: 是一个java版的RPC框架,由阿里巴巴开发并使用,结合zookeeper,实现流动计算架构完成资源调度和治理的工作 dubbo管控台可以对注册到zookeeper注册中心的服务或 ...

  8. 表单（同步提交）和AJAX（异步提交）示范

    表单提交(同步提交) HTML文件: PHP文件: 这样就能接收到HTML里输入的内容,注意: FORM表头method为POST,PHP文件获取的方法就是$_POST,method为GET,PHP的 ...

  9. Solr之精确、匹配、排序、模糊查询-yellowcong

    Solr查询数据,其实下面一堆的参数,我也没有做测试,只是转载过来了,我大概只用了高亮.排序.查询.分页,其他的好像没有用过,以后用再来查 一.基本查询 参数 意义 q 查询的关键字,此参数最为重要, ...

  10. javascript(面向对象，作用域，闭包，设计模式等)

    javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...