jQuery层次选择器（附有代码以及运行截图）

最新推荐文章于 2021-06-04 15:12:21 发布

GodGump

最新推荐文章于 2021-06-04 15:12:21 发布

阅读量183

点赞数

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/114108736

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

层次选择器字面意思：通过DOM元素之间的结构（层次关系）来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。
分享几个常见的层次选择器：

>（大于号）紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。
+（加号） 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。
~ （波浪线）任意距离兄弟关系 如$("div ~ p")表示选择div附近层的p节点。

注意：相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下.
举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h6>1</h6>
    <h6>2</h6>
    <h6>3</h6>
</div>
</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<script>
    var $divSon = $("div > h6");
    // alert( $divSon.length );

    for(var i = 0;i < $divSon.length;i++){
        alert( ( $divSon.get(i) ).innerHTML );
    }
</script>
</html>

运行结果：
在这里插入图片描述

GodGump

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery层次选择器（附有代码以及运行截图）

层次选择器字面意思：通过DOM元素之间的结构（层次关系）来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。分享几个常见的层次选择器：>（大于号）紧跟父子关系如$("div > p")表示选择div下的直接层是p的节点。+（加号）紧跟兄弟关系如$("div + p")表示选择div同层的左右相邻的p节点。~ （波浪线）任意距离兄弟关系如$("div ~ p")表示选择div附近层的p节点。注意：相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下.举个
复制链接

扫一扫

专栏目录