jquery从零开始-2.2 结构选择器(一)

川长思鸟来 2023-07-08 02:54 76阅读 0赞

接上一节 [jquery从零开始-2.1 jQuery 选择器基础][jquery_-2.1 jQuery]

结构选择器就是根据 HTML 文档结构中节点之间的包含或并列关系决定匹配元素的一种方法。 jQuery 模仿 css 的关系过滤模式定义了 4 个关系选择器， 同时还根据包含关系，自定义了 4 个子元素选 择器。

**1、层级选择器**

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">名称</td> 
   <td style="vertical-align:top;">说明</td> 
   <td style="vertical-align:top;">举例</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>ancestor descendant</strong></td> 
   <td style="vertical-align:top;">使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.</td> 
   <td style="vertical-align:top;">$(".bgRed div") 选择CSS类为bgRed的元素中的所有&lt;div&gt;元素.</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>parent &gt; child</strong></td> 
   <td style="vertical-align:top;">选择parent的直接子节点child.&nbsp; child必须包含在parent中并且父类是parent元素.</td> 
   <td style="vertical-align:top;">$(".myList&gt;li") 选择CSS类为myList元素中的直接子节点&lt;li&gt;对象.</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>prev + next</strong></td> 
   <td style="vertical-align:top;">prev和next是两个同级别的元素. 选中在prev元素后面的next元素.</td> 
   <td style="vertical-align:top;">$("#hibiscus+img")选在id为hibiscus元素后面的img对象.</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>prev ~ siblings</strong></td> 
   <td style="vertical-align:top;">&nbsp;选择prev后面的根据siblings过滤的元素<br> 注:siblings是过滤器</td> 
   <td style="vertical-align:top;">$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素</td> 
  </tr> 
 </tbody> 
</table>

层级选择器能够根据元素之间的结构关系进行匹配操作，说白了就是老爹找儿子，只要属于父级下面的，不管是子代还是后代，都叫包含。怎么找呢，首先找到父级，接着空格相隔就行了，$(".parent children"),下面上案例。

<body>
    <div id="box">
        <div class="red">红盒子</div>
        <div class="blue red">蓝盒子</div>
        <div class="green red">绿盒子</div>
    </div>
    <script>
        $(function () {
            var div=$("#box .red")//找到父级下面的className叫red的元素
    
        })
    </script>
    </body>

在原生javascript里面，要想通过层级找到className叫red的元素首先要要找到它的父元素id=“box”的div，然后再通过父元素找到下面的.red,代码如下:

document .getElementById ("box").getElementsByClassName("red");

Jquery的包含选择器就做了封装，我们只需要以空格相隔就可以，类似的还有:

<body>
    <div id="box">
        <div class="red">
            <p class="p1">
                <span>我是span1</span>
                <span>我是span2</span>
            </p>
        </div>
        <div class="blue red">
            <p class="name">
                <input type="text">
            </p>
            <div class="d2">我是d2</div>
        </div>
        <div class="green red">绿盒子</div>
    </div>
    <script>
        $(function () {
            var div=$("#box .red")//找到.red
            var p1=$("#box .red .p1")//找到.p1
            var spans=$("#box .red>.p1 span")//.p1下面所有的span
            var span2=$("#box span + span")//我是span2
             var div2=$("#box .red ~ div")//.red后面所有的兄弟
        })
    </script>
    </body>

