今天要记录的是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. adesk上架实施--VDC详细配置（深信服论坛转）

    1.建立独享桌面资源   1.1通过https://VDCIP:4430登录控制台,VDI设置-->资源管理-->新建独享桌面资源 1.2点击新建,独享桌面资源后显示如下界面 配置完后,往 ...

  2. Ubuntu设置终端相对短路径

    这个设置相对实际上是比较简单的.在自己的家目录打开.bashrc 找到PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$' 只需要将w修改为大写W保存, ...

  3. Spark操作HBase问题：java.io.IOException: Non-increasing Bloom keys

    1 问题描述 在使用Spark BulkLoad数据到HBase时遇到以下问题: 17/05/19 14:47:26 WARN scheduler.TaskSetManager: Lost task ...

  4. 使用windows桌面ftp上传文件到linux服务器

    首先在linux服务器上安装ftp [root@host2 test]#yum -y install ftp vsftpd [root@host2 test]#service vsftpd start ...

  5. 细说C#中的系列化与反系列化的基本原理和过程

    虽然我们平时都使用第三方库来进行系列化和反系列化,用起来也很方便,但至少得明白系列化与反系列化的基本原理. 注意:从.NET Framework 2.0 开始,系列化格式化器类SoapFormatte ...

  6. Linux服务器的远程IP限制

    系统环境: Linux-centOS+ubuntu 操作: 编辑允许通过IP 路径:vim /etc/hosts.allow sshd:192.168.1.1 编辑禁止通过IP 路径:vim /etc ...

  7. 【面向对象设计原则】之里氏替换原则（LSP）

    里氏代换原则由2008年图灵奖得主.美国第一位计算机科学女博士Barbara Liskov教授和卡内基·梅隆大学Jeannette Wing 教授于1994年提出,所以使用的是这位女博士的性命名的一个 ...

  8. 关于STM32空闲中断

    有一次做一个东西,为了尽量不占用CPU的处理数据时间,所以就使用DMA接收串口的数据,但是呢问题来了.,,,,,怎么样才能确定接收到了一条完整的数据了,,我们都知道只要打开DMA 那家伙就不停的把接收 ...

  9. [asp.net mvc 奇淫巧技] 03 - 枚举特性扩展解决枚举命名问题和支持HtmlHelper

    一.需求 我们在开发中经常会遇到一些枚举,而且这些枚举类型可能会在表单中的下拉中,或者单选按钮中会用到等. 这样用是没问题的,但是用过的人都知道一个问题,就是枚举的命名问题,当然有很多人枚举直接中文命 ...

  10. eclipse maven项目中使用tomcat插件部署项目

    maven的tomcat插件部署web项目,我简单认为分两种,一种是部署到内置tomcat,另一种是部署到安装的tomcat. 第一种部署,默认是部署在内置tomcat的8080端口,如果不需要改端口 ...