jquery_ref_selectors
jQuery 选择器参考手册
Section titled “jQuery 选择器参考手册”jQuery 选择器利用 CSS 选择器语法来定位特定的 HTML 元素进行操作。理解选择器是有效使用 jQuery 的基础。
Section titled “jQuery 选择器利用 CSS 选择器语法来定位特定的 HTML 元素进行操作。理解选择器是有效使用 jQuery 的基础。”本参考手册涵盖了 jQuery 支持的常用 CSS 选择器以及一些 jQuery 特有的扩展。现代浏览器对 CSS 选择器有很好的支持，使得许多复杂的选择无需 jQuery 特有的语法也能实现。
选择器 示例 选择
基本选择器
$(”*”) 所有元素（谨慎使用，可能影响性能）。
#id
$(“#userProfile”)
ID 为 userProfile 的特定元素。
.class
$(“.product-item”)
所有类为 product-item 的元素。
.class1.class2
$(“.item.featured”)
同时具有 item 和 featured 两个类的所有元素。
.class1, .class2
$(“.warning, .error”)
具有 warning 或 error 类中任一类的所有元素。
element
$(“p”)
所有 <p> 元素。
el1, el2, el3
$(“h1, h2, p”)
所有 <h1>、<h2> 和 <p> 元素。
层级选择器
parent > child
$(“ul > li”)
所有作为 <ul> 直接子元素的 <li> 元素。
parent descendant
$(“article p”)
所有作为 <article> 元素后代（任意层级）的 <p> 元素。
element + next
$(“h2 + p”)
选择紧跟在每个 <h2> 元素后面的 <p> 元素（必须是同级）。
element ~ siblings
$(“h2 ~ p”)
选择紧跟在 <h2> 元素后面的所有同级 <p> 元素。
基本过滤 / 伪类
:first
$(“li:first”)
在 jQuery 选取范围内 第一个匹配的 <li> 元素（jQuery 扩展）。对于 CSS 标准，请使用 :first-child。
:last
$(“li:last”)
在 jQuery 选取范围内 最后一个匹配的 <li> 元素（jQuery 扩展）。对于 CSS 标准，请使用 :last-child。
:even
$(“tr:even”)
在 jQuery 选取范围内 选择索引为偶数的元素 (0, 2, 4…)（索引从 0 开始计数，jQuery 扩展）。对于 CSS 标准，请使用 :nth-child(even)。
:odd
$(“tr:odd”)
在 jQuery 选取范围内 选择索引为奇数的元素 (1, 3, 5…)（索引从 0 开始计数，jQuery 扩展）。对于 CSS 标准，请使用 :nth-child(odd)。
:eq(index) $(“ul li:eq(2)”) 在 jQuery 选取范围内 指定零基础索引（此处为第三个列表项）处的元素（jQuery 扩展）。
:gt(index) $(“ul li:gt(1)”) 在 jQuery 选取范围内 索引大于指定索引（此处为第三个、第四个…）的元素（jQuery 扩展）。
:lt(index) $(“ul li:lt(2)”) 在 jQuery 选取范围内 索引小于指定索引（此处为第一个、第二个）的元素（jQuery 扩展）。
:not(selector) $(“input:not(:checked)”) 选择所有不匹配给定内部选择器的元素（CSS 标准）。
:header
$(":header")
选择所有标题元素（<h1> 到 <h6>）（jQuery 扩展）。
:animated $(":animated") 选择当前正在进行 jQuery 动画的元素（jQuery 扩展）。
:focus $(":focus") 选择当前具有焦点的元素（CSS 标准）。
内容过滤
:contains(text) $(“p:contains(‘Important’)”) 选择文本内容包含指定字符串的元素（区分大小写，jQuery 扩展）。
:has(selector) $(“div:has(span.icon)”) 选择包含至少一个匹配内部选择器的后代的元素（jQuery 扩展）。
:empty $(“td:empty”) 选择没有子节点（包括文本节点）的元素（CSS 标准）。
:parent
$(“td:parent”)
选择至少有一个子节点（元素或文本）的元素（与 :empty 相反，jQuery 扩展）。
可见性过滤
:hidden
$(“div:hidden”)
选择当前隐藏的元素。这包括 display: none、visibility: hidden、opacity: 0、type="hidden" 的 input 元素以及宽度/高度为零的元素（jQuery 扩展，可能有性能成本）。
:visible
$(“div:visible”)
选择当前可见的元素（与 :hidden 相反，jQuery 扩展）。
子元素过滤 / 伪类 (CSS 标准)
:first-child
$(“li:first-child”)
选择每个作为其父元素第一个子元素的 <li> 元素。
:last-child
$(“li:last-child”)
选择每个作为其父元素最后一个子元素的 <li> 元素。
:only-child
$(“p:only-child”)
选择每个作为其父元素唯一子元素的 <p> 元素。
:first-of-type
$(“h2:first-of-type”)
选择每个作为其同级元素中第一个 <h2> 元素的 <h2> 元素。
:last-of-type
$(“h2:last-of-type”)
选择每个作为其同级元素中最后一个 <h2> 元素的 <h2> 元素。
:only-of-type
$(“p:only-of-type”)
选择每个作为其同级元素中唯一 <p> 元素的 <p> 元素。
:nth-child(n) $(“li:nth-child(3)”) 选择在其父元素中是第 3 个子元素的元素。
:nth-child(odd/even) $(“tr:nth-child(odd)”) 选择奇数 (1st, 3rd…) 或偶数 (2nd, 4th…) 子元素。
:nth-child(an+b) $(“tr:nth-child(3n+1)”) 根据公式（例如，第 1 个、第 4 个、第 7 个…）选择子元素。
:nth-last-child(n) $(“li:nth-last-child(2)”) 选择从最后一个子元素开始计数是第 2 个的元素。
:nth-of-type(n)
$(“p:nth-of-type(2)”)
选择在其同级元素中是第 2 个 <p> 元素的元素。
:nth-last-of-type(n)
$(“p:nth-last-of-type(1)”)
选择在其同级元素中是最后一个 <p> 元素的元素。
属性选择器 (CSS 标准)
[attribute]
$(“[data-role]”)
选择所有具有 data-role 属性的元素。
[attribute=value]
$(“a[target=’_blank’]”)
选择 target 属性值精确等于 _blank 的 <a> 元素。
[attribute!=value]
$(“input[type!=‘submit’]”)
选择 type 属性值不等于 submit 的 <input> 元素（jQuery 扩展，建议使用 :not([type='submit']) 作为 CSS 标准）。
[attribute^=value]
$(“a[href^=‘https://’]”)
选择 href 属性值以 https:// 开头的 <a> 元素。
[attribute$=value]
$(“img[src$=‘.png’]”)
选择 src 属性值以 .png 结尾的 <img> 元素。
[attribute*=value]
$(“a[href*=‘jquery’]”)
选择 href 属性值包含子字符串 jquery 的 <a> 元素。
[attribute|=value]
$(“[lang|=‘en’]”)
选择 lang 属性值等于 en 或以 en- 开头的元素。
[attribute~=value]
$(“p[class~=‘important’]”)
选择 class 属性值包含完整单词 important（以空格分隔的列表）的 <p> 元素。
表单选择器 (jQuery 扩展)
:input
$(":input")
选择所有 <input>、<textarea>、<select> 和 <button> 元素。
:text
$(":text")
选择 type="text" 的 input 元素。
:password
$(":password")
选择 type="password" 的 input 元素。
:radio
$(":radio")
选择 type="radio" 的 input 元素。
:checkbox
$(":checkbox")
选择 type="checkbox" 的 input 元素。
:submit
$(":submit")
选择 type="submit" 的 input 元素以及隐式或显式类型为 submit 的 <button> 元素。
:reset
$(":reset")
选择 type="reset" 的 input 元素。
:button
$(":button")
选择 type="button" 的 input 元素以及所有 <button> 元素。
:image
$(":image")
选择 type="image" 的 input 元素。
:file
$(":file")
选择 type="file" 的 input 元素。
:enabled $(":enabled") 选择所有当前启用（未禁用）的表单元素（CSS 标准）。
:disabled $(":disabled") 选择所有当前禁用（未启用）的表单元素（CSS 标准）。
:checked $(":checked") 选择所有已勾选的单选按钮和复选框（CSS 标准）。
:selected
$(“option:selected”)
选择 <select> 中所有已选中的 <option> 元素（CSS 标准）。
注意： 尽管 jQuery 扩展很方便，但尽可能优先使用标准的 CSS 选择器，以获得更好的性能和未来的兼容性。