今天要记录的是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. selenium+python环境的搭建的自动化测试

    一.安装python: 我安装的是2.7.13版本的:可以在CMD下 运行python命令查看是否安装python,以及安装版本: 在https://www.python.org/getit/这个地址 ...

  2. （数字IC）低功耗设计入门（一）

    低功耗设计这个专题整理了好久,有一个月了,有图有证据: 然而最近一直有些烦心事.郁闷事,拖延了一下,虽然现在还是有点烦,但是还是先发表了吧.下面我们就来聊聊低功耗设计吧,由于文章比较长,因此我就不一次 ...

  3. （中级篇 NettyNIO编解码开发）第六章-编解码技术

    基于Java提供的对象输入/输出流ObjectlnputStream和ObjectOutputStream,可以直接把Java对象作为可存储的字节数组写入文件,也可以传输到网络上.对程序员来说,基于J ...

  4. 开涛spring3(6.6) - AOP 之 6.6 通知参数

    前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring AOP提供使用org.asp ...

  5. [原创]首次SDN比赛的记录-部分

    SDN大赛环境搭建和第一大题实现 由于物理设备不足的原因,故用虚拟机实现Floodlight控制器,openvswitch(以下简称:OVS)和mininet各种要用到的SDN环境的搭建.下面将给出它 ...

  6. TWaver 2D+GIS+3D的试用和在线Demo

    TWaver 2D for HTML5试用下载: http://download.servasoft.com/dl/twaver/sssyuwyeriUR/k/twaver-html5-5.4.7.z ...

  7. 教你一步搭建Flume分布式日志系统

    在前篇几十条业务线日志系统如何收集处理?中已经介绍了Flume的众多应用场景,那此篇中先介绍如何搭建单机版日志系统. 环境 CentOS7.0 Java1.8 下载 官网下载 http://flume ...

  8. python中的map、filter、reduce函数

    三个函数比较类似,都是应用于序列的内置函数.常见的序列包括list.tuple.str.   1.map函数 map函数会根据提供的函数对指定序列做映射. map函数的定义: map(function ...

  9. GPU编程-Thread Hierarchy（3）

    1. 如果处理的数据是二维的或者三维的,应该怎么办呢? 针对的,我们可以按照二维或者三维的方式,组织线程.老规矩,先代码.后解释 // Kernel definition __global__ voi ...

  10. Hadoop SSH+IP、SSH+别名 免密登录配置

    1.为什么要进行 SSH 无密码验证配置? Hadoop运行过程中需要管理远端Hadoop守护进程,在Hadoop启动以后,NameNode是通过SSH(Secure Shell)来启动和停止各个Da ...