剑客出剑，先要看得见对手；写 jQuery，先要找到元素。 选择器就是轻剑的眼睛——它与 CSS 选择器几乎一一对应，CSS 练得越熟，这一式练得越快。
- 认识基本选择器：
#id、.class、tag与*，与 CSS 同源同形 - 会用组合选择器：
tag.class、后代、子代与逗号并集 - 了解属性选择器与位置选择器，会用
$(selector).length判断命中数量 - 认识表单选择器：
:input、:checked、:selected、:disabled
选择器：轻剑的眼睛
$() 里传入一个选择器字符串，它就会返回一个 jQuery 对象——本质是一个“元素集合”。
哪怕一个元素都没命中，它也不会报错，只是返回一个空集合；反过来，命中多个元素时，
大多数方法会自动对集合里的每一个元素执行，这就是上一式说的“隐式遍历”。
好消息是：这套选择器语法与 CSS 选择器几乎完全一致。你写 CSS 时怎么选元素，jQuery 里就怎么写。基础四式如下：
基本选择器
四个基本选择器里，#id 最快、最准——id 约定全页唯一，选它就等于指名道姓；
.class 用于“一批同类”；tag 用于“一整类标签”。
想知道命中了多少，就问集合的 .length。先来数一数段落：
床前明月光，
疑是地上霜。
举头望明月，低头思故乡。
点按钮，看看这一页共有几个段落。
这里有两个小知识点：.length 返回集合里元素的个数，0 就是“一个也没找到”；
而 $('#jq02-demo1 p') 这种“圈定范围再选”的写法，正是接下来要讲的组合选择器。
组合选择器
单一选择器不够精细时，把它们组合起来：紧挨着写是“同时满足”，空格是“后代”，
> 是“只认亲儿子”，逗号是“都算”。
.menu a 与 .menu > a 的差别值得咬文嚼字：
后代不问辈分，隔几层都算；子代只认“亲儿子”。下面的演示用并集一次选中两类：
手握轻剑，身佩宝刀； 踏遍青山，归来仍是少年。
注意 $('.jian, .dao') 一口气命中了四个词，.css() 也就被自动执行了四次——
还是那句话：隐式遍历，集合里人人有份。两行 .css() 首尾相连，正是链式调用。
属性选择器
元素身上穿的“属性”也能当线索：[attr] 表示“有这属性就行”，
[attr=val] 要求值完全相等，[attr^=val] 要求值以 val 开头。
jQuery 还支持 [attr$=val]（结尾）与 [attr*=val]（包含）。
旁边的数字输入框纹丝不动——[type="text"] 只认文本框。
属性选择器在表单里特别好用：input[required]、input[type="email"] 都是家常便饭。
位置选择器与方法
:first、:last、:even、:odd
按“在集合里的位置”选人。注意 jQuery 从 0 起数，所以 :even 选中的是第 1、3、5……个。
这几个位置伪类是 jQuery 的“私房扩展”，不属于标准 CSS。现代 jQuery 更推荐对应的过滤方法：
$('li').first()、$('li').eq(2)。理由有二——性能：
浏览器原生不认识 :first 这类伪类，jQuery 得自己多扫一遍；可读性：
.first() 一眼就懂，:first 还容易与 CSS 的 :first-child 混淆。
江湖规矩：伪类能用，但方法更体面。
| 位次 | 弟子 | 兵器 |
|---|---|---|
| 1 | 阿青 | 青竹棒 |
| 2 | 阿明 | 峨眉刺 |
| 3 | 阿直 | 长剑 |
| 4 | 阿敏 | 快马 |
:even 从 0 起数，所以 1、3 行上了色。若改用方法，就是
$('#jq02-demo4 tbody tr').eq(2).css('background-color', '#f4edde')
这类“先广撒网、再精挑”的两步走——这正是第七式（遍历）的主线，此处先打个照面。
表单选择器
表单是网页里最需要“挑挑拣拣”的地方：哪些框填了、哪些勾了、哪些被禁用…… jQuery 为表单备了一组专用伪类，写法上都以冒号开头，可以直接拼在别的选择器后面。
| 选择器 | 选中谁 |
|---|---|
:input | 全部表单控件：input、textarea、select、button 一个不落 |
:text / :password / :file | 按 type 挑文本框 / 密码框 / 文件框 |
:checkbox / :radio / :submit | 按 type 挑复选框 / 单选按钮 / 提交按钮 |
:checked | 被勾选的复选框、单选按钮，以及被选中的下拉项 |
:selected | 下拉框里被选中的 <option> |
:disabled / :enabled | 被禁用 / 可用的控件 |
勾选、选中、禁用都是实时状态——用户在页面上一点，结果就变了。 所以这类选择器不要只查一次存起来，最好在事件回调里“当下再查一遍”，才能跟上用户的动作。
点上面的按钮，看看各选中了几个。- 把例 4 的
:even改成:odd，再点一次“隔行上色”，看哪几行变了颜色。 - 写一个新页面：四个段落，
class="a"与class="b"交替出现；点按钮后 .a 变红、.b 变蓝、全部加粗。 - 思考题：为什么 jQuery 官方更推荐
.first()/.eq()方法，而不是:first/:eq伪类？
参考答案 1
变色的是第 2、4 行（阿明、阿敏）——从 0 起数，:odd 对应第 1、3 个位置。
顺手换成方法写法，给“阿直”那一行单独上色：
参考答案 2
前两行是普通 class 选择器，第三行用逗号并集把两类一起加粗—— 三行代码，两类元素，处处都是隐式遍历。
参考答案 3
一是性能：这些伪类不是标准 CSS，浏览器原生选择器不认，jQuery 必须自己实现筛选，
凭空多一道工序；二是可读性：.first() 语义直白，而 :first
容易与 :first-child 等标准伪类混淆。此外，方法形式与 jQuery“先选择、再过滤”的分工一致——
选择器负责广撒网，过滤方法负责精挑细选。
本式小结
- jQuery 选择器与 CSS 同源，会 CSS 就掌握了它的大半；
- 基本、组合、属性、位置、表单五大类选择器，按需取用；
$(selector).length判断命中数量，命中 0 个也不报错；- 位置伪类是 jQuery 扩展，江湖上更推崇
.first()、.eq()等方法； :checked、:disabled这类状态选择器要“现查现用”，别缓存太久。
下一式，修炼内容与属性——text、html、val 三兄弟轮番登场，attr 与 prop 的恩怨也一并了结。