jQuery中的层次选择器

最新推荐文章于 2024-04-16 03:29:12 发布

CodePoorFish

最新推荐文章于 2024-04-16 03:29:12 发布

阅读量2.5k

点赞数 1

分类专栏：前端笔记文章标签： jquery javascript css

本文链接：https://blog.csdn.net/weixin_43350001/article/details/123147561

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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");
})

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

CodePoorFish

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的层次选择器

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"
复制链接

扫一扫