• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

2.3 层次选择器

层次选择器,就是通过元素之间的层次关系来获取元素。层次选择器在实际开发中,也是相当重要的。常见的层次关系包括:父子、后代、兄弟、相邻。

在jQuery,层次选择器共有4种:

jQuery层次选择器
选择器 说明
$("M N") 后代选择器,选择M元素内部后代N元素(所有N元素)
$("M>N") 子代选择器,选择M元素内部子代N元素(所有第1级N元素)
$("M~N") 兄弟选择器,选择M元素后所有的同级N元素
$("M+N") 相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素)

注意以下2点:

(1)$("M+N")可以使用“$(M元素).next()”代替;

(2)$("M~N")可以使用“$(M元素).nextAll()”代替;

关于next()和nextAll()这两种方法,我们在“jQuery查找方法”这一章的“向后查找兄弟元素”中会详细分析,小伙伴们暂时不需要深入了解。

一、后代选择器

后代选择器,就是选择元素内部中所有的某一个元素,包括子元素和其他后代元素。

语法:

 
$("M N")

说明:

在后代选择器中,“M元素”和“N元素”之间用空格隔开,表示选中M元素内部后代N元素(所有N元素)。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#first p").css("color","red");
        })
    </script>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#first p")表示选取id为first的元素内部的所有p元素,因此不管是子元素,还是其他后代元素,统统都被选中。

二、子代选择器

子代选择器,就是选中元素内部的某一个子元素。子代选择器跟后代选择器很相似,但是却有着明显的区别:

(1)后代选择器,选取的是元素内部所有的元素(包括子元素);

(2)子代选择器,选取的是元素内部某一个子元素(只限子元素);

语法:

 
$("M>N")

说明:

在子代选择器中,“M元素”和“N元素”之间使用“>”选择符,表示选中M元素内部的子元素N。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#first>p").css("color","red");
        })
    </script>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#first>p")表示选中id为first的元素下的子元素p。在这里跟后代选择器的例子对比一下,就知道:子代选择器只选取子元素,不包括其他后代元素。

三、兄弟选择器

兄弟选择器,就是选中元素后面(不包括前面)的某一类兄弟元素。

语法:

 
$("M~N")

说明:

在兄弟选择器中,“M元素”和“N元素”之间使用“~”选择符,表示选中M元素后面的所有某一类兄弟元素N。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#second~p").css("color","red");
        })
    </script>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#second~p")表示选取id为second的元素后面的所有兄弟元素p。记住,兄弟选择器只选取后面的所有兄弟元素,不包括前面的所有兄弟元素。如果我们想要只选取前面所有的兄弟元素,可以使用prevAll()方法来选取。prevAll()方法我们在后面的“向前查找兄弟元素”这一节会详细给大家讲解。

四、相邻选择器

相邻选择器,就是选中元素后面(不包括前面)的某一个“相邻”的兄弟元素。相邻选择器跟兄弟选择器也非常相似,不过也有明显的区别:

(1)兄弟选择器选取元素后面“所有”的某一类元素;

(2)相邻选择器选取元素后面“相邻”的某一个元素;

语法:

 
$("M+N")

说明:

在相邻选择器中,“M元素”和“N元素”之间使用“+”选择符,表示选中M元素后面的某一个相邻的兄弟元素N。

举例1:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#second+p").css("color","red");
        })
    </script>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#second+p")表示选取id为second的元素后面的“相邻”的兄弟元素p。

举例2:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*去除所有元素默认的padding和margin*/
        *{padding:0;margin:0}
        /*去除列表项默认符号*/
        ul{list-style-type:none;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li+li").css("border-top", "2px solid red");
        })
    </script>
</head>
<body>
    <ul>
        <li>第1个元素</li>
        <li>第2个元素</li>
        <li>第3个元素</li>
        <li>第4个元素</li>
        <li>第5个元素</li>
        <li>第6个元素</li>
    </ul>
</body>
</html>

在浏览器预览效果如下:

分析:

$("li+li")使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素,所以对于最后一个li元素,它是没有下一个li元素可以选取的。$("li+li").css("border-top", "2px solid red")达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧,在实际开发中如果我们想要在两两元素之间实现什么效果,我们经常会用到这个技巧!大家请一定不要浪费这个强大的技巧!

例如我们绿叶学习网这一个底部信息栏就可以用这个技巧来实现,大家可以尝试自己实现一下:

总结

在这一节,其实我们主要讲解的是2组选择器:

  • (1)“后代选择器”和“子代选择器”;
  • (2)“兄弟选择器”和“相邻选择器”;

这样划分就一目了然了。大家可以根据这个划分,深入对比,更能加深理解和记忆。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部