JQuery 课时八：JQuery层级

卷毛崽

于 2021-07-04 20:30:18 发布

阅读量192

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42221321/article/details/118466546

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

JQuery 课时八：JQuery层级

1、Child Selector子元素选择器--直接子元素
2、descendant Selector 后代选择器-所有后代元素
3、next adjacent selector("prev" + "next")相邻选择器
4、Next Slibings Selectors 兄弟选择器

1、Child Selector子元素选择器–直接子元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <ul class="topnav">
        <li>li1</li>
        <li>li2
            <ul>
                <li>next l1</li>
                <li>next l2</li>
                <li>next l3</li>
            </ul>
        </li>
        <li>li3</li>
    </ul>
    <script>
    //给topnav的所有直接子元素添加边框
        $(function(){
            $(".topnav > li").css("border","1px solid #ccc");
        })
    </script>
</body>
</html>

效果：只有直接的子元素加了边框
在这里插入图片描述

2、descendant Selector 后代选择器-所有后代元素

在这里插入图片描述

3、next adjacent selector(“prev” + “next”)相邻选择器

只达到紧随的同级元素，且在元素后

在这里插入图片描述

<body>
    <ul class="topnav">
        <li>li1</li>
        <li>li2
            <ul>
                <li>next l1</li>
                <li>next l2</li>
                <li>next l3</li>
            </ul>
        </li>
        <li>li3</li>
    </ul>
    <script>

        $(function(){
            //筛选所有跟在li标签后的li标签，加样式
            $("li + li").css("border","1px solid pink");
        })

    </script>
</body>

效果：筛选所有跟在li标签后的li标签，加样式；第一个li不会被选择
在这里插入图片描述

4、Next Slibings Selectors 兄弟选择器

只达到紧随的同级元素
该达到跟随其的所有同级元素
在这里插入图片描述

<body>
    <span id="prev">span1</span>
    <div>div1</div>
    <div>div2</div>
    <div>div3
        <div>div4</div>
    </div>
    <script>

        $(function(){
            //查找id为prev的所有的div标签且互为兄弟关系
            $("#prev ~ div").css("border","1px solid pink");
        })

    </script>
</body>

效果:div4不属于同一个body父元素，不会加边框
在这里插入图片描述

卷毛崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 课时八：JQuery层级

JQuery 课时八：JQuery层级1、Child Selector子元素选择器--直接子元素2、descendant Selector 后代选择器-所有后代元素3、next adjacent selector("prev" + "next")相邻选择器4、Next Slibings Selectors 兄弟选择器1、Child Selector子元素选择器–直接子元素<!DOCTYPE html><html lang="en"><head> <
复制链接

扫一扫

专栏目录