jQuery链式选择器方法-导航

利用vs新建一个空白web项目，

再用nuget安装jQuery 1.x最新版，目前是 jQuery 1.12.4

新建一个html页面

再将jquery.js拖进新建的页面的头部

最后的html页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8"/>
    <style>
        .current {
            background-color: red;
        }
    </style>
    <script src="Scripts/jquery-1.12.4.min.js"></script>
</head>
<body>
    <h1>功能：导航</h1>
<p>
    描述：点击分类展开子类，同时收起其它分类，并高亮当前点击的分类
</p>

<div class="box">
    <ul class="menu">
        <li class="level1" id="第一个分类的li">
            <a href="#none">衬衫</a>
            <ul class="level2" id="第一个分类的子类ul">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1" id="第二个分类li">
            <a href="#none">卫衣</a>
            <ul class="level2" id="第二个分类的子类ul">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1" id="第三个分类的li">
            <a href="#none">裤子</a>
            <ul class="level2" id="第三个分类的子类ul">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
    //在这里写js代码
    $(".level1>a").click(function() {
        $(this).addClass("current") //给被点击的对象(a)加个样式
            .next()                 //a下面的ul
            .show()                 //把ul显示出来
            .parent()               //得到level1 第一个li
            .siblings()             //得到level1 的地2个和第三个li
            .children("a")          // 第二个和第三个li下的a，就是卫衣&裤子
            .removeClass("current") //移除它们的选中样式
            .next()                 // 得到level1 下的第二个和第三个ul
            .hide();                // 隐藏他们

    });
</script>

</body>
</html>

时间： 2024-08-09 19:50:44

jQuery链式选择器方法-导航的相关文章

jQuery链式操作

讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时候会这样去写: $("div").css("background","#eee") $("div").text("关注前端,关注用户体验-冀"); 这重复的去获取DIV这个节点非常影响性能,这时你可能会想到这样

jQuery链式语法演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

jQuery链式操作如何返回上一级DOM

有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather").show().find("a").addClass("now").end().addClass("highLight") 此段代码表示由ID为divFather往下取得了a标签加上now类之后,再返回到divFather就行添加hight

jQuery链式操作[转]

用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide(); }); 1.jQuery的链式操作

jQuery——链式编程与隐式迭代

链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

[jQuery]jQuery链式编程(六)

链式编程节约代码量 <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(fun

实现函数，类似jQuery链式调用.

1 var origin = [ 2 {id:1,title:'title1'}, 3 {id:2,title:'abcd'}, 4 {id:3,title:'title2'}, 5 {id:4,title:'efg'} 6 ]; 7 8 var find = function(data){ 9 // your code here 10 } 11 12 var result = find(origin).where({'title':/\d$/}).order('id','desc'); //d

JQuery链式操作简单的菜单列表

看到这个简单的菜单demo,也是为了再看看JQuery对DOM的操作,一直都记不牢,特别是siblings()这个总是想不起来. 这次再过一遍JQuery,不管简单的还是复杂的demo 还是坚持练习一遍吧!只为记录,如果同时能给你提供帮助,这样最好! <style> .wrap{ width: 100%; } .inner{ width: 62.5%; margin: auto; padding: 50px; border:1px solid #ccc; box-sizing:border-b

jquery链式语法

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .panle { padding: 60px; background-color: red; color: #fff; font-size: 50px;