jQuery 选择器
在使用 jQuery 时，最重要的一步就是“选中你想操作的元素”。这一步通常由选择器完成。选择器就像是你对网页元素的“定位系统”，让你可以准确地找到页面中的某个元素，甚至一组元素，并对它们进行操作。
在本节中，你将学会：
- jQuery 选择器的基本用法；
- 常用的几种类型（ID、类、标签）；
- 属性选择器；
- 层级选择器；
- 表单选择器；
- 筛选选择器（如
:first、:even等）； - 如何组合选择器来进行更灵活的元素查找。
掌握选择器，是写好 jQuery 程序的第一步。
jQuery 选择器基础语法
在 jQuery 中，你使用 $() 来选中元素，语法非常类似 CSS：
$(selector)
其中 selector 就是选择器，比如：
$('#box') // 选中 ID 为 box 的元素
$('.item') // 选中 class 为 item 的所有元素
$('p') // 选中所有 <p> 元素
这些选择器返回的是一个 jQuery 对象，你可以对它使用 jQuery 方法来进行操作。
常用选择器类型
ID 选择器（#）
选中 ID 的语法是 #id：
$('#header') // 选中 <div id="header"> 元素
通常用于选中页面中唯一的某个元素。
类选择器（.）
选中 class 的语法是 .class：
$('.menu') // 选中所有 class="menu" 的元素
页面上可以有多个元素拥有相同的类。
标签选择器（元素名）
选中某种标签类型的所有元素：
$('li') // 选中所有 <li> 元素
属性选择器
你可以通过 HTML 属性来选中元素：
$('input[type="text"]') // 选中所有类型为文本框的 input 元素
$('a[target="_blank"]') // 选中所有新窗口打开的链接
这非常适合处理表单或特定行为的元素。
层级选择器
层级选择器可以根据 HTML 结构关系来选中元素。
后代选择器（空格）
$('#content p') // 选中 #content 下的所有 <p> 元素（不限层级）
子元素选择器（>）
$('#content > p') // 选中 #content 的直接子元素 <p>
相邻兄弟选择器（+）
$('h2 + p') // 选中紧跟在 <h2> 后面的第一个 <p>
普通兄弟选择器（~）
$('h2 ~ p') // 选中 <h2> 之后所有同级的 <p>
表单选择器
jQuery 提供了一些专门用于表单元素的选择器：
$(':text') // 所有文本框（等价于 input[type="text"]）
$(':password') // 所有密码框
$(':checkbox') // 所有复选框
$(':radio') // 所有单选框
$(':submit') // 所有提交按钮
$(':input') // 所有表单输入元素（input、textarea、select、button）
这些选择器可以让你快速操作表单。
筛选选择器
这些选择器用来筛选符合条件的元素。
基本筛选
$('li:first') // 第一个 <li>
$('li:last') // 最后一个 <li>
$('li:even') // 索引为偶数的 <li>（从 0 开始）
$('li:odd') // 索引为奇数的 <li>
状态筛选
$(':checked') // 所有被选中的复选框/单选框
$(':disabled') // 所有禁用的表单项
$(':enabled') // 所有可用的表单项
组合选择器
你可以把多个选择器组合起来使用，用逗号分隔：
$('h1, h2, .title') // 选中所有 <h1>、<h2> 和 class 为 title 的元素
你也可以嵌套使用：
$('#box .item') // 选中 ID 为 box 的元素下的所有 .item 元素
组合选择器可以让你写出更灵活、强大的匹配规则。
小结
在这一节中，你系统地学习了 jQuery 选择器的各种用法，包括：
- 基础选择器：ID、类、标签；
- 属性选择器；
- 层级选择器（父子、兄弟）；
- 表单选择器；
- 筛选选择器；
- 多个选择器组合使用。
选择器是你操作网页元素的起点。掌握它们之后，你就能非常灵活地选中你想要控制的内容，为后续的 DOM 操作、事件绑定和动画效果打下坚实的基础。
