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

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

1、层级选择器

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

层级选择器能够根据元素之间的结构关系进行匹配操作，说白了就是老爹找儿子，只要属于父级下面的，不管是子代还是后代，都叫包含。怎么找呢，首先找到父级，接着空格相隔就行了，$(".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")//找到.redvar p1=$("#box .red .p1")//找到.p1var spans=$("#box .red>.p1 span")//.p1下面所有的spanvar span2=$("#box span + span")//我是span2var 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 种类型：

:ntb-cbild 匹配其父元素下的第 N个子或奇倘元素
:first-child 匹配第一个子元素（:first~择器只匹配一个元素，而，:first-child 选择符将为每个父元素匹配一个子元素）
:last-child 匹配最后一个子元素 :last 只匹配一个元素，而:last-child 选择符将为每个父元索匹配一个子元素
:only-child 如果某个元萦是父元索中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，到ll将不会被匹配
: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种。

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

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

<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 种内容过滤器.

名称	说明	举例
:contains(text)	匹配包含给定文本的元素	查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty	匹配所有不包含子元素或者文本的空元素	查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector)	匹配含有选择器所匹配的元素的元素	给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent	匹配含有子元素或者文本的元素	查找所有含有子元素或者文本的 td 元素:$("td:parent")

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

<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、可见过滤器

名称

说明

举例

:hidden

匹配所有的不可见元素

注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.

查找所有不可见的 tr 元素:$("tr:hidden")

:visible

匹配所有的可见元素

查找所有可见的 tr 元素:$("tr:visible")

同上，直接走案例，一看就懂。在本示例中分别设置奇数位 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，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获，不信你打我。后台回复『学习资料』送你一份2020年最新技术资料（超2000G！）现在全部免费给你！包含各类技能的优质学习视频。

作者简介

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

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

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

jquery从零开始-2.2 结构选择器(一)相关推荐

jQuery（三）常规选择器
第三章.常规选择器 jQuery最核心的组成部分就是:选择器引擎.它继承了css的语法,可以对DOM元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery选择器实 ...
JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...
jQuery表单对象属性过滤选择器
jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"><input type="text" i ...
jQuery教程08-属性筛选选择器
jQuery选择器之属性筛选选择器属性选择器让你可以基于属性来定位一个元素.可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值 ...
jQuery教程07-内容筛选选择器
jQuery选择器之内容筛选选择器基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上内容过 ...
jQuery教程06-基本筛选选择器
jQuery选择器之基本筛选选择器很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CS ...
JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
JQuery中的九大选择器及其应用（中）
第四种:内容选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JQuery中的九大选择器及其应用（上）
第一种:基本选择器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

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

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

jquery从零开始-2.2 结构选择器(一)相关推荐

最新文章

热门文章