jQuery选择器详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器详解相关的知识，希望对你有一定的参考价值。
根据所获取页面中元素的不同。可以将jQuery选择器分为：四大类，其中过滤选择器在分为六小类
| 基本选择器 |
|
| 层次选择器 |
|
| 过滤选择器 |
简单过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤选择器 |
| 表单选择器 |
基本选择器是jQuery中使用最频繁的选择器，它是由元素Id,Class,元素名，多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，
| 选择器 | 功能 | 返回值 |
| #id | 根据给定的ID匹配一个元素 | 单个元素 |
| element | 根据给定的元素匹配所有元素 | 元素集合 |
| .class | 根据给定的类匹配元素 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selector，selectorN | 将每个选择器匹配到元素合并后一起返回 | 元素集合 |
层次选择器用过DOM元素间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻，兄弟关系，通过其中某类关系可以方便快捷地定位元素
| 选择器 | 功能 | 返回值 |
| ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
| parent>child | 根据父元素匹配所有的子元素 | 元素集合 |
| prev+next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
| prev~siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
过滤选择器下的简单过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头;简单过滤器选择器是过滤器中使用最广泛的一种，
| 选择器 | 功能 | 返回值 |
| first() 或：first | 获取第一个元素 | 单个元素 |
| last() 或：last | 获取最后一个元素 | 单个元素 |
| ：not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
| ：even | 获取所有索引值为偶数的元素，索引号从0开始 | 元素集合 |
| ：odd | 获取所有索引值为奇数的元素，索引号从0开始 | 元素集合 |
| ：eq(index) | 获取指定索引器的元素，索引号从0开始 | 单个元素 |
| ：gt(index) | 获取所有大于给定索引器的元素，索引号从0开始 | 元素集合 |
| ：lt(index) | 获取所有小于给定索引器的元素，索引号从0开始 | 元素集合 |
| ：header | 获取所有标题类型的元素，如h1,h2...... | 元素机会 |
| ：animated | 获取正在执行动画效果的元素 | 元素集合 |
过滤选择器下的内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文本内容可以模糊或绝对匹配进行元素定位，
| 选择器 | 功能 | 返回值 |
| ：contains（text） | 获取包含给定文本的元素 | 元素集合 |
| ：empty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
| ：has(selector) | 获取含有选择器所匹配的元素的元素 | 元素集合 |
| ：parent | 获取含有子元素或者文本的元素 | 元素集合 |
过滤选择器下的可见性过滤选择器根据元素是否可见的特征获取元素，
| 选择器 | 功能 | 返回值 |
| ：hidden | 获取所有不可见元素，或者type为hidden的元素 | 元素集合 |
| ：visible | 获取所有可见元素 | 元素集合 |
过滤选择器下的属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“【”号开始一“】”号结束。
| 选择器 | 功能 | 返回值 |
| [attribute] | 获取包含跟定属性的元素 | 元素集合 |
| [attribute=value] | 获取等于给定的属性是某个特定值的元素 | 元素集合 |
| [attribute!=value] | 获取不等于给定的属性是某个特定值的元素 | 元素集合 |
| [attribute^=value] | 获取给定的属性是以某些值开始的元素 | 元素集合 |
| [attribute$=value] | 获取给定的属性是以某些值结尾的元素 | 元素集合 |
| [attribute*=value] | 获取给定属性是以包含某些值的元素 | 元素集合 |
| [selector1][selector2][selectorN] | 获取满足多个条件的复选框的元素 | 元素集合 |
过滤选择器下的子元素过滤选择器：
在页面开发过程中，常常遇到突发指定某行的需求，虽然使用基本过滤器：eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求，为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有元素中指定的某个元素。
| 选择器 | 功能 | 返回值 |
| ：nth-child(eq|even|add|index) | 获取每个父元素下的特定位置元素。索引号从1开始 | 元素集合 |
| ：first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
| ：last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
| ：only-child | 获取每个元素下的仅有一个元素 | 元素集合 |
过滤选择器下的表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如 enabled，disabled, checked, selected 属性。
| 选择器 | 功能 | 返回值 |
| ：enabled | 获取表单中所有属性为可用的元素 | 元素集合 |
| ：disabled | 获取表单中所有属性为可用的元素 | 元素集合 |
| ：checked | 获取表单中所有被选中的元素 | 元素集合 |
| ：selected | 获取表单中所有被选中option的元素 | 元素集合 |
表单选择器无论是提交还是传递数据，表单在页面中的作用是显而易见的，通过表单进行数据的提交或处理，再前端页面开发中占据重要地位。
因此为了使用户更加方便地，高效的使用表单，在jQuery选择器中引入表单选择器，该选择器专为表单打造，通过它可以在页面中快速定位表单对象。
| 选择器 | 功能 | 返回值 |
| ：input | 获取所有input.textaea.select | 元素集合 |
| ：text | 获取所有单行文本框 | 元素集合 |
| ：password | 获取所有密码框 | 元素集合 |
| ：radio | 获取所有单选按钮 | 元素集合 |
| ：cheakbox | 获取所有复选框 | 元素集合 |
| ：submit | 获取所有提交按钮 | 元素集合 |
| ：image | 获取所有图像域 | 元素集合 |
| ：reset | 获取所有重置按钮 | 元素集合 |
| :button | 获取所有按钮 | 元素集合 |
| ：file | 获取所有文件域 | 元素集合 |
以上是关于jQuery选择器详解的主要内容，如果未能解决你的问题，请参考以下文章