jQuery 的选择器（Selector）是其最核心的功能之一，它允许开发者通过 CSS 选择器语法 快速、精准地获取 DOM 元素。对于维护老项目（如你之前提到的 AngularJS 时代项目），熟练掌握 jQuery 选择器是必备技能。
以下是 jQuery 选择器的分类详解及实战技巧：
1. 核心选择器（最常用）
|
ID 选择器 |
$("#id") |
通过元素的 id 属性查找。最快。 |
$("#username") |
|
Class 选择器 |
$(".class") |
通过元素的 class 属性查找。 |
$(".btn-primary") |
|
Element 选择器 |
$("tag") |
通过标签名查找。 |
$("div") |
|
全选选择器 |
$("*") |
选取页面所有元素（慎用，性能差）。 |
$("#container *") |
|
组合选择器 |
$("div, p, .active") |
选取多个条件的并集。 |
$("h1, h2, h3") |
2. 层级选择器（DOM 结构）
|
后代选择器 |
$("ancestor descendant") |
选取祖先元素内的所有后代元素。 |
$("#list li") |
|
子选择器 |
$("parent > child") |
只选取直接的子元素。 |
$("ul > li") |
|
相邻兄弟 |
$("prev + next") |
选取紧接在 prev 后的 next 元素。 |
$(".item + li") |
|
通用兄弟 |
$("prev ~ siblings") |
选取 prev 元素之后的所有 siblings。 |
$("#start ~ p") |
3. 过滤选择器（重点与难点）
这类选择器通常以 :开头，用于筛选特定状态的元素。
A. 基本过滤（位置相关）
-
:first/ :last：选取第一个/最后一个元素。
-
:eq(index)：选取索引为 index 的元素（从 0 开始）。
-
:gt(index)/ :lt(index)：选取索引大于/小于 index 的元素。
-
:even/ :odd：选取索引为偶数/奇数的元素（常用于表格隔行变色）。
B. 内容过滤
-
:contains(text)：选取包含指定文本内容的元素。
-
:has(selector)：选取包含特定后代元素的元素。
-
:empty：选取不包含子元素或文本的空元素。
C. 可见性过滤
-
:visible：选取所有可见的元素。
-
:hidden：选取所有不可见的元素（包括 display:none和 type="hidden"）。
D. 属性过滤（非常实用）
-
[attribute]：选取拥有此属性的元素。
-
[attribute=value]：选取属性等于特定值的元素。
-
[attribute!=value]：选取属性不等于特定值的元素。
-
[attribute^=value]：选取属性以特定值开头的元素。
-
[attribute$=value]：选取属性以特定值结尾的元素。
-
[attribute*=value]：选取属性包含特定值的元素。
E. 表单专用过滤
-
:input：选取所有 <input>, <textarea>, <select>, <button>。
-
:text/ :password/ :radio/ :checkbox：选取特定类型的 input。
-
:checked：选取被选中的单选框或复选框。
-
:selected：选取下拉框中被选中的 <option>。
4. 链式操作与上下文
jQuery 的强大之处在于链式调用和上下文限定。
// 链式操作：找到 class 为 container 的 div，找里面的 button，添加类，再隐藏
$("div.container").find("button").addClass("active").hide();
// 上下文查找（在指定 DOM 范围内查找）
$("li", "#userList").css("color", "red");
// 等价于 $("#userList").find("li")
5. 性能优化与避坑指南（全栈必看）
|
ID 查找 |
$("div#myId") |
$("#myId") |
ID 是唯一的，直接查最快，不需要加标签名。 |
|
Class 查找 |
$(".items") |
$("#parent").find(".items") |
限定查找范围，避免全局遍历。 |
|
循环内操作 |
for(){ $(".item") } |
var $items = $(".item"); for(){…} |
缓存 jQuery 对象，避免重复查询 DOM。 |
|
动态元素 |
$(".new-item").click(…) |
$(document).on("click", ".new-item", …) |
针对 Ajax 新增的元素，必须使用事件委托。 |
6. 面试加分话术
针对你之前的背景，在面试中可以这样体现深度：
“虽然现在很多新项目用 Vue/React，但在维护老系统（如 AngularJS 或 jQuery 项目）时，我依然会用到 jQuery。
我特别注意选择器的性能。比如我从来不直接用 $(".class")全局查找，而是会先锁定父容器 $("#container").find(".class")，利用浏览器原生的 getElementById缩小范围。
另外，对于动态生成的列表（比如通过 Ajax 加载的数据），我不会直接给元素绑定 click 事件，而是使用 $(document).on('click', '.selector', handler) 进行事件委托，这样既兼容动态数据，又避免了内存泄漏。”
总结： 记住 $("#id")最快，find()优于上下文，动态元素用 on()委托。掌握这些，足以应对 99% 的老项目维护需求。
