jQuery选择器是jQuery库的核心功能之一，它允许通过简洁的语法快速选取DOM元素并执行操作。jQuery选择器基于CSS选择器语法并扩展了多种自定义过滤条件，能够精准定位页面中的单个或多个元素。借助jQuery选择器，开发者可以高效地实现元素查找、样式修改、事件绑定等任务。本节将全面介绍jQuery选择器的分类、用法及性能优化策略。
基本选择器
基本选择器是最常用的选择器类型，直接对应CSS的基本选择方式。通过ID、类名、标签名等属性即可选取元素。下表总结了基本选择器的语法和示例。
| 选择器 | 描述 | 示例 |
|---|---|---|
#id | 选取指定ID的元素 | $('#header') 选取id为“header”的元素 |
.class | 选取指定类名的所有元素 | $('.menu-item') 选取所有class包含“menu-item”的元素 |
element | 选取指定标签名的所有元素 | $('div') 选取所有<div>元素 |
* | 选取所有元素 | $('*') 选取页面中所有元素 |
selector1, selector2 | 同时选取多个选择器匹配的元素 | $('h2, .intro') 选取所有<h2>和class为“intro”的元素 |
基本选择器可以组合使用，例如$('div.highlight')选取所有class包含“highlight”的<div>元素。
层次选择器
层次选择器基于DOM树中元素之间的层级关系进行选取。它们能够根据祖先、后代、兄弟等关系定位目标元素。
| 选择器 | 描述 | 示例 |
|---|---|---|
ancestor descendant | 选取祖先元素内部的所有后代元素 | $('ul li') 选取所有<ul>内部的<li>元素 |
parent > child | 选取父元素的直接子元素 | $('.nav > li') 选取class为“nav”的元素下的直接子元素<li> |
prev + next | 选取紧接在prev元素后的next元素 | $('h2 + p') 选取紧跟在<h2>后面的第一个<p>元素 |
prev ~ siblings | 选取prev元素之后的所有同级next元素 | $('h2 ~ p') 选取<h2>后面的所有同级<p>元素 |
层次选择器在操作特定结构中的元素时非常有用，例如导航菜单、列表等。
过滤选择器
过滤选择器以冒号开头，用于从已选取的元素集合中进一步筛选符合条件的元素。根据过滤条件的不同，可分为基础过滤、内容过滤和可见性过滤。
基础过滤选择器
基础过滤选择器根据元素在集合中的位置或索引进行筛选。
| 选择器 | 描述 | 示例 |
|---|---|---|
:first | 选取第一个元素 | $('li:first') 选取第一个<li>元素 |
:last | 选取最后一个元素 | $('li:last') 选取最后一个<li>元素 |
:even | 选取索引为偶数的元素（索引从0开始） | $('tr:even') 选取偶数行（第0、2、4行） |
:odd | 选取索引为奇数的元素 | $('tr:odd') 选取奇数行（第1、3、5行） |
:eq(index) | 选取索引等于指定值的元素 | $('li:eq(2)') 选取索引为2（第三个）的<li>元素 |
:gt(index) | 选取索引大于指定值的元素 | $('li:gt(1)') 选取索引大于1（从第三个开始）的<li>元素 |
:lt(index) | 选取索引小于指定值的元素 | $('li:lt(3)') 选取索引小于3（前三个）的<li>元素 |
内容过滤选择器
内容过滤选择器根据元素包含的文本内容或子元素进行筛选。
| 选择器 | 描述 | 示例 |
|---|---|---|
:contains(text) | 选取包含指定文本的元素 | $('p:contains("jQuery")') 选取包含文本“jQuery”的<p>元素 |
:empty | 选取没有子元素（包括文本节点）的空元素 | $('td:empty') 选取内容为空的单元格 |
:parent | 选取拥有子元素（包括文本节点）的元素 | $('div:parent') 选取非空的<div>元素 |
:has(selector) | 选取包含匹配指定选择器的元素的元素 | $('div:has(p)') 选取包含<p>元素的<div>元素 |
可见性过滤选择器
可见性过滤选择器根据元素的显示状态进行筛选。
| 选择器 | 描述 | 示例 |
|---|---|---|
:visible | 选取所有可见的元素 | $('div:visible') 选取所有可见的<div>元素 |
:hidden | 选取所有隐藏的元素（包括display:none、input type="hidden"等） | $('div:hidden') 选取所有隐藏的<div>元素 |
属性选择器
属性选择器通过元素的属性及属性值来选取元素。它们使用方括号语法，支持多种匹配模式。
| 选择器 | 描述 | 示例 |
|---|---|---|
[attr] | 选取包含指定属性的元素 | $('[data-id]') 选取所有具有data-id属性的元素 |
[attr=value] | 选取属性值等于指定值的元素 | $('[type="text"]') 选取所有type属性为“text”的元素 |
[attr!=value] | 选取属性值不等于指定值的元素 | $('[type!="text"]') 选取所有type属性不为“text”的元素 |
[attr^=value] | 选取属性值以指定值开头的元素 | $('[class^="btn-"]') 选取所有class值以“btn-”开头的元素 |
[attr$=value] | 选取属性值以指定值结尾的元素 | $('[href$=".pdf"]') 选取所有链接指向PDF文件的元素 |
[attr*=value] | 选取属性值包含指定值的元素 | $('[title*="more"]') 选取title属性包含“more”的元素 |
[attr~=value] | 选取属性值包含指定单词（以空格分隔）的元素 | $('[class~="icon"]') 选取class属性值中包含单词“icon”的元素 |
[attr|=value] | 选取属性值等于指定值或以指定值后跟连字符开头的元素 | $('[lang|="en"]') 选取lang属性等于“en”或以“en-”开头的元素 |
属性选择器常用于根据自定义数据属性或表单控件类型选取元素。
表单选择器
表单选择器是针对表单元素的专用选择器，简化了表单控件的选取。
| 选择器 | 描述 | 示例 |
|---|---|---|
:input | 选取所有<input>、<textarea>、<select>和<button>元素 | $(':input') 选取所有表单元素 |
:text | 选取所有type="text"的<input>元素 | $(':text') 选取所有单行文本框 |
:password | 选取所有type="password"的<input>元素 | $(':password') 选取所有密码框 |
:radio | 选取所有type="radio"的<input>元素 | $(':radio') 选取所有单选按钮 |
:checkbox | 选取所有type="checkbox"的<input>元素 | $(':checkbox') 选取所有复选框 |
:submit | 选取所有type="submit"的<input>和<button>元素 | $(':submit') 选取所有提交按钮 |
:reset | 选取所有type="reset"的<input>和<button>元素 | $(':reset') 选取所有重置按钮 |
:button | 选取所有type="button"的<input>和<button>元素 | $(':button') 选取所有普通按钮 |
:file | 选取所有type="file"的<input>元素 | $(':file') 选取所有文件上传框 |
:hidden | 选取所有隐藏的<input>元素（type="hidden"）以及一般隐藏元素 | $(':hidden') 选取所有隐藏元素 |
:enabled | 选取所有可用的表单元素 | $('input:enabled') 选取所有可用的输入框 |
:disabled | 选取所有禁用的表单元素 | $('input:disabled') 选取所有禁用的输入框 |
:checked | 选取所有被选中的单选按钮和复选框 | $(':checked') 选取所有被选中的选项 |
:selected | 选取所有被选中的<option>元素 | $('option:selected') 选取所有被选中的选项 |
表单选择器可以与其他选择器组合，例如$('form :checkbox:checked')选取表单内所有被选中的复选框。
选择器性能优化与最佳实践
合理使用jQuery选择器能够提升页面性能，避免不必要的DOM遍历。以下表格总结了选择器性能优化的关键点和实践建议。
| 优化点 | 说明 | 实践建议 |
|---|---|---|
| 优先使用ID选择器 | ID在页面中唯一，查找速度最快 | 能通过ID定位的元素尽量使用$('#id')，避免复合选择器 |
| 限定选择器范围 | 缩小查找范围可以减少遍历时间 | 使用上下文参数，如$('.item', '#container')，或在容器元素上预先查找 |
| 避免过度限定 | 选择器越具体，浏览器匹配开销越大 | 尽量使用简洁的选择器，如$('.nav a')而非$('ul.nav > li > a') |
| 缓存jQuery对象 | 重复查找同一组元素会产生多次查询开销 | 将选取结果存入变量，如var $elements = $('.selector');，后续操作使用该变量 |
| 避免使用通配符选择器 | $('*')会遍历所有元素，性能极差 | 除非必须，否则不要单独使用通配符，尤其避免在复合选择器中滥用 |
使用find()而非上下文选择器 | find()方法内部优化较好，性能优于$('selector', context) | 在已有jQuery对象上使用find()进行后代查找 |
| 合并多次操作为链式调用 | 链式调用减少临时对象创建 | 利用jQuery的链式特性，如$('#id').addClass('new').show(); |
| 合理使用过滤选择器 | 某些过滤选择器（如:hidden）需要计算样式，可能较慢 | 尽量使用属性选择器或显式条件替代，如$('[type="hidden"]')代替:hidden |
此外，在动态页面中，事件委托可以结合选择器高效处理事件，减少事件绑定数量。选择器的性能优化应当根据实际场景权衡，在保证代码可读性的前提下追求高效。
jQuery选择器作为jQuery的核心特性，提供了丰富而灵活的DOM选取能力，使开发者能够快速实现复杂的交互效果。理解不同选择器的适用场景和性能特点，有助于编写高效且易于维护的代码。通过合理运用选择器优化策略，即使在大型项目中，jQuery也能保持良好的运行效率。