jQuery层级选择器理解

最新推荐文章于 2022-04-04 08:27:56 发布

EUGL

最新推荐文章于 2022-04-04 08:27:56 发布

阅读量225

点赞数

分类专栏： jQuery 文章标签： jquery层级选择器

本文链接：https://blog.csdn.net/qq_19269283/article/details/95249387

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

层级选择器能够根据元素之间的结构关系进行匹配操作，主要包括“包含选择器”，“子选择器”，“相邻选择器”，“兄弟选择器”

选择器	说明
包含选择器（ancestor descendant）	在给定的祖先元素下匹配所有的后代元素。ancestor表示任何有效的选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如$("form input")可以匹配表单下所有的input元素
子选择器（parent > child）	在给定的父元素下匹配所有的子元素。parent表示任何有效的选择器，child表示以匹配元素的选择器，并且它是第一个选择器的子元素。例如$("form > input ")可以匹配表单下所有的子级input元素
相邻选择器（prev +next）	匹配所有紧接在prev元素后的next元素。prev表示任何有效的选择器，next表示一个有效原则器并且紧接着第一个选择器。例如$("label input")可以匹配所有跟在label后面的input元素
兄弟选择器（prev ~ siblings）	匹配prev元素之后的sibligs元素。prev表示任何有效的选择器，siblings表示一个选择器，并且它作为第一个选择器的同辈。例如$("form ~ input ")可以匹配到所有与表单同辈的input元素

例子：包含选择器代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>包含选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"> </script>
    <script type="text/javascript">
        $(function(){
            $("form input").css({"border":"1px solid red","background":"green",});
        })
    </script>
</head>
<body>
<form>
    <!--<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
    <fieldset>
        <label>
            包含的子文本框
            <input />
        </label>
        <fieldset>
            <label>
                包含的孙文本框
                <input />
            </label>
        </fieldset>
    </fieldset>
</form>
<label>
    非包含的文本框
    <input />
</label>
</body>
</html>

例子：子选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子选择器</title>
        <style>
            img
            {
                height:200px;
            }
        </style>
    </head>
    <body>
        <div>
            <span>
                <img src="image/0001.jpg"/>
            </span>
            <img src="image/0002.jpg"/>
        </div>
        <img src="image/0003.jpg"/>
    </body>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("div > img").css("border","5px solid red");
        })
    </script>
</html>

例子：相邻选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻选择器匹配</title>
    <style>
        img
        {
            height:200px;
        }
    </style>
</head>
<body>
    <div>
        <span>
            <img src="image/0001.jpg"/>
        </span>
        <img src="image/0002.jpg"/>
    </div>
    <img src="image/0003.jpg"/>
    <img src="image/0004.jpg"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("div + img").css("border","5px solid red");
    })
</script>
</html>

例子：兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        img
        {
            height:200px;
        }
    </style>
</head>
<body>
    <div>
        <span>
            <img src="image/0001.jpg" />
        </span>
        <img src="image/0002.jpg"/>
    </div>
    <img src="image/0003.jpg"/>
    <img src="image/0004.jpg"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("div ~ img").css("border","5px solid red");
    })
</script>
</html>

例子：层级选择器综合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器控制HTML文档各级元素</title>
</head>
<body>
    <div>一级div元素
        <div>二级div元素
            <div>三级div元素</div>
            <p>段落文本11</p>
            <p>段落文本12</p>
        </div>
        <p>段落文本21</p>
        <p>段落文本22</p>
    </div>
    <p>段落文本31</p>
    <p>段落文本32</p>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("div").css("border","1px solid red");//控制文档中所有的div元素
        $("div > div").css("background","yellow");//控制div元素包含的div子元素，实际上它与div包含选择器所匹配的元素是相同的
        $("div div ").css("border","10px solid green");//控制最外层div元素包含的所有div元素
        $("div div div").css("background","blue");//控制第三层及其以内的div元素
        $("div + p").css("margin","2em");//控制div相邻的p元素
        $("div:eq(1) ~ p").css("background","#ccc");//控制div后面并列的所有p元素
    })
</script>
</html>