jQuery 选择器

jQuery 选择器基于 CSS 语法并做了大量扩展，是 jQuery 的基石。本页按类别梳理最常用的选择器，作为日常开发的速查手册；每个选择器放进 $("...") 都能返回匹配的元素集合。

基本选择器

选择器	说明
*	匹配页面所有元素
#id	匹配指定 id 的元素
.class	匹配指定 class 的所有元素
element	匹配指定标签名的所有元素
sel1, sel2	逗号合并，匹配其中任意一个

$("#main");    // id 为 main 的元素
$(".item");    // class 含 item 的所有元素
$("p, .item"); // 所有 <p> 以及 class 含 item 的元素

层级选择器

选择器	说明
A B	A 内部所有后代 B
A > B	A 的直接子元素 B
A + B	A 后面紧邻的兄弟 B
A ~ B	A 之后的所有兄弟 B

$("ul li");   // ul 内所有 li（含嵌套）
$("ul > li"); // ul 的直接子 li
$("h2 + p");  // h2 后面紧挨着的那个 p

基础过滤选择器

选择器	说明
:first / :last	第一个 / 最后一个
:eq(n)	索引为 n 的那个（从 0 数起）
:gt(n) / :lt(n)	索引大于 n / 小于 n
:not(sel)	不匹配 sel 的元素

$("li:first");        // 第一个 li
$("li:eq(2)");        // 第 3 个 li
$("li:not(.active)"); // 没有 .active 类的 li

内容与可见性过滤

选择器	说明
:contains(文本)	文本包含指定内容的元素
:has(sel)	内部存在匹配 sel 子元素的元素
:empty	没有子元素与文本的空元素
:hidden / :visible	隐藏的 / 可见的元素

例如 $("p:contains(你好)") 会选出文本含"你好"的段落，$("div:has(.btn)") 选出内部含有 .btn 的 div，效果一目了然。

属性选择器

选择器	说明
[attr]	带 attr 属性的元素
[attr=val]	attr 值等于 val
[attr^=val]	attr 值以 val 开头
[attr$=val]	attr 值以 val 结尾
[attr*=val]	attr 值包含 val

$("input[type='text']"); // 所有文本框
$("a[href^='https']");   // https 开头的链接
$("a[href$='.pdf']");    // 以 .pdf 结尾的链接

表单选择器

选择器	说明
:input	所有表单控件
:checked	被选中的单选或复选框
:selected	被选中的下拉选项
:focus	当前获得焦点的元素

$(":checked");          // 被选中的 radio / checkbox
$("option:selected");   // 下拉框中当前选中的 option

小结：选择器决定"对谁操作"，是 jQuery 一切动作的起点。配合 CSS 语法与冒号过滤器，几乎任何元素都能被精确选中；选中之后，还可再用遍历方法继续筛选。