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

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异常处理-2断言和日志-3使用Commons Logging

    Commons Logging是Apache创建的日志模块: 可以挂接不同的日志系统 可以通过配置文件指定挂接的日志系统 自动搜索并使用Log4j 如果Log4j不存在,使用JDK Logging(J ...

  2. centos7部署openvpn-2.4.6

    一.环境说明 返回主机的IP地址 # ip a | grep "scope global" | awk -F'[ /]+' '{print $3}' | head -1 [root ...

  3. DNS解析分析

    一.基本概念 域名系统: 域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.DNS使 ...

  4. hadoop 分布式机群搭建

    描述:鉴于本地电脑内存限制,采用三台虚机安装此环境. 主机名,分别为master.slave1.slave2. zookeeper分别安装这三台机器上,master和slave1做主从备份, slav ...

  5. vmware workstation14嵌套安装kvm

    1.前言 我在2017-11-06使用virtualbox安装了centos,然后嵌套kvm(win7),链接地址如下: https://www.cnblogs.com/tcicy/p/7790956 ...

  6. Linux性能优化 第一章 性能追踪建议

    1.1常用建议1.1.1记大量的笔记(记录所有的事情)在做性能调优问题的时候很重要的一个操作就是记录下所有的事情,包括每一个输出.执行的结果.可以新建一个文件夹,然后把结果的文件都塞到该文件夹内.包括 ...

  7. 类似openDialog的弹窗

    html <modal title="这里是标题" hidden="{{modalHidden}}" bindconfirm="modalCon ...

  8. 了解Katalon的安装及基本使用（for mac）

    一.整体了解: 2018 top 6的自动化测试工具(网上了解): 1. Selenium 2. Katalon Studio 3. UFT 4. Watir 5. IBM Rational Func ...

  9. mac OS 安装maven遇到问题e45: 'readonly' option is set

    1.下载 Maven, 并解压到某个目录.例如/Users/yintingting/apache-maven-3.3.9 2.打开Terminal,输入以下命令,设置Maven classpath v ...

  10. unicode转中文以及str形态的unicode转中文

    今天在工作中遇到这样一个问题(工作环境为Python2.7.1),需要将一个字典中字符串形态的Unicode类型的汉字转换成中文,随便总结一下: 1.unicode转中文 old = u'\u4e2d ...