今天要记录的是jq的一些简单操作。项目的需求是做一个导航栏，单机不同的商品名称链接，显示相应的内容。用js来写的话相对代码量要多一些，选择jqrey一行则可以搞定，下面呢是我的代码和效果图

这个是初始化点击后

首先是我们的布局部分，这里呢我直接把我的代码写进来，样式可能有点抽象

<style>
        .level1{
            list-style: none;
            line-height: 30px;
            width: 100px;
            cursor: pointer;
            border-top: none;
        }

        .level2{
            list-style: none;
            line-height: 20px;
            display: none;
            width: 100px;
        }
        .level2 li{
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="menu">
        <li class="level1">
            <a>衬衫</a>
            <ul class="level2">
                <li><a>短袖衬衫</a></li>
                <li><a>长袖衬衫</a></li>
                <li><a>无袖T袖</a></li>
                <li><a>长袖T袖</a></li>
            </ul>
        </li>
        <li class="level1">
            <a>卫衣</a>
            <ul class="level2">
                <li><a>开襟卫衣</a></li>
                <li><a>套头卫衣</a></li>
                <li><a>运动卫衣</a></li>
                <li><a>童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a>裤子</a>
            <ul class="level2">
                <li><a>短裤</a></li>
                <li><a>长裤裤</a></li>
                <li><a>牛仔裤</a></li>
                <li><a>休闲裤</a></li>
            </ul>
        </li>
    </ul>

</div>

接下来进入我们的主体部分了

<script>

// jq的选择器是非常强大，不像js那样的 document.getElementsByClassName去选择我们要操作的元素，而是$(" "）去选择

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

　　$(this).addClass("current").next().show().parent().siblings(). children( "a ").removeClass("current").next().hide();

　　　　return flase

})   //这样我们的一个效果就出来了

这段代码的作用是：当我点击a元素的时候（它是level的子元素），给其添加一个class ：current，然后紧邻其后的其他元素显示出来，同时将他的父辈元素内部的子元素<a>

都去掉一个名为current 的class，并且将紧邻他们后面的其他元素都隐藏起来   这也就是jq的链式操作  一行代码就能搞定

虽然做到了行为和内容的分离，不过jq也应该保持良好的层次结构和规范性，于是我又将代码改了一下，方便阅读和维护

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

　　$(this).addClass("current")

.　　　　  next().show().parent()

.siblings(). children( "a ")

.removeClass("current")

.next().hide();

　　　　

return flase

})

</script>

这样我们的一个建议导航菜单就完成了，怎么样   jq很强大吧

jQery的链式操作和商城简易导航栏的更多相关文章

  1. 用php实现一个简单的链式操作

    最近在读<php核心技术与最佳实践>这本书,书中第一章提到用__call()方法可以实现一个简单的字符串链式操作,比如,下面这个过滤字符串然后再求长度的操作,一般要这么写: strlen( ...

  2. PHP中的__toString方法(实现JS里的链式操作)

    _toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...

  3. jQuery链式操作[转]

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

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

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

  5. php类自动装载、链式操作、魔术方法

    1.自动装载实例 目录下有3个文件:index.php load.php tests文件夹 tests文件夹里有 test1.php <?php namespace Tests; class T ...

  6. PHP 设计模式 笔记与总结（4）PHP 链式操作的实现

    PHP 链式操作的实现 $db->where()->limit()->order(); 在 Common 下创建 Database.php. 链式操作最核心的地方在于:在方法的最后 ...

  7. PHP 链式操作

    所谓链式操作最简单的理解就是 操作完毕之后再返回对象$this 想必大家工作中基本都快用烂了得东西. 下面就是一个链式操作MYSQL数据库类. 最常见的链式操作 每一个方法操作之后,返回一个对象,直到 ...

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

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

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

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

随机推荐

  1. 单片机IAP学习

    1.IAP是什么--简介 IAP是In Application Programming的首字母缩写,IAP是用户自己的程序在运行过程中对User Flash的部分区域进行烧写,目的是为了在产品发布后可 ...

  2. Springmvc+mybatis+restful+bootstrap框架整合

    框架整合: Springmvc + Mybatis + Shiro(权限) + REST(服务) + WebService(服务) + JMS(消息) + Lucene(搜搜引擎) + Quartz( ...

  3. 《安卓网络编程》之第一篇 java环境下模拟客户端、服务器端

    1.Socket简介 在网络上的两个程序通过一个双向的通信连接实现数据的交换,这个双向链路的一端称为一个Socket.Socket通常用来实现客户方和服务方的连接.Socket是TCP/IP协议的一个 ...

  4. CodeBlocks

  5. 使用redis做mybaties的二级缓存(2)-Mybatis 二级缓存小心使用

    Mybatis默认对二级缓存是关闭的,一级缓存默认开启: 下面就说说为什么使用二级缓存需要注意: 二级缓存是建立在同一个namespace下的,如果对表的操作查询可能有多个namespace,那么得到 ...

  6. SpringMVC 3.2集成Spring Security 3.2

    参考:http://www.cnblogs.com/Beyond-bit/p/springmvc_and_springsecurity.html SpringMVC 3.2集成Spring Secur ...

  7. 卫星导航低噪声放大器芯片（LNA）-AT2659

    AT2659 是一款专门针对中国 BDS(北斗卫星导航系统),美国的 GPS,俄罗斯的 GLONASS 和欧盟的 GALILEO 导航系统应用而设计的高增益.低噪声系数射频放大器.  AT2659 芯 ...

  8. SmartCoder每日站立会议09

    站立会议内容 今天约了在一起编程,详细确定各个页面以及消息的添加.发送等一些小的细节. 1.站立会议照片:      2.任务展板 2.燃尽图

  9. zabbix监控Elasticsearch集群

    本节以 zabbix 为例,介绍如何使用监控系统完成 Elasticsearch 的监控报警. github 上有好几个版本的 ESZabbix 仓库,都源自 Elastic 公司员工 unterge ...

  10. VR全景：vr元年过后，这些企业如何发动“vr+”应用引擎?

    2016年,VR可谓是四处衍生.从如痴如迷的游戏行业到喜闻乐见的影视行业,再到医疗.军事.房地产,随便呼出一个"+",VR便能左右逢源,VR+各行各业,俨然成为一种标配.最近,Ma ...