jQuery 选择器

jQuery 的全部魔法都从选中元素开始——选不中，后面什么都做不了。jQuery 选择器完全照搬 CSS 选择器语法，会写 CSS 的人几乎零门槛上手；同时还扩展了一批超方便的过滤器和表单选择器。本章把选择器系统过一遍。

1. 基础选择器

三种最基础的选择器和 CSS 完全一样：ID 用 #、类用 .、标签直接写名字。它们可以用空格、>、+、~ 组合出后代、亲子、兄弟关系。

// 基础三大选择器,完全照搬 CSS
$("#header")        // id 选择器:选中 id="header" 的元素(单个)
$(".active")        // 类选择器:选中 class 含 active 的所有元素
$("p")              // 标签选择器:选中所有 <p> 元素
$("*")              // 通用选择器:选中所有元素(慎用,慢)

// 组合用
$("div.container")  // <div> 且 class 含 container
$("p.intro.lead")   // <p> 且 class 同时含 intro 和 lead
$("ul#main li")     // id 为 main 的 <ul> 下所有 <li>(后代)
$("ul > li")        // <ul> 的直接子元素 <li>(亲子,不嵌套)
$("h2 + p")         // 紧跟 <h2> 后的 <p>(相邻兄弟)
$("h2 ~ p")         // <h2> 之后的所有 <p>(一般兄弟)

几个易混淆点：后代选择器（空格）会选所有层级的后代，不管嵌套多深；亲子选择器（>）只选直接子元素；相邻兄弟（+）只选紧跟其后的一个；一般兄弟（~）选后面所有同级。

2. 过滤选择器

jQuery 在 CSS 之外加了一批以冒号开头的过滤器，可以按位置、内容、可见性筛选。这是 jQuery 选择器的"独门绝技"，原生 CSS 没有。

// 基本:位置过滤
$("li:first")         // 第一个 li
$("li:last")          // 最后一个 li
$("li:eq(2)")         // 索引为 2 的 li(从 0 开始,即第三个)
$("li:lt(3)")         // 索引小于 3 的(前三个)
$("li:gt(2)")         // 索引大于 2 的
$("li:odd")           // 奇数索引(1,3,5...)
$("li:even")          // 偶数索引(0,2,4...)

// 子元素过滤
$("ul li:first-child")    // 每个 ul 下的第一个 li
$("ul li:last-child")     // 每个 ul 下的最后一个 li
$("ul li:nth-child(3)")   // 第 3 个(从 1 开始)
$("ul li:nth-child(odd)") // 奇数位的

// 内容 / 可见性过滤
$("div:contains('Hello')")  // 文本含 Hello 的 div
$("p:empty")                 // 没有子节点的 p
$("div:has(p)")              // 含 <p> 后代的 div
$("li:hidden")               // 隐藏的 li(display:none 或 input type=hidden)
$("li:visible")              // 可见的 li

注意 :first 和 :first-child 的区别——前者是所有匹配里的第一个（只有一个元素），后者是每个父元素下的第一个（可能有多个）。斑马纹表格用 :odd / :even 一行搞定，是 jQuery 最经典的写法之一。

3. 属性选择器

属性选择器用方括号，按 HTML 属性的存在性、相等、前缀、后缀、包含来筛选，对表单和链接特别有用。

// 属性选择器
$("input[type=text]")        // type=text 的 input
$("a[href]")                 // 有 href 属性的 a
$("a[href='#']")             // href 等于 #
$("a[href^='https']")        // href 以 https 开头
$("a[href$='.pdf']")         // href 以 .pdf 结尾
$("a[href*='example']")      // href 包含 example
$("input[name!='email']")    // name 不等于 email(jQuery 扩展,CSS 没这个)
$("div[class][id]")          // 同时有 class 和 id 的 div

常用场景：高亮所有外链（a[href^=http]）、给 PDF 链接加图标（a[href$=.pdf]）、找出所有未填的必填项（input[required]:empty）。

4. 表单选择器

jQuery 独有的表单专用选择器，让表单处理变得异常简洁。原生 JS 写 input[type=checkbox]，jQuery 写 :checkbox 即可。

// 表单选择器(jQuery 独有,超方便)
$(":input")         // 所有表单元素(input/textarea/select/button)
$(":text")          // <input type="text">
$(":password")      // <input type="password">
$(":checkbox")      // <input type="checkbox">
$(":radio")         // <input type="radio">
$(":submit")        // <input type="submit">

// 表单状态过滤
$(":checked")       // 选中的(checkbox/radio/option)
$(":selected")      // 选中的 <option>
$(":disabled")      // 禁用的表单元素
$(":enabled")       // 可用的表单元素
$(":focus")         // 当前获得焦点的元素

这套选择器在做表单校验、批量启用/禁用、读取选中值时几乎必备。比如 $(":checkbox:checked") 一行就能拿到所有勾选中的复选框。

5. 遍历方法（移动选区）

选中元素后，jQuery 还提供了一大批链式遍历方法，让你从当前选区"走"到它的父、子、兄弟。这比一次次重新 $() 选择要高效得多。

// 选中元素后,还能继续"走"到它的亲戚
$("li").first();              // 第一个
$("li").last();               // 最后一个
$("li").eq(2);                // 第三个
$("li").filter(".active");    // 在已选里再筛 class 含 active
$("li").not(".active");       // 在已选里排除 class 含 active
$("li").has("ul");            // 含 <ul> 后代的 li

// 找亲戚
$("li").parent();             // 直接父元素
$("li").parents(".list");     // 向上找所有祖先,筛 class 含 list
$("li").closest("ul");        // 向上找最近的 <ul>(常用)
$("li").children();           // 所有直接子元素
$("li").find("a");            // 所有后代中找 <a>(常用)
$("li").siblings();           // 所有兄弟
$("li").next();               // 下一个兄弟
$("li").prev();               // 上一个兄弟

// 链式遍历
$("li").first().next().find("a").addClass("hit");

最常用的是 find（在已选元素的后代里找）、closest（向上找最近的祖先）、siblings（找兄弟）。这三个加上 children / parent，能覆盖 90% 的 DOM 跳转需求。

6. 选择器性能小贴士

jQuery 选择器虽方便，但不是免费的。下面几条经验能避免性能坑：

能用 ID 就别用 class：浏览器对 ID 索引做了特殊优化，$("#main") 比 $(".main") 快一个数量级。
给选择器加上下文：$(".active", "#list") 或 $("#list").find(".active") 只在 #list 范围内查找，比直接 $(".active") 全局扫快得多。
避免 jQuery 独有过滤器在大型 DOM 上跑：:visible、:hidden、:contains() 不是原生 CSS，jQuery 要逐个元素判断，慢。先 $("*") 配合 .filter() 也不快——能不用就不用。
缓存选区：如果同一个选择器要用多次，把它存到变量里（如 $items），避免重复查找。
优先用原生 querySelector：现代浏览器对 CSS 选择器优化极好，简单场景用原生同样快。

小结

选择器是 jQuery 的地基——80% 的代码都从 $("...") 开始。会写 CSS 选择器 + 记住 jQuery 的过滤器（:first、:eq、:checked 等）+ 会用 find/closest/siblings 遍历，就足以应付绝大多数老代码。下一篇我们看选中元素后怎么响应用户的交互——事件系统。

← 上一篇引入 jQuery

下一篇 jQuery 事件 →

✈️💬