跳到主要内容

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 操作、事件绑定和动画效果打下坚实的基础。