jQuery基础笔记（2）

day54

筛选器

参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5

筛选器方法

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

举例：

<ul>
    <li id="l0">l0</li>
    <li>l1</li>
    <li>l2</li>
    <li id="l3">l3</li>
    <li>l4</li>
    <li>l5</li>
</ul>

实践：

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

找父标签

<!--父标签-->
<div id="d1">div-1
    <div id="d2">div-2
        <div id="d3">div-3
            <a href="">a标签</a>
        </div>
    </div>
</div>

实践：

parents()、parentsUntil()作用看注释可知。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

示例：

<!--兄弟和儿子-->

<div id="dd">
    <p>p0</p>
    <p>p1</p>
    <p id="p2">p2</p>
    <p>p3</p>
</div>

实践：

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

操作标签

样式操作

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

示例：

<div id="dd">
    <p>p0</p>
    <p>p1</p>
    <p id="p2">p2</p>
    <p>p3</p>
</div>

实践：

应用toggleClass()：、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式操作示例</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .c2 {
            background-color: green;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 找标签
    $("div.c1").click(function () {
        // console.log(this);  // this是DOM对象,转为jQuery对象才能使用jQuery方法
        $(this).toggleClass("c2"); // 有就删掉 没有就加上
    })
</script>
</body>
</html>

divEle2.onclick=function () { this.innerText="呵呵"; } divEle2是DOM对象。

应用：

展开点击的栏目

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单作业分解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="left-menu">
    <div class="menu-title">菜单一</div>
    <div class="menu-items">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
    <div class="menu-title">菜单二</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
    <div class="menu-title">菜单三</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 需求分析
    // 找到所有的.menu-title标签,绑定点击事件
        $(".menu-title").click(function () {
               // 点击事件具体要做的事儿
        // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
//            $(this).next().removeClass("hide");
            $(this).next().toggleClass("hide");
            // 2. 把其他的.menu-items隐藏,添加hide类
            $(this).next().siblings(".menu-items").addClass("hide"); //把其他都隐藏
        })


//    $(".menu-title").click(function () {
//        // 1. 找到所有的.menu-items, 隐藏
//        var $currMenuitem = $(this).next();
//        $(".menu-items").not($currMenuitem).addClass("hide");  // 所有的二级菜单都是隐藏的
//        // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
//        $(this).next().toggleClass("hide");
//    })

</script>
</body>
</html>

效果：

jQuery基础笔记（2）

筛选器方法

操作标签

样式操作

猜你喜欢