jQuery选择器继承了CSS和Path语法的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成对元素属性和行为的处理。
2.1 选择器的优势
代码更简单
完善的检测机制,在jQuery选择器定位页面元素时,无需考虑所定位的元素在页面中是否存在,即使该元素不存在,浏览器也不提示出错信息,极大低方便了代码的执行效率。(此为优势,不太苟同)
2.2 jQuery选择器的类型
根据所获取页面中元素的不同,可以将jQuery选择器分为四大类:基本选择器、层次选择器、过滤选择器、表单选择器。其中,在过滤选择器中又可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。
2.2.1 基本选择器
基本选择器是jQuery中使用最频繁的选择器,它由元素ID、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找。
选择器 | 功能描述 | 返回值 |
#id | 根据给定的ID匹配一个元素 | 单个元素 |
element | 根据给定的元素名匹配所有元素 | 元素集合 |
.class | 根据给定的类匹配元素 | 元素集合 |
* | 匹配所有元素 | 元素集合 |
selector1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
2.2.2层次选择器
层次选择器通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素。
选择器 | 功能描述 | 返回值 |
ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
parent > child | 根据父元素匹配所有的子元素 | 元素集合 |
prev + next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
prev ~ siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
2.2.3简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种。
选择器 | 功能描述 | 返回值 |
first()或: first | 获取第一个元素 | 单个元素 |
last()或: last | 获取最后一个元素 | 单个元素 |
:not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
:even | 获取所有索引值为偶数的元素,索引号从0开始 | 元素集合 |
:odd | 获取所有索引值为奇数的元素,索引号从0开始 | 元素集合 |
:eq(index) | 获取指定索引值的元素,索引号从0开始 | 单个元素 |
:gt(index) | 获取所有大于给定索引值的元素,索引号从0开始 | 元素集合 |
:lt(index) | 获取所有小于给定索引值的元素,索引号从0开始 | 元素集合 |
:header | 获取所有标题类型的元素,如h1、h2…… | 元素集合 |
:animated | 获取正在执行动画效果的元素 | 元素集合 |
2.2.4内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位。
选择器 | 功能描述 | 返回值 |
:contains(text) | 获取包含给定文本的元素 | 元素集合 |
:empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
:has(selector) | 获取含有选择器所匹配的元素 | 元素集合 |
:parent | 获取含有子元素或者文本的元素 | 元素集合 |
2.2.5 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素
选择器 | 功能描述 | 返回值 |
:hidden | 获取所有不可见元素,或者type为hidden的元素 | 元素集合 |
:visible | 获取所有的可见元素 | 元素集合 |
2.2.6 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以“[”号开始、以“]”号结束。
选择器 | 功能描述 | 返回值 |
[attribute] | 获取包含给定属性的元素 | 元素集合 |
[attribute=value] | 获取等于给定的属性是某个特定值的元素 | 元素集合 |
[attribute!=value] | 获取不等于给定的属性是某个特定值的元素 | 元素集合 |
[attribute^=value] | 获取给定的属性是以某些值开始的元素 | 元素集合 |
[attribute$=value] | 获取给定的属性是以某些值结尾的元素 | 元素集合 |
[attribute*=value] | 获取给定的属性是以包含某些值的元素 | 元素集合 |
[selector1][selector2][selectorN] | 获取满足多个条件的复合属性的元素 | 元素集合 |
2.2.7 子元素过滤选择器
在页面开发过程中,常常遇到突出指定某行的需求。虽然使用基本过滤选择器“:eq(index)”可实现单个表格的显示,但不能满足大量数据和多个表格的选择需求。为了实现这样的功能,jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
选择器 | 功能描述 | 返回值 |
:nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素,索引号从1开始 | 元素集合 |
:first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
:last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
:only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
2.2.8 表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如enabled、disabled、checked、selected属性。
选择器 | 功能描述 | 返回值 |
:enabled | 获取表单中所有属性为可用的元素 | 元素集合 |
:disabled | 获取表单中所有属性为不可用的元素 | 元素集合 |
:checked | 获取表单中所有被选中的元素 | 元素集合 |
:selected | 获取表单中所有被选中option的元素 | 元素集合 |
2.2.9 表单选择器
无论是提交还是传递数据,表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理,在前端页面开发中占据重要地位。因此,为了使用户能更加方便地、高效地使用表单,在jQuery选择器中引入表单选择器,该选择器专为表单量身打造,通过它可以在页面中快速定位某表单对象。
选择器 | 功能描述 | 返回值 |
:input | 获取所有 input、textarea、select | 元素集合 |
:text | 获取所有单行文本框 | 元素集合 |
:password | 获取所有密码框 | 元素集合 |
:radio | 获取所有单选按钮 | 元素集合 |
:checkbox | 获取所有复选框 | 元素集合 |
:submit | 获取所有提交按钮 | 元素集合 |
:image | 获取所有图像域 | 元素集合 |
:reset | 获取所有重置按钮 | 元素集合 |
:button | 获取所有按钮 | 元素集合 |
:file | 获取所有文件域 | 元素集合 |
在看完第二章,对于怎么获取元素,终于可以用了超级武器。