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

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. sys.modules[__name__]的一个实例

    关于sys.modules[__name__]的用法,百度上阅读量比较多得一个帖子是:https://www.cnblogs.com/robinunix/p/8523601.html 对于里面提到的基 ...

  2. [UE4]宏

    宏和函数的区别 “展开”就是直接将宏代码直接复制粘贴替换到所有使用当前宏的地方.这个跟C++中的宏是一样的. 1.宏可以有多个入口,多个出口,函数只有一个入口,一个出口 2.宏的参数可以使用“Exec ...

  3. [UE4]在UI中获取玩家角色实例

  4. Spring+MyBatis实现数据库读写分离方案

    推荐第四种:https://github.com/shawntime/shawn-rwdb 方案1 通过MyBatis配置文件创建读写分离两个DataSource,每个SqlSessionFactor ...

  5. tf.nn.embedding_lookup

    tf.nn.embedding_lookup(params, ids, partition_strategy=’mod’, name=None, validate_indices=True, max_ ...

  6. 在线学习和在线凸优化（online learning and online convex optimization）—FTL算法5

    最自然的学习规则是使用任何在过去回合中损失最小的向量. 这与Consistent算法的精神相同,它在在线凸优化中通常被称为Follow-The-Leader,最小化累积损失. 对于任何t: 我们谈到了 ...

  7. python操作符与流程控制

    操作符: 算术运算: +   -   *  /  %  //   ** 逻辑运算:and or  not 身份运算: is     not is 不可变数据类型:数字  字符串  字典key 可变数据 ...

  8. PHP：引用Phpword导出数据到word文档

    下载地址https://www.cnwenhui.cn/html/show-597.html(其中有中文使用手册可以下载看看) 1.首先要下载Phpword类库,放在如下图目录下 2.调用方法 pub ...

  9. CS229 3.用Normal Equation拟合Liner Regression模型

    继续考虑Liner Regression的问题,把它写成如下的矩阵形式,然后即可得到θ的Normal Equation. Normal Equation: θ=(XTX)-1XTy 当X可逆时,(XT ...

  10. Android 6.0动态申请权限时，权限框闪一下就消失的问题；

    Android 蓝牙BLE开发需要位置权限,不然扫描不到周围的蓝牙信息: 位置权限申请: if (Build.VERSION.SDK_INT < 23){return;} //判断是否有权限 i ...