jQuery选择器 之 层次选择器

于 2024-09-05 19:36:35 发布
阅读量571 收藏 5
点赞数 9
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141937479
版权

语法

https://api.jquery.com/category/selectors/hierarchy-selectors/

  • 获得A元素内部的所有的B元素：$('A B') — 后代选择器（包含子孙）
  • 获得A元素下面的所有的B子元素：$('A > B') — 只有儿子，没有孙子
  • 获得A元素同级下一个B元素：$('A + B') — 下一个兄弟
  • 获得A元素同级所有后面B元素：$('A ~ B') — 后边的所有兄弟
  • 获得A元素的同级B元素：$('A').siblings('B') — 获取所有的兄弟（包含前面的和后面的）

示例

后代选择器（包含子孙）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，改变<body>内所有<div>的背景色为红色"><br><br>
  <div id="one" style="width: 150px;height: 150px; background-color: #979ccd;">id为one</div>
  <div id="two" style="width: 150px; height: 150px; background-color: skyblue;">
    id为two
    <div class="mini" style="width: 50px;height: 50px;background-color: blueviolet;">class为mini</div>
  </div>
  <span style="display: inline-block; width: 150px;height: 150px;background-color: purple;">span</span>

  <script>
    $('#b1').click(function () {
      $('body div').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击按钮：
在这里插入图片描述

儿子选择器，没有孙子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，改变<body>内的子<div>的背景色为红色"><br><br>
  <div id="one" style="width: 150px;height: 150px; background-color: #979ccd;">id为one</div>
  <div id="two" style="width: 150px; height: 150px; background-color: skyblue;">
    id为two
    <div class="mini" style="width: 50px;height: 50px;background-color: blueviolet;">class为mini</div>
  </div>
  <span style="display: inline-block; width: 150px;height: 150px;background-color: purple;">span</span>

  <script>
    $('#b1').click(function () {
      $('body > div').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击按钮：
在这里插入图片描述

下一个兄弟

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #one {
      float: left;
      width: 150px;
      height: 150px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 150px;
      height: 150px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 150px;
      height: 150px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，改变id为one的下一个<div>的背景色为红色"><br><br>
  <div id="one">id为one</div>
  <div id="two">id为two
    <div class="mini">class为mini</div>
  </div>
  <div class="one">class是one
    <div class="mini">class是mini</div>
    <div class="mini">class是mini</div>
  </div>
  <div class="one">class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('#one + div').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击按钮：
在这里插入图片描述

后边的所有兄弟

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #one {
      float: left;
      width: 150px;
      height: 150px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 150px;
      height: 150px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 150px;
      height: 150px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，改变id为two的元素后面的所有兄弟<div>元素的背景色为红色"><br><br>
  <div id="one">id为one</div>
  <div id="two">id为two
    <div class="mini">class为mini</div>
  </div>
  <div class="one">class是one
    <div class="mini">class是mini</div>
    <div class="mini">class是mini</div>
  </div>
  <div class="one">class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('#two ~ div').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

获取所有的兄弟（包含前面的和后面的）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #one {
      float: left;
      width: 150px;
      height: 150px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 150px;
      height: 150px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 150px;
      height: 150px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，改变id为two的元素所有<div>兄弟元素的背景色为红色"><br><br>
  <div id="one">id为one</div>
  <div id="two">id为two
    <div class="mini">class为mini</div>
  </div>
  <div class="one">class是one
    <div class="mini">class是mini</div>
    <div class="mini">class是mini</div>
  </div>
  <div class="one">class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('#two').siblings('div').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

jQuery多级联动选择器
06-01
一款多级联动选择器，可自定义层级
基于jQuery的三层级联选择器
06-01
基于jQuery的三层级联选择器，左右两栏布局，点击空白位置可关闭
jQuery中的层次选择器
weixin_43350001的博客
02-26 2565
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"
jquery的层次选择器
qq_28596151的博客
05-16 287
1、层次选择器    1.1、后代选择器：$("s h")  s和h之间有一个空格    1.2、儿子选择器：$("s&gt;h")  s和h之间有一个&gt;    1.3、相邻兄弟选择器：$("prev + next")        该选择器会匹配两次，第一次匹配prev,第二次是第一次匹配到的元素后面同辈中的第一个元素的结果集     1.4、普通兄弟选择器：$("prev ~ sibli...
js进阶 10-5 jquery中的层级选择器有哪些
weixin_33701294的博客
06-13 121
js进阶 10-5 jquery中的层级选择器有哪些 一、总结 一句话总结： 1、jquery中的层级选择器有哪些？ 四种，后代，子代，兄弟，相邻兄弟 2、如何区别jquery中的层级选择器？ 记住这四个符号：空格 大于号 波浪线 加号     二、js进阶 10-5 jquery中的层级选择器有哪些 1、相关知识点 层级选择器 层次选择器,就是能过元素之间的层次关系来获取...
jQuery 之 层次选择器
z_x_Qiang的博客
12-31 322
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;06_层次选择器&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;
jQuery选择器 层次选择器
妖怪的博客
02-16 469
1.$("ancestor descendant"); 选取ancestor(先祖)里的所有descendant(后代)元素; 集合; $("div span")选取<div>里的所有<span>元素 2.$("parent>child") ; 选取parent元素下child(子)元素,而1中选择的是后代元素 集合; $("div>span")选取<div>下名字为<span>的子元素 3.$("prev + next")
jQuery选择器之层次选择器用法实例分析
12-29
本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考，具体如下： 前面一篇介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery选择器之基本选择器与层次选择器
10-24
jQuery选择器是jQuery库中的核心功能之一，它用于在文档对象模型（DOM）中找到指定的HTML元素。本文主要探讨了jQuery中的基本选择器和层次选择器，这两种选择器是进行DOM操作的基础。 **基本选择器** 基本选择器是...
jQuery基本选择器和层次选择器学习使用
10-20
在Web开发中，使用...此外，通过示例代码的学习，开发者可以更好地掌握jQuery选择器的用法，并将其应用到自己的项目中去。希望这些知识能够对大家在学习和工作中有所帮助，并希望大家能够继续支持相关的学习资源。
jQuery层次选择器选择元素使用介绍
12-09
其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
jQuery层次选择器
段琳琳
04-17 4515
.imgclass     {         width:100px; height:100px;         }         div         {             width:250px; height:250px; background-color:#eee; border:solid 2px blue;             }
jquery常用的选择器
农码精神
04-01 157
jquery常用的选择器 $( "parent &gt; child" )子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。$("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等$("prev + next")相邻兄弟选择器：...
jQuery的层次选择器
小时
08-14 527
Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px
jQuery入门之层次选择器实例简析
10-23
在jQuery选择器中，层次选择器是非常重要的一类，它包括了用于匹配特定父子或祖先后代关系的元素的选择器。本文将详细解析jQuery层次选择器中的"ancestor descendant"和"parent>child"选择器之间的区别，并通过实例...
jQuery选择器之基本过滤选择器用法实例分析
12-02
本文实例讲述了jQuery选择器之基本过滤选择器用法。分享给大家供大家参考，具体如下： 前面一篇介绍了层次选择器，今天我们学习一下jQuery的另一种选择器：基本过滤选择器。过滤选择器可以过滤掉自己不想要的东西，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值