0
点赞
收藏
分享

微信扫一扫

jQuery中的层次选择器

少_游 2022-02-26 阅读 66

jQuery中的层次选择器

常见的层次关系包括:父子、后代、兄弟、相邻。

  • $(“M N”) 等价于 $(M).find(N);表示选择后代。
  • $(“M>N”) 等价于 $(M).children(N);表示选择子代。
  • $(“M~N”) 等价于 $(M).nextAll(N);表示在兄弟之中选择后面所有兄弟。
  • $(“M+N”) 等价于 $(M).next(N);表示在兄弟之中只选择后面那个兄弟。

HTML文件代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="first">
        <p>子元素</p>
        <p>子元素</p>
        <p>子元素</p>
        <div id="second">
            <p>div中的子元素</p>
            <p>div中的子元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

后代选择器

js代码:

$(function (){
    $("#first p").css("color", "skyblue");
})

效果:
在这里插入图片描述

子代选择器

js代码;

$(function (){
    $("#first").children("p").css("color", "skyblue");
})

效果:
在这里插入图片描述

兄弟选择器

js代码:

$(function (){
    $("#second~p").css("color", "skyblue");
})

效果:
在这里插入图片描述

相邻选择器

js代码:

$(function (){
    $("#second+p").css("color", "skyblue");
})

效果:
在这里插入图片描述

我们改一下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jQuery/jQuery3.6.0-min.js"></script>
    <script src="./test04.js"></script>
</head>
<body>
    <p>子元素</p>
    <p>子元素</p>
    <p>子元素</p>
    <div id="second">
        <p>div中的子元素</p>
        <p>div中的子元素</p>
    </div>
    <p>子元素</p>
    <p>子元素</p>
</body>
</html>
$(function (){
    $("p+p").css("color", "skyblue");
})

效果:
在这里插入图片描述

举报

相关推荐

0 条评论