当前位置： 移动技术网 > IT编程>开发语言>Jquery > 荐 jquery层次选择器

荐 jquery层次选择器

2020年07月14日  | 移动技术网IT编程  | 我要评论

jquery层次选择器

按照我个人的习惯，还是先放上总的内容，然后再开始一个一个攻克。

常用的几种(概述)：

1.派生选择器(后代元素选择器)
$("div span")

2.父子选择器(子元素选择器)
$("div>span")

3.兄弟选择器(相邻元素选择器)
$("div+span")

4.兄弟选择器
$("div~span")

5.并且选择器(过滤选择器)
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header

6.内容过滤选择器
:contains(内容)
:empty
:has
:parent

//TODO...
暂时知道就这些，如有其它常使用的，可以在评论区补充出来。

代码准备

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery层次选择器练习_爱猫狗的小郝</title>
  <script src="../src/jquery/js/jquery-1.8.3.min.js">
  </script>
</head>
<body>
  <div id="one" class="aaa">
    id=one，class=aaa的div
    <span>div id=one,class=aaa的span</span>
    <br />
    <div class="mini">class=mini</div>
  </div>
  <div id="two" class="aaa">
    id=two，class=aaa的div
    <span>div id=two，class=aaa的div的span</span>
    <br />
    <div class="mini">class=mini的div</div>
    <div class="mini">class=mini的div</div>
  </div>
  <div class="bbb">
    class=bbb的div
    <div class="mini">class=mini的div</div>
    <div class="mini">class=mini的div</div>
  </div>
  <span>爱猫狗的小郝</span>
  <span>——河南济源普通的追梦小伙</span>
</body>
</html>

在这里插入图片描述

1.派生选择器(后代元素选择器)

$("div span")
选取<div>里的所有<span>元素
//需求：把div里所有的span元素的字体颜色变为红色
   $(document).ready(function(){
     $("div span").css("color","red");
   });

在这里插入图片描述

2.父子选择器(子元素选择器)

$("div>span")
选取<div>元素下名为<span>的元素,不包括子元素的子元素。
//需求：<div>元素下名为<span>的元素，背景色为红色
 $(document).ready(function(){
     $("div>span").css("background","red");
 });

在这里插入图片描述

3.兄弟选择器(相邻元素选择器)

方法一：$("#two+div")
方法二：$("#two").next("div")
选取id为two标签之后的第一个<div>元素(注意：是之后，不是孩子节点。)
需求：选取id为two的下的第一个<div>元素，并设置背景色为红色
   $(document).ready(function(){
     $("#two+div").css("background","red");
   });
   //或者
   $(document).ready(function(){
     $("#two").next("div").css("background","red");
   });

4.兄弟选择器

方法一：$("#two~div")
方法二：$("#two").nextAll("div")
选取id为two的之后的第一个<div>元素(注意：是之后，不是孩子节点。)
需求：选取id为two的下的所有<div>元素，并设置背景色为红色
   $(document).ready(function(){
     $("#two~div").css("background","red");
   });
   //或者
   $(document).ready(function(){
     $("#two").nextAll("div").css("background","red");
   });
细节：

和next()/nextAll()方法相反的方法prev()/prevAll()

prev():取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll():查找当前元素之前所有的同辈元素。

  $(document).ready(function(){
     $("#two").prev("div").css("background","red");
   });
  $(document).ready(function(){
     $("#two").prevAll("div").css("background","red");
   });
//TODO...和next方法相似，不再详细阐述。

5.并且选择器(过滤选择器)

:first             匹配找到第一个元素
:last              匹配找到最后一个元素
:not(selector)     去除所有与给定选择器匹配的元素
:even              匹配所有索引值为偶数的元素，从0开始计数
:odd               匹配所有索引值为奇数的元素，从0开始计数   
:eq(index)         匹配一个给定索引的元素，从0开始计数
:gt(index)         匹配所有大于给定索引的元素，从0开始计数
:lt(index)         匹配所有小于给定索引的元素，从0开始计数
:header            匹配如h1,h2,h3之类的标题元素

为了更好的理解并且选择题，代码我们换一下，用下述代码讲解。这里用table来说，个人感觉ul,li这类的用的更多，不过都一样。

<body>
  <table border="1">
    <tr>
      <td>一行一列</td><td>一行二列</td>
    </tr>
    <tr>
      <td>二行一列</td><td>二行二列</td>
    </tr>
    <tr>
      <td>三行一列</td><td>三行二列</td>
    </tr>
    <tr>
      <td>四行一列</td><td>四行二列</td>
    </tr>
  </table>
  <span><b>爱猫狗的小郝</b>></span>
  <span><b>——河南济源普通的追梦小伙</b></span>
</body>
需求：把表格第一行的背景色更换为红色。
   $(document).ready(function(){
     $("tr:first").css("background","red");
   });

在这里插入图片描述

需求：把表格最后一行的背景色更换为红色。
   $(document).ready(function(){
     $("tr:last").css("background","red");
   });

在这里插入图片描述

需求：把表格第2行的背景色更换为红色
   $(document).ready(function(){
     $("tr:eq(1)").css("background","red");
   });

在这里插入图片描述

需求：把表达第2行之后的背景色更换为红色
   $(document).ready(function(){
     $("tr:gt(1)").css("background","red");
   });

在这里插入图片描述

细节：

其它没举例子的都差不多，看着字面解释自己尝试一下吧。

6.内容过滤选择器

:contains(内容)  包含内容选择器，获得节点内部必须通过标签包含指定的内容
:empty          获得空元素(内部没有任何元素/文本(空) )节点对象
:has            内部包含指定元素的选择器
:parent         寻找的节点必须作为父元素节点存在

为了更好的理解内容选择题，代码我们换一下，用下述代码讲解。

<body>
  <div>所谓信仰，即深信你所未见。</div>
  <div>这信仰之回报，即深见你所深信。</div>
  <div></div>
  <div>   </div>
  <div><span id="haosy">你好啊，读者。</span></div>
  <div><p>测试p节点是否为父元素节点</p></div>
  <span><b>爱猫狗的小郝</b>></span>
  <span><b>——河南济源普通的追梦小伙</b></span>
</body>

在这里插入图片描述

需求：将包含“信仰”两个字的div节点背景色改为红色。
   $(document).ready(function(){
     $("div:contains('信仰')").css("background","red");
   });

在这里插入图片描述

需求：
向空元素(内部没有任何元素(包括空格都没有))的div中添加一个“这是新增的，原本是空白”;
  $(document).ready(function(){
     $("div:empty").append("这是新增的，原本是空白");
   });

在这里插入图片描述

需求：寻找包含id="haosy"的节点对象，如果有，在控制台打印出来节点对象。
   $(document).ready(function(){
    console.log($("div:has(#haosy)"));
   });

在这里插入图片描述

需求：看下p节点是否为父节点，并打印在控制台。
   $(document).ready(function(){
    console.log($("p:parent"));
   });

在这里插入图片描述

结语

写文章是自己日常补缺的一种习惯，难免会有瑕疵，如发现问题，请及时指出。

本文地址：https://blog.csdn.net/qq_43518645/article/details/107324598

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网