五、jQuery 选择器
5.1 jQuery 选择器概述
选择器是 jQuery 的基础，对事件的处理，遍历 DOM 和 Ajax 操作都依赖于选择器
jQuery 选择器可以通过 CSS 选择器、条件过滤两种方式获取元素
5.1.1 什么是 jQuery 选择器
- 在 CSS 中，选择器的操作是获取元素，而后为其添加 CSS 样式美化外观
- jQuery 不仅良好地基础了 CSS 选择器的语法，还继承了其获取页面元素便捷高效的特点
- jQuery 选择器与 CSS 选择器不同之处在于，jQuery 选择器是为获取的元素添加行为
- jQuery 的操作都建立在获取元素之上，否则无法实现想要的效果
5.1.2 jQuery 选择器的优势
jQuery 选择器有以下两点优势
1、简介的写法
- $() 函数在很多 JS 库中被当做一个选择器函数来使用，jQuery 中是如此
- 其中 $() 函数代替 JS 中的函数 示例
//代替 javaScript 中的 document.getElementById();
$("#id")
//代替 javaScript 中的 document.getElementByTagName();
$("tagName");
2、完善的处理机制
- 使用 jQuery 选择器要比传统的 javaScript 函数要更为简洁
- 如果元素不存在时，JS 不会保存阻塞其他代码的运行
5.1.3 jQuery 选择器的类型
jQuery 可以通过 CSS 选择器和过滤选择器两种方式选取元素，每种方式又有不同的方法来获取元素
具体 jQuery 选择器的类型如下
- 通过 CSS 选择器选取元素
- 基本选择器
- 层次选择器
- 属性选择器
- 通过过滤选择器选取元素
- 基本过滤选择器
- 可见性过滤选择器
6.2 通过 CSS 选择器选取元素
jQuery 支持大多 CSS 选择器
其中常用的有 CSS 的基本选择器、层次选择器、属性选择器
CSS 中的这些选择器，在 jQuery 中同样适用
6.2.1 基本选择器
- jQuery 基本选择器与 CSS 基本选择器相同
- jQuery 基本选择器继承了 CSS 选择器的语法和功能
- 主要由元素标签名、class、id 和多个选择器组成
- 通过基本选择器可以实现大多数页面元素查找
- jQuery 基本选择器主要包括标签选择器、类选择器、id 选择器、并集选择器和全局选择器
- jQuery 基本选择器详细说明
| 名称 | 语法构成 | 描述 | 返回值 | 示例 |
|---|---|---|---|---|
| 标签选择器 | element | 匹配指定的标签名元素 | 元素集合 | $(“h2”) 选取所有的 h2 元素 |
| 类选择器 | .class | 匹配指定的 class 元素 | 元素集合 | $(“.title”) 选取所有以 class 为 title 的元素 |
| id 选择器 | #id | 匹配指定的 id元素 | 单个元素 | $(“#title”) 选取以 id 为 title 的元素 |
| 并集选择器 | selector1,selector2, …,selectorN | 将每个选择器匹 配的元素合并后一起返回 | 元素集合 | $(“div,p,title”) 选取所有以 div、p 和class 为 title 的元素 |
| 全局选择器 | * | 匹配所有元素 | 元素集合 | $(“*”) 选取所有元素 |
6.2.2 层次选择器
-
jQuery 中的层次选择器与 CSS 中的层次选择器相同
-
它们都是根据获取元素与其父元素、子元素、兄弟元素关系而构成的选择器
-
可以使用 jQuery 的层次选择器，通过 DOM 元素之间的层次关系来获取元素
-
jQuery 中也有四种层次选择器：后代选择器、子选择器、相邻元素选择器和同辈元素选择器
-
jQuery 层次选择器详细说明
| 名称 | 语法构成 | 描述 | 返回值 | |
|---|---|---|---|---|
| 后代选择器 | root offspring | 选取 root 元素里的所有 offspring (后代) 元素 | 元素集合 | $(“#menu span”) 选取 #menu 下所有的 元素 |
| 子选择器 | parent>child | 选取 parent 元素下的 child (子) 元素 | 元素集合 | $(“#menu>span”) 选取 #menu 下的子元素 |
| 相邻元素选择器 | prev+next | 选取紧邻 prev 元素 之后的 next 元素 | 元素集合 | $(“h2+dl”) 选取紧邻<h2>元素之后的同辈元素 <dl> 元素 |
| 同辈元素选择器 | prev~sibings | 选取 prev 元素之后的 所有 sibings() 同辈元素 | 元素集合 | $(“h2~dl”) 选取 <h2> 元素之后所有的同辈元素 <dl> |
- 在 jQuery层次选择器中
- 可以使用 next() 方法(获取下一个元素) 来替代 相邻元素选择器
- 也可以使用 nextAll() 方法(获取元素之后的所有同辈元素) 来替代同辈元素选择器
6.2.3 属性选择器
- 属性选择器就是通过 HTML 元素的属性选择元素的选择器
- 它与 CSS 中的属性选择器语法完全一致
- 从语法构成上来看，它遵循 CSS 选择器
- 从类型上来看，它属于 jQuery 中按条件过滤获取元素的选择器之一
- jQuery 属性选择器详细说明
| 语法构成 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| [attribute] | 选取包含指定属性的元素 | 元素集合 | $(“[href]”) 选取还有 href 属性的元素 |
| [attribute=value] | 选取等于指定属性是某个特定值的元素 | 元素集合 | $(“[href=‘#’]”) 选取 href 属性值为 “#” 的元素 |
| [attribute!=value] | 选取不等于指定属性是某个特定值的元素 | 元素集合 | $(“[href!=‘#’]”) 选取 href 属性值不为 “#” 的元素 |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | 元素集合 | $(" [href^=‘en’]" )选曲 href 属性值 以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | 元素集合 | $(" [href$='.jpg']")选取 href 属性值以 .jpg 结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | 元素集合 | $(" [href=‘txt’]" )选取 href 属性值 中含有 txt 的元素 |
6.3 通过条件过滤选取元素
过滤选择器主要通过特定的过滤规则筛选出所需的 DOM 元素
过滤规则与 CSS 中的 伪类语法相同，及都以一个冒号 ( : ) 开头
冒号前是需要过滤的元素，冒号后是过滤条件
按照不同的过滤条件，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器
以下主要介绍 基本选择器和可见性选择器
6.3.1 基本过滤选择器
- 基本过滤选择器是过滤选择器中最常见的一种
- 基本过滤选择器详细说明
| 语法 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :first | 选取第一个元素 | 单个元素 | $(“li:first”) 选取所有 <li> 元素中的第一个 <li> 元素 |
| :last | 选取最后一个元素 | 单个元素 | $(“last”) 选取所有 <li> 元素中的最后一个 <li> 元素 |
| :not(selector) | 选取去除所有与给定选择器匹配的元素 | 集合元素 | $(“li:not(.three)”) 选取 class 不是 three 的元素 |
| :even | 选取索引是偶数的所有元素 (index 从 0 开始) | 集合元素 | $(“li:even”) 选取索引是偶数的所有 <li> 元素 |
| :odd | 选取索引是奇数的所有元素 (index 从 0 开始) | 集合元素 | $(“li:odd”) 选取索引是奇数的所有<li> 元素 |
| :eq(index) | 选取索引等于 index 的元素 （index 从 0 开始） | 单个元素 | $(“li:eq(1)” ) 选取索引等于 1 的<li>元素 |
| :gt(index) | 选取索引大于 index 的元素 （index 从0开始） | 集合元素 | $(" li:gt(1)" ) 选取索引大于 1 的<li>元素（注：大于1，不包括1） |
| :lt(index) | 选取索引小于 index 的元素 （index 从0开始） | 集合元素 | $(“li:lt(1)” ) 选取索引小于 1 的<li>元素（注：小于1，不包括1） |
| :header | 选取所有标题元素，如 h1~h6 | 集合元素 | $(“:header” ) 选取网页中所有标题元素 |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(“:focus” ) 选取当前获取焦点的元素 |
| :animated | 选择所有动画 | 集合元素 | $(“:animated” ) 选取当前所有动画元素 |
6.3.2 可见性过滤选择器
- jQuery 选择器还可以通过元素的显示状态来获取元素
- jQuery 中，通过元素显示状态选取元素的选择器称为可见性过滤选择器
- 可见性过滤选择器的详细说明
| 语法 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :visible | 选取所有可见的元素 | 集合元素 | $(“:visible” ) 选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | 集合元素 | $(“:hidden” ) 选取所有隐藏的元素 |
6.3.3 jQuery 选择器的注意事项
在使用 jQuery 选择器时，有一些问题是必须注意的，否则无法显示正确效果
1、选择器中含有特殊符号的注意事项
- W3C 规范中，规定属性值中不能含有某些特殊字符，但是不代表不能含有
- 当表达式中有 # 或 . 等特殊字符时，按照普通方法处理，就会出错
- 解决这类错误就需要使用到转义符转义
- 当表达式中含有特殊符号 例如
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
<script type="text/javascript">
$("#id#a");
$("#id[2]");
</script>
- 这类代码正常运行下去则会报错
- 这时需要使用转义符对符号进行转义
- 正确写法如下
$("#id\\#a");
$("#id\\[2\\]");
2、选择器中含有空格的注意事项
- 选择器中的空格也是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果
- 所以在使用 jQuery 选择器时，要格外注意选择器中的空格
扫一扫
7287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
