jQuery 选择器

以下部分包含 jQuery 选择器的简要概述。

本节包含属于最新 jQuery JavaScript 库的全面选择器列表。所有选择器都按类别分组。

基本选择器

选择 描述
* $("*") 选择所有元素。
*#id* $("#foo") 选择所有 id="foo" 元素。
*.class* $(".bar") 选择所有 class="bar" 元素。
*element* $("p") 选择所有 <p> 元素。
*selector1, selector2, selectorN* $("h1, p.bar, span") 选择所有 <h1><span>,但只有 <p> 元素有 class="bar"

基本滤波器选择器

选择 描述
:first $("p:first") 选择第一个 <p> 元素。
:last $("p:last") 选择最后一个 <p> 元素。
:even $("tr:even") 选择所有偶数 <tr> 元素,零索引。
:odd $("tr:odd") 选择所有奇数 <tr> 元素,零索引。
:eq() $("tr:eq(1)") 选择 <tr> 匹配集中的第二个元素,从零开始的索引。
:not() $("p:not(:empty)") 选择所有 <p> 非空元素。
:lt() $("ul li:lt(3)") 选择 <li> 匹配集内索引小于 3 的所有元素(即选择第 1,第 2,第 3 列表元素),从零开始的索引。
:gt() $("ul li:gt(3)") 选择 <li> 匹配集中索引大于 3 的所有元素(即选择第 4,第 5,…列表元素),从零开始的索引。
:header $(":header") 选择是头,像所有的元素 <h1><h2><h3> 等等。
:lang() $(":lang(en)") 选择具有语言值的所有元素“ en”也就是说 lang="en"lang="en-us" 等等。
:root $(":root") 选择文档的根元素,它始终 <html> 是 HTML 文档中的元素。
:animated $(":animated") 选择运行选择器时动画的所有元素。

子滤波器选择器

选择 描述
:first-child $("p:first-child") 选择 <p> 作为其父级的第一个子级的所有元素。
:last-child $("p:last-child") 选择 <p> 作为其父级的最后一个子元素的所有元素。
:nth-child(*n*) $("p:nth-child(3)") 选择 <p> 作为其父级的第 3 个子级的所有元素。
:only-child $("p:only-child") 选择所有 <p> 父元素的子元素。
:first-of-type $("p:first-of-type") 选择作为其父级 <p> 的第一个 <p> 元素的所有元素。
:last-of-type $("p:last-of-type") 选择作为其父级 <p> 的最后一个 <p> 元素的所有元素。
:only-of-type $("p:only-of-type") 选择 <p> 没有具有相同元素名称的兄弟元素的所有元素。
:nth-last-child(*n*) $("p:nth-last-child(3)") 选择所有 <p> 元素作为其父元素的第 3 个子元素,从最后一个元素到第一个元素进行计数。
:nth-of-type(*n*) $("p:nth-of-type(2)") 选择作为其父级 <p> 的第二个 <p> 元素的所有元素
:nth-last-of-type(*n*) $("p:nth-last-of-type(2)") 选择 <p> 作为其父级的第二个子元素的所有元素,从最后一个元素到第一个元素进行计数。

内容过滤器选择器

选择 描述
:contains() $('p:contains("Hello")') 选择 <p> 包含文本 Hello 的所有元素。
:empty $("td:empty") 选择所有 <td> 空的元素,即没有子元素的元素,包括文本。
:has() $("p:has(img)") 选择 <p> 包含至少一个 <img> 元素的所有元素。
:parent $(":parent") 选择具有至少一个子节点元素或文本的所有元素。

表格选择器

选择 描述
:input $(":input") 选择所有输入,textarea,select 和按钮元素(基本上选择所有表单控件)。
:text $(":text") 选择所有输入元素 type="text"
:password $(":password") 选择所有输入元素 type="password"
:radio $(":radio") 选择所有输入元素 type="radio"
:checkbox $(":checkbox") 选择所有输入元素 type="checkbox"
:button $(":button") 选择所有输入和按钮元素 type="button"
:submit $(":submit") 选择所有输入和按钮元素 type="submit"
:reset $(":reset") 选择所有输入和按钮元素 type="reset"
:image $(":image") 选择所有输入元素 type="image"
:file $(":file") 选择所有输入元素 type="file"
:enabled $(":enabled") 选择已启用的所有元素。
:disabled $(":disabled") 选择已禁用的所有元素。
:selected $(":selected") 选择所有选定的元素,仅适用于 <option> 元素。
:checked $(":checked") 选择已选中或选中的所有元素,适用于复选框,单选按钮和选择元素。
:focus $(":focus") 如果当前是焦点,则选择元素。

属性选择器

选择 描述
[attribute] $("[href]") 选择具有 href 属性的所有元素,具有任何值。
[attribute="value"] $('a[target="_blank"]') 选择 <a> 具有 target 值等于的属性的所有元素 _blank
[attribute="value"] $('a[target!="_blank"]') 选择所有 <a> 不具有该 target 属性的元素,或者不具有值的元素 _blank
[attribute$="value"] $('img[src$=".png"]') 选择 <img> 具有 src 值以 .png。结尾的值的属性的所有元素。
`[attribute =“value”]` `$(‘a[hreflang
[attribute^="value"] $('img[title^="Smiley"]') 选择 <img> 具有 title 属性的所有元素,其值始于 Smiley 字符串。
[attribute~="value"] $('img[title~="Kites"]') 选择 <img> 具有 title 属性的所有元素,其值包含单词 Kites ,由空格分隔。
[attribute*="value"] $('input[name*="male"]') 选择 <input> 具有 name 包含子字符串 male 的值的属性的所有元素。

层次结构选择器

选择 描述
parent > child $("ul > li") 选择所有 <li><ul> 元素的直接子元素。
ancestor descendant $("form label") 选择 <label> 其祖先 <form> 元素后代的所有元素。
prev + next $("h1 + p") 选择 <p> 下一个元素,即紧接在 <h1> 元素之前的所有元素。
prev ~ siblings $("h1 ~ p") 选择所有 <p> 兄弟元素并跟随 <h1> 元素。

可见性过滤器选择器

选择 描述
:hidden $("p:hidden") 选择 <p> 隐藏的所有元素。
:visible $("p:visible") 选择所有 <p> 可见的元素。