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

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. 廖雪峰Java2面向对象编程-1面向对象-1面向对象基础

    1.对象的概念 面向对象编程:Object-Oriented Programming 对现实世界建立计算机模型的一种编程方法. 现实世界 计算机模型 Java代码 人 类/class class Pe ...

  2. B-树和B+树的应用

    1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点,则至少 ...

  3. HDFS 入门介绍

    HDFS简介 HDFS(Hadoop Distributed File System,Hadoop分布式文件系统),它是一个高度容错性的系统,适合部署在廉价的机器上.HDFS能提供高吞吐量的数据访问, ...

  4. 批处理taskkill运行结束不掉程序以及停留问题

    我原来就一句代码 TASKKILL /F /IM QQ.exe 保存为taskkill.bat,结果运行起来一直显示,但是没有结束掉进程,百度搜索才知道taskkill为系统关键字,不能命名为task ...

  5. 调整SQLServer最大服务器内存参数后实例停止且无法启动

    很显然问题原因是:限制内存并应用后,SQLServer内存不足自动停止,并且无法正常启动之 解决,以最小模式启动SQLServer实例,修改内存限制 --1.开启一个cmd窗口 窗口1,-f最小模式启 ...

  6. vs2017配置文件目录

    C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\15.0_6d0a0a42

  7. python 之 json 与pickle 模块

    序例化:将对象转换为可通过网络传输或可以存储到本地磁盘的数据格式(如:XML.JSON或特定格式的字节串)的过程称为序列化:反之,则称为反序列化. 1.[JSON] import json dic={ ...

  8. inno setup 软件打包

    2017-05-26 软件开发完毕以后,要进行打包发布,有几款打包用的软件很常见:innosetup,nullsoft,installshield.本人今天终于把自己独立开发的呈现软件打了包.第一个版 ...

  9. Shell流程控制（if,else,case,while,for,until）

    1.条件选择 1.1.if 语句 语法十分简单 #!/bin/bash MATH_SCORES="$1" NAME="$2" if [ -z "${M ...

  10. apache（httpd）配置

    1.简单配置 1 监听地址 2 主页目录 3 别名 4 目录访问的身份验证 5 https 6 MPM(under linux) * 配置文件中路径.文件名均不支持中文. <<<&l ...