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

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. LeetCode 搜索二维矩阵 II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  2. 获取器操作都是针对数据而不是数据集的，要通过append()方法添加数据表不存在的字段

    获取器操作都是针对数据而不是数据集的,要通过append()方法添加数据表不存在的字段 public function getMembership(){ //加入会员s_id = 1 $busines ...

  3. web项目中添加MySQL驱动

    1.我这里采用yml文件来配置,yml有配置层次清晰,方便操作的好处: 将application.properties后缀改成yml,即配置文件变成application.yml 我的applicat ...

  4. python学习之----收集整个网站

    如果只是从一个页面跳到另一个页面,那么网络爬虫是非常无聊的.为了有效地使 用它们,在用爬虫的时候我们需要在页面上做些事情.让我们看看如何创建一个爬虫来收 集页面标题.正文的第一个段落,以及编辑页面的链 ...

  5. 《机器学习实战》ID3算法实现

    注释:之前从未接触过决策树,直接上手对着书看源码,有点难,确实有点难-- 本代码是基于ID3编写,之后的ID4.5和CART等还没学习到 一.决策树的原理 没有看网上原理,直接看源码懂得原理,下面是我 ...

  6. Python——列表深浅拷贝

    一.深浅拷贝 如果希望将列表复制一份,通过列表的内置方法copy就可以实现: s = [[1,2],3,4] s1 = s.copy() print(s) print(s1) 拷贝出的列表s1与原列表 ...

  7. mybatis foreach 循环 list(map)

    直接上代码: 整体需求就是: 1.分页对象里面有map map里面又有数组对象 2.分页对象里面有list list里面有map map里面有数组对象. public class Page { pri ...

  8. uva-10132-排序

    题意: 有很多文件,碎成了俩片,问,原来的文件是什么,如果有多个答案,任意一个答案就行,输入2N个字符串,拼接成N个文件. 直接排序,正确的答案一定是某个长度最短的和某个最长的连在一起. #inclu ...

  9. uva-10905-贪心

    题意:对于输入的数字,拼接成一个最大的数字 解法:把数字当成字符串处理,排序,输出即可 import java.io.FileInputStream; import java.io.FileNotFo ...

  10. SAP work process Memory allocate

    Memory allocation sequence to dialog work processes in SAP What is the memory allocation sequence to ...