今天要记录的是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. Rabin-Karp字符串查找算法

    1.简介 暴力字符串匹配(brute force string matching)是子串匹配算法中最基本的一种,它确实有自己的优点,比如它并不需要对文本(text)或模式串(pattern)进行预处理 ...

  2. 通过vmware 启动cloudera-quickstart-vm-5.10.0-0-vmware.zip镜像无法启动。

    解压cloudera-quickstart-vm-5.10.0-0-vmware.zip中找到cloudera-quickstart-vm-5.10.0-0-vmware.vmx文件打开注释点#msg ...

  3. 彻底搞清函数中的this指向

    近日阅读<javascript设计模式与开发实践> 书中的apply和call调用函数层出不穷,很多妙用: 函数中的this是根据调用方式来决定的 函数调用方式有4中 1.直接调用 a(. ...

  4. Unity 遮罩 点击panel以外的位置，panel关闭

    public Class Panel_ATMRechage : IPanel{ private Dictionary<string,UISprite>mSprites; } protect ...

  5. Java集合类从属关系

    Java的集合分为了四类:List Set Queue Map,每类都有不同的实现,有基于数组实现的,有基于链表实现的,有基于xx树实现的,不同的实现虽在功能上可以相互替代但都有各自的应用场景,如基于 ...

  6. Your data vis “Spidey-sense” & the need for a robust “utility belt”

    @theboysmithy did a great piece on coming up with an alternate view for a timeline for an FT piece. ...

  7. kafka 0.10.2 cetos6.5 集群部署

    安装 zookeeper http://www.cnblogs.com/xiaojf/p/6572351.html安装 scala http://www.cnblogs.com/xiaojf/p/65 ...

  8. 教你怎么把iconfont转换成png透明图片

    1.进入iconfont图标库,登陆.http://www.iconfont.cn/ 2.选择想要的图标加入购物车. 3.直接选中下载图标为png格式.

  9. 抓包工具 - HttpWatch

    HttpWatch是功能强大的网页数据分析工具,集成在IE工具栏,主要功能有网页摘要.cookies管理.缓存管理.消息头发送/接收,字符查询.POST数据.目录管理功能和报告输出.HttpWatch ...

  10. [原创]adb使用教程v1.0-----by-----使用logcat快速抓取android崩溃日志

    原文再续,书接上回:<使用logcat快速抓取android崩溃日志>中提到的工具包可以下载拉~ <使用logcat快速抓取android崩溃日志>:http://www.cn ...