精准定位：选择器的解剖刀
文档摘要
第 2 章 · 精准定位：选择器的解剖刀 章节摘要：手术的第一原则是定位准确，jQuery 的选择器就是那把解剖刀。本章把选择器拆成四类刀具——基本选择器负责一刀命中，层级选择器顺着文档血络追索，过滤选择器在候选集合里二次筛查，表单过滤则专攻表单元素这类特殊组织。读完本章，你能为任意"改这里"的需求写出最小匹配范围的选择器，并说清每一次 调用背后发生了什么、代价多大。 学习目标 读完本章，你应当能够： 用 ID、类、标签三种基本选择器定位元素，并解释三者混写时的行为。 用后代、子代、相邻、兄弟四条层级路线沿 DOM 树追索目标。 用 、 、 、 等过滤刃在已有集合中收窄范围。 用 、 、 对表单状态做专项活检。 说明 jQuery 选择器与原生 的能力差异与性能取舍。
第 2 章 · 精准定位：选择器的解剖刀
章节摘要：手术的第一原则是定位准确，jQuery 的选择器就是那把解剖刀。本章把选择器拆成四类刀具——基本选择器负责一刀命中，层级选择器顺着文档血络追索，过滤选择器在候选集合里二次筛查，表单过滤则专攻表单元素这类特殊组织。读完本章，你能为任意"改这里"的需求写出最小匹配范围的选择器，并说清每一次
$()调用背后发生了什么、代价多大。
学习目标
读完本章，你应当能够：
- 用 ID、类、标签三种基本选择器定位元素，并解释三者混写时的行为。
- 用后代、子代、相邻、兄弟四条层级路线沿 DOM 树追索目标。
- 用
:first、:eq()、:not()、:has()等过滤刃在已有集合中收窄范围。 - 用
:checked、:disabled、:selected对表单状态做专项活检。 - 说明 jQuery 选择器与原生
querySelectorAll的能力差异与性能取舍。
核心概念速览
选择器的哲学是先广后窄：第一刀切出候选集合，后续每一刀都让集合更小。把下面这张全景图记在脑子里，写选择器时先问自己"我需要哪把刀"，而不是把所有条件堆进一串字符。
金句：选择器不是越长越准，而是越窄越好——每一刀都要有明确的组织学理由。
子章节导航
- 2.1 基本选择器：三种一刀定位——ID、类、标签，以及逗号并集写法；这是使用频率最高、也最该用的一层。
- 2.2 层级选择器：沿血络追索——当目标没有独特的类名时，借助父子兄弟关系从已知锚点走过去。
- 2.3 过滤选择器：漏斗式筛查——位置、内容、可见性三类过滤刃，把宽泛匹配收窄成精确目标。
- 2.4 表单对象过滤：专项活检——针对输入框、下拉、复选的状态过滤，表单校验场景的主力刀具。
子章节之间的逻辑关系
基本选择器 ───→ 层级选择器 │ │ ▼ ▼ 过滤选择器 ──→ 表单过滤 （四把刀可以自由组合，顺序即过滤次序）
四节是并列关系而非递进，但建议按序读：越往后的刀具越依赖"集合"这个概念——过滤永远作用在前面已经切出的集合上，这个心智模型在第 3 章的遍历中还会复用。
刀具考核单：本章可考核的知识点
定位功夫的验收不看背了多少选择器，看面对需求时能否一次选中、只选中目标。下面这张考核单把本章技能拆成可当场验证的条目：
| 考核项 | 判定动作 | 达标标准 |
|---|---|---|
| 三种基本刀的命中范围 | 分别写出 ID、类、标签选择器并数匹配数 | 能预判各刀的匹配数量与优先场景 |
| 逗号并集 | 写 $('.a, .b') 并与两次查询对比 |
知道并集结果去重、顺序按文档序 |
| 层级四路线 | 用后代、子代、相邻、兄弟各定位一次 | 说得出"相邻只认紧邻的下一个" |
:eq() 与 :nth-child() 之辨 |
在同一列表上分别取 :eq(1) 与 :nth-child(2) |
知道前者从零计数且在整个集合里数，后者按父节点下的位置从一数 |
:not() 的收窄 |
用 :not(.done) 排除已完成项 |
能把"排除"意识写进选择器而非 if 判断 |
:has() 的包含筛查 |
选出"含有图片的条目" | 区分"自身符合"与"后代符合" |
| 表单状态刀 | 用 :checked 统计选中复选框 |
明白它查的是当前状态，不是初始属性 |
| 与原生的能力对照 | 用 querySelectorAll 重写同一需求 |
知道伪类过滤多数可平移，jQuery 专属伪类不可 |
| 选择器代价的直觉 | 比较 #id 与通配选择器的执行路径 |
答出 ID 走原生快速通道，越宽泛越慢 |
考核单里最容易翻车的是 :eq() 与 :nth-child() 的计数差异——一个从零开始、只在 jQuery 集合里数，一个从一开始、在各自父节点里数。写错的那次往往不报错，只是悄悄选错了行，等界面错位才发现。2.3 节会把这对易混刃放在同一标本上对照演示。
常见误诊预告（本章版）
症状通常是"选多了"或"选少了"：给类名起得太通用，一刀下去切中半个页面；层级写得太深，文档结构微调后全线失明；用 :visible 过滤后又用 css 改了显示状态，前后口径对不上。本章各节的"易错点"环节会给出每个症状的病理与改法。
前置知识与后续延伸
前置：第 1 章的 jQuery 对象概念，以及 CSS 选择器的基础语法（.class、#id、标签名）。jQuery 选择器大量借用 CSS 语法，会写 CSS 就已经会了一半。
往后走：第 3 章的遍历方法本质上是"用代码做层级选择器的活儿"；第 4 章的事件委托（在根部监听末梢）同样建立在本章的选择器能力之上。性能优化一节会再回来算这笔账：选择器写得太宽，代价由谁承担。