选择器是jQuery的根基，在jQuery中，遍历DOM、事件处理、CSS控制、动画设计和AJAX操作都依赖于选择器
1、jQuery选择器介绍和优势
jQuery选择器采用CSS和Xpath选择器语法规范，能够满足用户在DOM中快速匹配元素或元素集合。它有如下优势：
- 简化代码书写
- 完善的支持。支持不同CSS版本和不同类型浏览器
- 完善的处理机制。jQuery选择器的核心依然是JavaScript的原生方法，如getElementById()和getElementsByTagName()等方法，但是封装了原生方法的使用，简化了代码书写又避免了易错问题
jQuery选择器返回值均是一个伪数组对象，如果没有匹配元素，则会返回一个空的伪数组对象，因此判断一个jQuery对象是否存在，要使用数组长度来判断。
if($('tr').length > 0) {
// 处理代码
}
而不要使用
if($('tr')) {
// 处理代码
}
jQuery选择器分为基本选择器、结构选择器、过滤选择器、属性选择器以及表单选择器等。
2、基本选择器
| 选 择 器 | 说明 | 返回值 |
|---|---|---|
| #id(ID 选择器) | 根据给定的ID匹配一个元素，如果选择其中包含特殊字符，可以使用两个斜杠专业 | 包含单个元素的jQuery对象 |
| element(类型选择器) | 根据指定的元素类型名称选择该类型所有元素 | 包含同类型元素的jQuery对象 |
| .class(类选择器) | 根据指定的类名选择所有同类元素 | 包含同类元素的jQuery对象 |
| *(通配选择器) | 在限定范围内选择所有元素 | 包含所有元素的jQuery对象 |
| selector1,selector2,selectorN | 分别选择选择器组中每个选择器匹配的元素，然后合并返回所有元素 | 包含多组匹配元素的jQuery对象 |
- ID选择器
var element = document.getElementById('id')等价于jQuery("#id")
- 类型选择器
var elements = document.getElementsByTagName('tagName')等价于jQuery("tagName")
- 类选择器
var elements = document.getElementsByClassName('className')等价于jQuery(".className")
- 通配选择器
var elements = document.getElementsByTagName('*')等价于jQuery("*")
- 分组选择器
jQuery("selector1, selector2, selectorN")
3、结构选择器
结构选择器就是根据HTML文档结构中节点之间的包含或并列关系决定匹配元素的一种方法，jQuery模仿CSS的关系过滤模式定义了4个关系选择器，同时还根据包含关系，自定义了4个子元素选择器。
层级选择器
层级选择器能够根据元素之间的结构关系进行匹配操作，主要包含选择器、子选择器、相邻选择器和兄弟选择器：
| 选 择 器 | 说明 | 举例 |
|---|---|---|
| ancestor descendant(包含选择器) | 在给定的祖先元素下匹配所有的后代元素。ancestor表示任何有效的选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代选择器。 | $("form input")可以匹配表单下所有的input元素 |
| parent > child(子选择器) | 在给定的父元素下匹配所有的子元素。parent表示任何有效的选择器，child表示用以匹配元素的选择器，并且它是第一个选择器的子元素。 | $("form > input")可以匹配表单下所有子级input元素 |
| prev + next(相邻选择器) | 匹配所有紧接在prev元素后的next元素。prev表示任何有效的选择器，next表示一个有效的选择器并且紧接着第一个选择器。 | $("label + input")可以匹配所有跟在label后面的input元素 |
| prev ~ siblings(兄弟选择器) | 匹配prev元素之后的所有siblings元素。prev表示任何有效的选择器，siblings表示一个选择器，并且它作为第一个选择器的同辈。 | $("form ~ input")可以匹配到所有与表单同辈的input元素 |
子元素选择器
子元素选择器就是通过与当前匹配元素选择该元素包含的特定子元素。子元素选择器包含四种类型：
| 选 择 器 | 说明 |
|---|---|
| :nth-child | 匹配其父元素下的第N个子或奇偶元素 |
| :first-child | 匹配第一个子元素 :first选择器只匹配一个元素，而:first-child选择符将为每个父元素匹配一个子元素 |
| :last-child | 匹配最后一个子元素 :last选择器只匹配一个元素，而:last-child选择符将为每个父元素匹配一个子元素 |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会匹配，如果父元素中含有其他元素，那将不会被匹配 |
4、过滤选择器
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器的语法形式与CSS的伪类选择器的语法格式相同，即以冒号作为前缀标识符。
定位过滤器
定位过滤器主要是根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素。
| 选 择 器 | 说明 | 举例 |
|---|---|---|
| :first | 匹配找到的第一个元素 | $("tr:first")表示匹配表格的第一行 |
| :last | 匹配找到的最后一个元素 | $("tr:last")表示匹配表格的最后一行 |
| :not | 去除所有与给定选择器匹配的元素 | $("input:not(:checked)")表示匹配所有未选中的input元素 |
| :even | 匹配所有索引值为偶数的元素，从0开始计数 | $("tr:even")可以匹配表格的1、3、5...行(即索引值为0，2，4...) |
| :odd | 匹配所有索引值为奇数的元素，从0开始计数 | $("tr:odd")可以匹配表格的2、4、6...行(即索引值为1，3，5...) |
| :eq | 匹配一个给定索引值的元素，从0开始计数 | $("tr:eq(0)")表示匹配第1行表格行 |
| :gt | 匹配所有大于给定索引值的元素，从0开始计数 | $("tr:gt(0)")可以匹配第2行及其后面行 |
| :lt | 匹配所有小于给定索引值的元素 | $("tr:lt(1)")可以匹配第一行 |
| :header | 匹配如h1、h2、h3之类的标题元素 | |
| :animated | 匹配所有正在执行动画效果的元素 |
内容过滤器
内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤
| 选 择 器 | 说明 | 举例 |
|---|---|---|
| :contains | 匹配包含给定文本的元素 | $("div:contains('图片')")匹配所有包含“图片”的div元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | |
| :has | 匹配含有选择器所匹配的元素的元素 | $("div:has(p)")匹配所有包含p的div元素 |
| :parent | 匹配含有子元素或者文本的元素 |
可见过滤器
可见过滤器就是根据元素的可见或者隐藏来进行匹配的
| 选 择 器 | 说明 |
|---|---|
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
| :visible | 匹配所有的可见元素 |
5、属性选择器
属性选择器主要根据元素的属性及其属性值作为过滤的条件，来匹配对应的DOM元素。属性选择器都是以中括号作为起止分界符，如[attribute]，与伪类选择器特征都比较明显，jQuery定义了7中属性选择器
| 选 择 器 | 说明 | 举例 |
|---|---|---|
[attribute] |
匹配包含给定属性的元素 |
$("div[id]")表示查找所有含有id属性的div元素 |
[attribute=value] |
匹配属性等于特定值的元素。属性值的引号在大多数情况下是可选的，如果属性值中包含“]”时，需要加引号以避免冲突 |
$("input[name='text']")表示查找所有name属性值是'text'的input元素 |
[attribute!=value] |
匹配所有不含有指定的属性或者属性不等于特定值的元素。该选择器等价于:not([attr=value])，要匹配含有特定属性但不等于特定值的元素，可以使用[attr]:not([attr=value]) |
$("input[name!='text']")表示查找所有name属性值不是'text'的input元素 |
[attribute^=value] |
匹配给定的属性是以某些值开始的元素 |
$("input[name^='text']")表示所有name属性值是以'text'开始的input元素 |
[attribute$=value] |
匹配给定的属性是以某些值结尾的元素 |
$("input[name$='text']")表示所有name属性值是以'text'结尾的input元素 |
[attribute*=value] |
匹配给定的属性是包含某些值的元素 |
$("input[name*='text']")表示所有name属性值是包含'text'字符串的input元素 |
[selector1][selector2][selectorN] |
复合属性选择器，需要同时满足多个条件时使用 |
$("input[name*='text'][id]")表示所有name属性值包含'text'字符串，且包含了id属性的input元素 |
6、表单选择器
表单是页面中使用频率较高的元素之一，为了方便用户灵活操作表单，jQuery专门定义了表单选择器，使用表单选择器可以方便获取表单中某类表单域对象
基本表单选择器
jQuery定义了一组伪类选择器，利用他们可以获取页面中的表单类型元素
| 选 择 器 | 说明 |
|---|---|
| :input | 匹配所有input、textarea、select、button元素 |
| :text | 匹配所有单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有图像域 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| :file | 匹配所有文件域 |
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
高级表单选择器
jQuery根据表单域特有的特定定义了4个表单属性选择器，这些选择器与基本表单选择器不同，它们可以选择任何类型的表单域，因为它主要根据表单属性来进行选择
| 选 择 器 | 说明 |
|---|---|
| :enabled | 匹配所有可用元素 |
| :disabled | 匹配所有不可用元素 |
| :checked | 匹配所有被选中的元素（复选框、单选按钮等，不包括select中的option） |
| :selected | 匹配所有选中的option元素 |
7、jQuery选择器优化
正确使用选择器引擎对于页面性能起了至关重要的作用。使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。在传统用法中，最常用的是ID选择器、类(Class)选择器和类型选择器，其中速度最快的是ID选择器，使用了JavaScript中的内置函数getElementById()。其次是类型选择器，使用了JavaScript中的内置函数getElementsByTagName()。速度最慢的是Class选择器，其需要通过解析HTML文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。
基于以上问题，在使用jQuery应注意以下问题：
- 多用ID选择器
- 少直接使用Class选择器。可以使用复合选择器，摒除表达式中的冗余部分，对于不必要的复合表达式进行简化
- 多用父子关系，少用嵌套关系。如使用parent > child代替parent child
- 缓存jQuery对象
低效的用法：
for (i = 0; i < 100; i++) {
var myList = $('.myList');
myList.append(i);
}
使用下面的先缓存jQuery对象，则执行效率会大大提高
var myList = $('.myList');
for (i = 0; i < 100; i++) {
myList.append(i);
}
8、使用原生选择器
Selectors API是由W3C发起指定的一个标准，致力于让浏览器原生支持CSS查询。DOM API模块的核心是两个方法：querySelector()和querySelectorAll()。这两个方法能够根据CSS选择器规范，便捷定位文档中指定元素，前者返回的是一个元素对象，后者返回的是一个元素集合。
Document、DocumentFragment、Element都实现了NodeSelector接口，即这三种类型的节点都拥有querySelector()和querySelectorAll()方法。
网友评论