jQuery系列 第四章 jQuery框架的选择器
Posted 文顶顶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery系列 第四章 jQuery框架的选择器相关的知识，希望对你有一定的参考价值。
第四章 jQuery框架的选择器
4.1 jQuery选择器说明
jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择，而且不必担心浏览器的兼容性，写法更加简洁。
jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。
优点：相对于直接使用 javascript 获取页面元素和处理业务逻辑相比，使用jQuery 选择器来进行操作代码更简单且拥有完善的代码检测机制。
jQuery 选择器根据获取页面中元素的不同，可以划分为四大类 :基本选择器、层级选择器、筛选选择器和表单选择器。
4.2 基本选择器
顾名思义，基本选择器是jQuery中用的最多， 使用最频繁的选择器，通过基本选择器我们可以实现大多数页面元素的选择。基本选择器主要有：ID选择器、类选择器、标签选择器、并集选择器和通配符选择器。
| 选择器 | 语法 | 功能 | 参考示例 |
|---|---|---|---|
| ID选择器 | #id | 根据给定的ID匹配一个元素 | $(“#divID”) |
| 类选择器 | .class | 根据给定的类名匹配所有的元素 | $(“.box”) |
| 标签选择器 | element | 根据给定的元素名匹配所有的元素 | $(“div”) |
| 通配符选择器 | * | 匹配所有的元素 | $(“*”) |
| 并集选择器 | #id,.class | 将每个选择器匹配到的元素合并在一起后返回 | $(“#divID,.box”) |
基本选择器代码示例
1 <body> 2 <div id="demo">我是id为demo的div标签</div> 3 <div class="box1">我是class为box1的div标签</div> 4 <div class="box1">我是class为box1的div标签</div> 5 <div class="box2">我是class为box2的div标签</div> 6 <div class="box2">我是class为box2的div标签</div> 7 <p>我是p标签</p> 8 <script> 9 $(function () { 10 //基本选择器: 11 //(1) ID选择器 $("#ID"); 12 //(2) 类选择器 $(".类"); 13 //(3) 标签选择器 $("标签名"); 14 //(4) 并集选择器 $("选择器,选择器") 15 //(5) 通配符 $("*") 16 17 //ID选择器:获取页面中id为demo的标签,设置背景颜色为红色 18 $("#demo").css("background","red"); 19 //类选择器:获取页面中所有class为box1的标签,并设置背景颜色 20 $(".box1").css("background","green"); 21 //类选择器:获取页面中所有class为box2的标签,并设置背景颜色 22 $(".box2").css("background","yellow"); 23 //标签选择器:获取页面中所有的p标签 24 $("p").css("background","red"); 25 //并集选择器:获取页面中id为demo的标签以及class为box2的所有标签 26 $("#demo,.box2").css("background","green"); 27 //通配符选择器:获取页面中所有的标签(包括html),设置背景颜色 28 $("*").css("background","green"); 29 }) 30 </script>
4.3 层级选择器
层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、直接后代、下一个相邻兄弟和后面所有兄弟元素的关系，通过其中某类关系可以方便快捷地定位元素。
| 选择器 | 语法 | 功能 | 参考示例 |
|---|---|---|---|
| 后代选择器 | parent child | 根据祖先元素匹配所有的后代元素 | $(“div p”) |
| 直接后代选择器 | parent > child | 根据父元素匹配所有的子元素 | $(“div > .box”) |
| 下一个相邻兄弟 | prev + next | 匹配所有紧接在prev元素后的相邻元素 | $(“#demoID + div”) |
| 后面所有兄弟 | prev ~ siblings | 匹配 prev 元素之后的所有兄弟元素 | $(“#demoID ~ div”) |
说明： 后代选择器获取的是所有的后代标签（层次关系是祖先与后代），而直接后代仅仅获取指定标签的子节点满足条件的标签（层次关系为父子关系）。
补充 next() == 下一个相邻兄弟 || nextAll() == 后面所有兄弟
代码示例
1 <script> 2 $(function () { 3 //.... 4 //(1) 后代标签 $(".box div") 5 //要获取class为box的标签的所有后代中的div标签 6 $(".box div").css("background","red"); 7 //(2) 直接后代 $(".box>div") 8 $(".box>div").css("background","green"); 9 //(3) 当前标签后面的第一个兄弟节点 $(".box1 + div") 10 $(".box1 +div").css("background","green"); 11 //(4) 当前标签后面的所有的兄弟节点 $(".box1 ~ div") 12 $(".box1 ~ div").css("background","green"); 13 }) 14 </script>
父子选择器相关方法
`parent() 获取当前标签的父节点``parents()获取当前标签的祖先节点``parentsUntil()获取当前标签的祖先节点直到…``children()获取当前标签的子节点``siblings()获取当前标签的兄弟节点`
代码示例
1 <body> 2 <div> 3 <div class="box"> 4 <div>demo</div> 5 <div class="active">demo</div> 6 <div>demo</div> 7 <div>demo</div> 8 <div>demo</div> 9 </div> 10 <span>我是span</span> 11 </div> 12 <button>点击我</button> 13 <script> 14 $(function () { 15 $("button").click(function () { 16 //(1) 获取当前标签的父节点 17 //console.log(this); 18 //console.log($(".active").parent()); 19 //$(".active").parent().css("background","red"); 20 //(2) 获取当前标签的祖先节点 21 //$(".active").parents().css("background","red"); 22 //(3) 获取当前标签的祖先节点直到... 23 //$(".active").parentsUntil("body").css("background","red"); 24 //(4) 获取当前标签的子节点 25 //$(".box").children().css("background","green"); 26 //(5) 获取除了当前标签之外的其他兄弟节点 27 //$(".active ~div").css("background","green"); 28 $(".active").siblings().css("background","green"); 29 }) 30 }) 31 </script>
4.4 筛选选择器
筛选选择器可以划分为 :基本筛选选择器、内容筛选选择器、可见性筛选选择器、属性筛选选择器、子元素筛选选择器、表单对象属性筛选选择器。
4.4.1 基本筛选选择器
| 选择器语法 | 功能 |
|---|---|
| :first | 获取第一个元素 |
| :last | 获取最后一个元素 |
| :eq(index) | 获取指定索引值的元素 |
| :gt(index) | 获取大于给定索引值的元素 |
| :lt(index) | 获取小于给定索引值的元素 |
| :not(selector) | 获取除给定选择器外的所有元素 |
| :header | 获取所有标题类型的元素，如h1 h2 |
| :animated | 获取正在执行动画效果的元素 |
| :even | 获取所有索引值为偶数的元素，索引号从0开始 |
| :odd | 获取所有索引值为奇数的元素，索引号从0开始 |
代码示例
1 <script> 2 $(function () { 3 //01 获取整个页面中第一个li标签,并设置背景颜色 4 $("li:first").css("background","green"); 5 //02 获取整个页面中最后一个li标签,并设置背景颜色 6 $("li:last").css("background","green"); 7 //03 获取整个页面中所有的li标签,除了最后一个 8 $("li:not(:last)").css("background","green"); 9 //04 获取整个页面中所有的li标签,除了索引为2的之外 10 $("li:not(:eq(2))").css("background","green"); 11 //05 获取索引值为偶数的li标签 12 $("li:even").css("background","green"); 13 //06 获取索引值为奇数的li标签 14 $("li:odd").css("background","green"); 15 //07 获取索引值为4的li标签 16 $("li:eq(4)").css("background","green"); 17 //08 获取所有索引值大于4的li标签 18 $("li:gt(4)").css("background","green"); 19 //09 获取所有索引值小于4的li标签 20 $("li:lt(4)").css("background","green"); 21 }); 22 </script>
4.4.2 内容筛选选择器
内容筛选选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
| 选择器语法 | 功能 |
|---|---|
| :contains(text) | 获取包含给定文本的元素 |
| :parent | 获取含有子元素或者文本的元素 |
| :empty | 获取所有不包含子元素或文本的空元素 |
| :has(selector) | 获取含有选择器所匹配的元素 |
代码示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.1.1.js"></script> 7 <style> 8 div{ 9 width: 100px; 10 height: 40px; 11 } 12 </style> 13 </head> 14 <body> 15 <div>天王盖地虎</div> 16 <div><span>我是span</span></div> 17 <div>宝塔镇河妖</div> 18 <div></div> 19 <script> 20 $(function () { 21 //(1) 获取包含给定文本的元素 22 $("div:contains(\'天\')").css("background","red"); 23 $("div:contains(\'塔\')").css("background","green"); 24 //(2) 获取不包含子元素或文本的空元素 25 $("div:empty").css("background","red"); 26 //(3) 获取含有子元素或者是文本的元素 27 $("div:parent").css("background","jQuery_第四章_选择器