jQuery的选择器相比JavaScript更简单明了。
$()查找元素
$()是jQuery的元素选择器,各种DOM是这样选择的:
| 选择器语法 | 说明 |
| $(*) | 选择所有元素 |
| $(element) | 按元素名称选择 |
| $(id) | 按id选择元素 |
| $(.class) | 按类选择元素 |
基本选择器
| 选择器示例 | 说明 |
| ancestor descendant | 一个元素是另一个元素的后代,如li a |
| parent > child | 一个元素是另一个元素的直接子节点 |
| previous + next | 相邻的兄弟选择器,只会选中紧跟在前一个元素之后的那一个元素 |
| previous ~ siblings | 兄弟选择器会选中前一个元素的所有兄弟元素 |
基本筛选器
| 筛选示例 | 说明 |
| $('li:first') | 选取第一个元素 |
| $('li:last') | 选取最后一个元素 |
| $("tr:even") | 选取索引为偶数的元素,从 0 开始 |
| $("tr:odd") | 选取索引为奇数的元素,从 0 开始 |
| $("tr:eq(1)") | 选取给定索引值的元素 |
| $("tr:gt(0)") | 选取大于给定索引值的元素 |
| $("tr:lt(2)") | 选取小于给定索引值的元素 |
| $(":focus") | 当前获取焦点的元素 |
| $(":animated") | 正在执行动画效果的元素 |
内容选择器
| 筛选示例 | 说明 |
| $("div:contains('nick')") | 选取包含nick文本的元素 |
| $("td:empty") | 选取不包含子元素或者文本的空元素 |
| $("div:has(p)") | 选取含有选择器所匹配的元素 |
| $("td:parent") | 选取含有子元素或者文本的元素 |
可见性选择器
| 筛选示例 | 说明 |
| $("div:hidden") | 筛选所有隐藏的元素 |
| $("td:empty") | 筛选所有可见的元素 |
子节点选择器
| 筛选示例 | 说明 |
| $("ul:nth-child(2)") | 选取当前选中元素的指定子节点,参数中的值是从1开始索引的 |
| $("ul:first-child") | 选取当前选中元素的第一个子节点 |
| $("ul:last-child") | 选取当前选中元素的最后一个子节点 |
| $("ul:only-child") | 选取当前是父元素的唯一子节点时选中 |
属性筛选器
| 筛选示例 | 说明 |
| $("[href]") | 筛选指定属性的元素 |
| $("[href='https://www.0735it.net']") | 筛选指定属性,并指定属性值的元素 |
| $("[href!='#index']") | 筛选指定属性,并属性值不为指定值的元素 |
| $("[href^='#']") | 筛选以特定值开头的元素 |
| $("[href*='#']") | 筛选包含特定值的元素 |
| $("[href|='#']") | 筛选属性值等于特定字符串,或以特定字符串做为前缀,后加一个连字符(-)的元素 |
| $('input[name~="man"]') | 筛选属性值以空格分隔的多个值中的一个 |
| $('input[id][name$="man"]') | 多个属性筛选器同时使用 |
表单筛选器
| 筛选示例 | 说明 |
| $("input") | 筛选所有的input元素 |
| $("input:text") | 筛选所有文本类型的input元素 |
| $("input:password") | 筛选所有密码类型的input元素 |
| $("input:radio") | 筛选所有单选类型的input元素 |
| $("input:checkbox") | 筛选所有复选类型的input元素 |
| $("input:submit") | 筛选所有的提交按钮 |
| $("input:image") | 筛选所有的图片 |
| $("input:reset") | 筛选所有的重置按钮 |
| $("input:button") | 筛选所有的按钮 |
| $("input:file") | 筛选所有的文件上传域 |
| $("input:selected") | 筛选所有的提交按钮 |
| $("input:enabled") | 筛选所有可用的元素 |
| $("input:disabled") | 筛选所有禁用的元素 |
| $("input:checked") | 筛选所被选中的单选或筛选元素 |