在层级选择器中，左右两个子选择器可以为任何形式的选择器，可以是基本选择器，也可以是复合 选择器，甚至是层级选择器。例如，$（”div div div＂）中可以有两种理解：”div div”表示子包含选择器，位 于左侧，作为父包含选择器的包含对象，而第三个”div＂表示被包含的对象，它是一个基本选择器：或者 ”div”表示基本选择器，位于左侧，作为父包含选择器的包含对象，而”div div”表示被包含的对象，它是 一个子包含选择器。再如，$（”div:eq(1） ～p”）中的（”div:eq(1）”是一个伪类选择器，它属于复合选择器，在 这里表示兄弟选择器中相邻的前一个选择器。

**2、子元素选择器**

子元素选择器就是通过当前匹配元素选择该元素包含的特定子元素。子元素选择器主要包括 4 种类型：

1.  **:ntb-cbild  匹配其父元素下的第 N个子或奇倘元素**
2.  **:first-child 匹配第一个子元素 （:first~择器只匹配一个元素， 而，:first-child 选择符将为每个父元素匹配一个子元素）**
3.  **:last-child 匹配最后一个子元素 :last 只匹配一个元素，而:last-child 选择符将为每个父元索匹配一个子元素**
4.  **:only-child 如果某个元萦是父元索中唯一的子元素， 那将会被匹配，如果父元素中含有其他元素，到ll将不会被匹配**
5.  **:eq(index）选择器只能够匹配一个元素，而:nth-child 能够为每一个父元素匹配子元素。:nth－child 是从 1 开始的，而:eq()是从 0 算起的。 **

下面表达式都是可以使用的。

:nth-child(even) //匹配偶数位元素
    :nth-child (odd) //匹配奇数位元素
    :nth-child(3n） //匹配第 3 个及其后面间隔 3 的每个元素
    :nth一child(2) //匹配第 2 个元素
    :nth一child (3n+l)//匹配第 1 个及其后面间隔 3 的每个元素
    :nth-child(3n+2) //匹配第 2 个及其后面间隔 3 的每个元素

上示例:

<body>
    <ul>
        <li>己所不欲，勿施子人。一一《论语》</li>
        <li>天行健， 君子以自强不息。 一一《周知》</li>
        <li>勿以恶小而为之，勿以善小而不为。 一一《三国志》</li>
        <li>君子成人之美，不成人之恶。 小人反是。一一《论语》</li>
    </ul>
    ·
    <script>
        $(function () {
            $("li:first-child") . css ("color","red");
            $("li:last-child") . css ("color","blue ");
            $("li:nth-child(l)") . css ("background","#ff6 ");
            $("li:nth-child(2n)") . css ("background","#6ff ");
        })
    </script>
    </body>

**3、定位过滤器**

定位过滤器主要是根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素。目前主要有10种。

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">名称</td> 
   <td style="vertical-align:top;">说明</td> 
   <td style="vertical-align:top;">举例</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:first</strong></td> 
   <td style="vertical-align:top;">匹配找到的第一个元素</td> 
   <td style="vertical-align:top;">查找表格的第一行:$("tr:first")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:last</strong></td> 
   <td style="vertical-align:top;">匹配找到的最后一个元素</td> 
   <td style="vertical-align:top;">查找表格的最后一行:$("tr:last")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:not(selector)</strong></td> 
   <td style="vertical-align:top;">去除所有与给定选择器匹配的元素</td> 
   <td style="vertical-align:top;">查找所有未选中的 input 元素: $("input:not(:checked)")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:even</strong></td> 
   <td style="vertical-align:top;">匹配所有索引值为偶数的元素，从 0 开始计数</td> 
   <td style="vertical-align:top;">查找表格的1、3、5...行:$("tr:even")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:odd</strong></td> 
   <td style="vertical-align:top;">匹配所有索引值为奇数的元素，从 0 开始计数</td> 
   <td style="vertical-align:top;">查找表格的2、4、6行:$("tr:odd")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:eq(index)</strong></td> 
   <td style="vertical-align:top;">匹配一个给定索引值的元素<br> 注:index从 0 开始计数</td> 
   <td style="vertical-align:top;">查找第二行:$("tr:eq(1)")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:gt(index)</strong></td> 
   <td style="vertical-align:top;">匹配所有大于给定索引值的元素<br> 注:index从 0 开始计数</td> 
   <td style="vertical-align:top;">查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:lt(index)</strong></td> 
   <td style="vertical-align:top;">选择结果集中索引小于 N 的 elements<br> 注:index从 0 开始计数</td> 
   <td style="vertical-align:top;">查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:header</strong></td> 
   <td style="vertical-align:top;">选择所有h1,h2,h3一类的header标签.</td> 
   <td style="vertical-align:top;">给页面内所有标题加上背景色: $(":header").css("background", "#EEE");</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"><strong>:animated</strong></td> 
   <td style="vertical-align:top;">匹配所有正在执行动画效果的元素</td> 
   <td style="vertical-align:top;">只有对不在执行动画效果的元素执行一个动画特效: <p>$("#run").click(function(){ <br> &nbsp; $("div:not(:animated)").animate({ left: "+=20" }, 1000);<br> });</p> </td> 
  </tr> 
 </tbody> 
</table>

在本示例中，分别借助定位过滤器，为表格中不同行设置不同的显示样式

<body>
    <table>
        <tr>
            <th>选择器</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>:first</td>
            <td>匹配找到的第一个元素。 例如， $("tr:first”)表示匹配表格的第一行</td>
        </tr>
        <tr>
            <td>:last</td>
            <td>匹配找到的最后一个元素。 例如， $("tr:last”)表示匹配表格的最后一行</td>
        </tr>
        <tr>
            <td>:not</td>
            <td>去除所有与给定选择器匹配的元索。注意，在jQuery 1 .3 中，已经支持复杂选择器了，如:not(div a）和:not(div,a). 例如，$("input:not(:checked)")可以匹配所有未选中的 input 元素</td>
        </tr>
        <tr>
            <td>:even</td>
            <td>匹配所有索引值为偶数的元素，从 0开始计数。 例如，$("tr:even”)可以匹配表格的 1、 3、 5 行（即索引值为 0、 2、 4、… )</td>
        </tr>
        <tr>
            <td>:odd</td>
            <td>匹配所有索引值为奇数的元素， 从 0开始计数。 例如，$("tr:odd”)可以匹配表格的 2、 4、 6 行 （即索引值 1 、 3、 5、…)</td>
        </tr>
        <tr>
            <td>:eq</td>
            <td>匹配一个给定索引值的元素，从 0 开始计数。 例如，$("tr:eq(0)”)可以匹配第 1 行表格行</td>
        </tr>
        <tr>
            <td>:gt</td>
            <td>匹配所有大于给定索引值的元素，从 0 开始计数。 例如，$(”tr:gt(0)”)可以匹配第 2 行及其后面行</td>
        </tr>
        <tr>
            <td>:lt</td>
            <td>匹配所有小于给定索引值的元素。 例如l. $("tr:lt(1)")可以匹配第1行</td>
        </tr>
        <tr>
            <td>:header</td>
            <td>匹配如h1 、 h2、 h3 之类的标题元素</td>
        </tr>
        <tr>
            <td>:animated</td>
            <td>匹配所有正在执行动画效果的元素</td>
        </tr>
    </table>
    <script>
        $(function () {
            $("tr:first") .css("color","red")//设置第 1 行字体为红色
            $("tr:eq(0)") . css("fontSize","20px");//设置第 1 行字体大小为 20 像素
            $("tr:last") .css("color","blue");//设置最后一行字体为蓝色
            $("tr:even") . css ("background","#ffd");//设置偶数行背景色
            $("tr:odd").css("background","#dff");//设置奇数行背景色
            $("tr:gt(3)").css("font-size","12px");//设置从第 5 行开始所有行的字体大小
            $ ("tr:lt(4)").css("font-size","12px");//设置从第 1～4 行字体大小
        })
    
    
    </script>
    </body>

**4、内容过滤器**

内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤。主要包括 4 种内容过滤器.

废话不多说，直接走案例。

<body>
    <div>
        <h2>标题</h2>
        <p>段落文本 l</p>
        <p><span>段落文本 2</span></p>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        $(function () {
            $("li:empty").text("空内容") //匹配空 li 元素
            $("div ul:parent").css("background", "#ffl") ;//匹配 div 包含 ul 元素中包含子元素
            $("h2:contains('标题')").css("color","red");//标题元素中包含“标题”文本内容的
            $(":has(span)").css("color","blue");//包含 span 元素的 p 元素
        })
    </script>
    </body>

**5、可见过滤器**

同上，直接走案例，一看就懂。在本示例中分别设置奇数位 p 和偶数位 p 的字体颜色，如果奇数位 p 元素被隐藏，则 通过 p:bidden 过滤器匹配它们，并把它们显示出来。

<body>
    <p>独在异乡为异客，</p>
    <p>每逢佳节倍思亲。</p>
    <p>遥知兄弟登高处，</p>
    <p>遍插茱萸少一人。</p>
    <script>
        $(function () {
            $("p:odd").hide();//隐藏奇数位 p 元素
            $("p:odd").css("color", "red");//设置奇数位p 元素的字体颜色为红色
            $("p:visible").css("color", "blue");//设置偶数位 p 元素的字体颜色为蓝色
            $("p:hidden").show();//显示奇数位 p 元素
        })
    </script>
    </body>

这章有点长，大师兄写完了才发现码字太多，保存不了， 我去年买了表。没保存成功，白写了，话不多说，分开吧。下一章见。

# **老铁，要不点个赞再走可好？么么哒** #

1、点个赞呗，可以让更多的人看到这篇文章，顺便激励下我。

2、老铁们，关注我的原创微信公众号「FUNS社区」，还可访问[FUNS在线社区http://www.htmlfuns.cn][FUNS_http_www.htmlfuns.cn]，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获，不信你打我。后台回复『学习资料』送你一份2020年最新技术资料（超2000G！）现在全部免费给你！包含各类技能的优质学习视频。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1][]

**作者简介**

作者：大家好，我是FUNS大师兄，工作至今，从一个小白成长为大厂的技术总监，一直想写点什么，种种原因不知什么时候开始，也不知道怎么下手。一路走来，见证了很多Programmer的大起大落，其实程序员这个行业，坚持到最后的才是真大神。我们身处在一个浮躁的社会，不仅爱情如此，连程序开发也是这样。大家都习惯了喜新厌旧，忘记了当初选择的初心。我觉得我是幸运的，当年带我的导师是阿里出来的，本应风光无限，可惜她热爱午后的斜阳，去开了一家咖啡店，听说后来经营不善未果。最好的时光错过了最好的机遇吧。

期间碰到过一些学弟找我，大家都很迷茫，后来我才发现，迷茫这个东西跟你年龄没什么关系，迷茫说到底没有安全感，我们的薪资、家庭、未来等等都是安全感的一部分。我在此也不是为了教导种种，只是分享自己的一路走来的坑，我一直相信一句话，我们所羡慕的生活背后都有我们吃不了的苦。其次是写点自己想写的代码，让自己开心一些吧！

> **转载说明：未获得授权，禁止转载**

[jquery_-2.1 jQuery]: https://blog.csdn.net/zd8693476/article/details/104473669
[FUNS_http_www.htmlfuns.cn]: http://www.htmlfuns.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225111127939.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200225114905261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70