JQuery层次选择器

最新推荐文章于 2024-01-14 11:54:30 发布

零怀念

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量419

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/linghuainian/article/details/81810011

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

以上四个分别是：

子元素选择器（直接父子关系）
后代元素选择器（后代所有，包括孙子关系）
相邻元素选择器（紧邻元素的下一个元素）
兄弟元素选择器（所有与元素同级的）

示例：运用这四个选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body >
<div id="test">
    <p id="p1"></p>
    <div>
        <p id="p2"></p>
    </div>
</div>
<!--<div></div>-->
<p id="p3"></p>
<p id="p4"></p>

</body>


<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
    //子元素选择器
    var ps1=$("#test>p");

    //后代（子孙）元素选择器
    var ps2=$("#test p")

    //相邻元素选择器
    var ps3=$("#test+p")

    //兄弟元素选择器
    var ps4=$("#test~p")

    console.log(ps1)
    console.log(ps2)
    console.log(ps3)
    console.log(ps4)
</script>

</html>

运行结果：