今天要记录的是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. ScheduledFuture和RunnableScheduledFuture详解

      ScheduledFuture java.util.concurrent 接口 ScheduledFuture<V> 类型参数:     V - 此 Future 返回的结果类型. 所 ...

  2. 学习spring前，先了解了解代理模式

    什么是代理模式 举个例子,我是一个包租公,我现在想卖房,但是我不想麻烦,每天被电话骚扰,所以这个时候我找了楼下一个中介,让他帮我代理这些事,那么他自然有租房的方法.以后如果有人想租房,直接找中介就行了 ...

  3. 学习笔记TF009:对数几率回归

    logistic函数,也称sigmoid函数,概率分布函数.给定特定输入,计算输出"success"的概率,对回题回答"Yes"的概率.接受单个输入.多维数据或 ...

  4. Day2-列表、字符串、字典、集合

    一.列表 定义列表:通过下标访问列表中的内容,从0开始 >>> name = ["zhang","wang","li",& ...

  5. My-Blog搭建过程：如何让一个网站从零到可以上线访问

    文章简述 5月13号的时候,上线了自己的个人博客网站:http://blog.hanshuai.xin,随后在平台上发布了一篇关于My-Blog的介绍博客<Docker+SpringBoot+M ...

  6. jenkins+ant+jmeter html报告文件作为附件发送（ant-jmeter支持javamail）

    前言:由于ant-jmeter目前的版本不支持javamail,也就是说发送邮件时只能借助jenkins自带的发送邮件插件来发送报告. 但是jenkins发送邮件支持发送邮件内容(且有价值.有营养的内 ...

  7. Building Particle Filters and Particle MCMC in NIMBLE

    This example shows how to construct and conduct inference on a state space model using particle filt ...

  8. Lock（一）认识v$LOCK

    v$lock列出了数据库当前拥有的锁及未完成的锁请求. Column Description ADDR 被锁对象的地址 KADDR 锁的地址 SID session id(这里特指正在锁定对象或请求去 ...

  9. Python爬知乎妹子都爱取啥名

    闲来无事上知乎,看到好多妹子,于是抓取一波. 有没有兴趣?? 目标网址https://www.zhihu.com/collection/78172986 抓取分析 爬取分析 使用pandas操作文件 ...

  10. javascript痛点之二作用域链

    1.执行环境(执行上下文) 先看段代码 var a = 10; var b = 20; function cc(){ var c = 30; alert("b="+b); } cc ...