jQuery 选择器
以下部分包含 jQuery 选择器的简要概述。
jQuery 选择器 按字母顺序排列
本节包含属于最新 jQuery JavaScript 库的选择器的完整列表。 所有的选择器都按类别分组。
基本选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
* |
$("*") |
选择所有元素。 |
#id |
$("#foo") |
选择所有带有 id="foo" 的元素。 |
.class |
$(".bar") |
选择所有带有 class="bar" 的元素。 |
element |
$("p") |
选择所有 <p> 元素。 |
selector1, selector2, selectorN |
$("h1, p.bar, span") |
选择所有 <h1> 和 <span>，但只选择具有 class="bar" 的 <p> 元素。 |
基本过滤器选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
: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)") |
选择匹配集中索引小于 3 的所有 <li> 元素（即选择第一个、第二个、第三个列表元素），从零开始的索引。 |
:gt() |
$("ul li:gt(3)") |
选择匹配集中索引大于 3 的所有 <li> 元素（即选择第 4、第 5、... 列表元素），从零开始的索引。 |
:header |
$(":header") |
选择所有作为标题的元素，如 <h1>, <h2>, <h3> 等。 |
:lang() |
$(":lang(en)") |
选择具有语言值"en"的所有元素，即 lang="en", lang="en-us" 等。 |
:root |
$(":root") |
选择文档的根元素，该元素始终是 HTML 文档中的 <html> 元素。 |
:animated |
$(":animated") |
选择在选择器运行时正在动画的所有元素。 |
Child 子过滤器选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
:first-child |
$("p:first-child") |
选择作为其父元素的第一个子元素的所有 <p> 元素。 |
:last-child |
$("p:last-child") |
选择所有 <p> 元素，它们是其父元素的最后一个子元素。 |
:nth-child(n) |
$("p:nth-child(3)") |
选择所有 <p> 元素，它们是其父元素的第三个子元素。 |
: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> 元素，它们是其父元素的第三个子元素，从最后一个元素计数到第一个元素。 |
: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")') |
选择包含文本"Hello"的所有 <p> 元素。 |
:empty |
$("td:empty") |
选择所有空的 <td> 元素，即没有包含文本的子元素。 |
:has() |
$("p:has(img)") |
选择包含至少一个 <img> 元素的所有 <p> 元素。 |
:parent |
$(":parent") |
选择具有至少一个子节点的所有元素，无论是元素还是文本。 |
表单选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
:input |
$(":input") |
选择所有输入、文本区域、选择和按钮元素（基本上选择所有表单控件）。 |
: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") |
选择所有启用的元素。 | |
: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"]') |
选择所有没有 target 属性的 <a> 元素，或者如果没有值 "_blank"。 |
[attribute$="value"] |
$('img[src$=".png"]') |
选择所有具有 src 属性且值以 ".png" 结尾的 <img> 元素。 |
[attribute|="value"] |
$('a[hreflang|="en"]') |
选择所有 <a> 元素，其 hreflang 属性的值等于 "en"，或以 "en" 开头，后跟连字符， like "en-US"。 |
[attribute^="value"] |
$('img[title^="Smiley"]') |
选择所有 <img> 元素，其 title 属性的值恰好以"Smiley"字符串开头。 |
[attribute~="value"] |
$('img[title~="Kites"]') |
选择所有 <img> 元素，其 title 属性的值包含单词"Kites"，由空格分隔。 |
[attribute*="value"] |
$('input[name*="male"]') |
选择所有具有 name 属性的 <input> 元素，其 a 值包含子字符串"male"。 |
层次选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
parent > child |
$("ul > li") |
选择所有作为其父 <ul> 元素的直接子元素的 <li> 元素。 |
ancestor descendant |
$("form label") |
选择作为其祖先 <form> 元素的后代的所有 <label> 元素。 |
prev + next |
$("h1 + p") |
选择接下来的所有 <p> 元素，即紧接在 <h1> 元素之前的元素。 |
prev ~ siblings |
$("h1 ~ p") |
选择所有 <p> 元素，它们是同级元素并跟随在 <h1> 元素之后。 |
可见性过滤器选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
:hidden |
$("p:hidden") |
选择所有隐藏的 <p> 元素。 |
:visible |
$("p:visible") |
选择所有可见的 <p> 元素。 |
本节包含属于最新 jQuery JavaScript 库的选择器的完整列表。 所有选择器都按字母顺序列出。
| 选择器 | 示例 | 说明 |
|---|---|---|
* |
$("*") |
选择所有元素。 |
#id |
$("#foo") |
选择所有带有 id="foo" 的元素。 |
.class |
$(".bar") |
选择所有带有 class="bar" 的元素。 |
element |
$("p") |
选择所有 <p> 元素。 |
selector1, selector2, selectorN |
$("h1, p.bar, span") |
选择所有 <h1> 和 <span>，但仅选择具有 class="bar" 的 <p> 元素。 |
ancestor descendant |
$("form label") |
选择所有 <label > 元素的祖先 <form > 元素的后代。 |
parent > child |
$("ul > li") |
选择作为其父 <ul> 元素的直接子元素的所有 <li> 元素。 |
prev + next |
$("h1 + p") |
选择接下来的所有 <p> 元素，即紧接在 <h1> 元素之前的元素。 |
prev ~ siblings |
$("h1 ~ p") |
选择所有 <p> 元素，它们是同级元素并跟随在 <h1> 元素之后。 |
:animated |
$(":animated") |
选择在选择器运行时正在动画的所有元素。 |
[attribute] |
$("[href]") |
选择具有 href 属性的所有元素，具有任何值。 |
[attribute="value"] |
$('a[target="_blank"]') |
选择所有 <a> 元素，其 target 属性的值等于 "_blank"。 |
[attribute|="value"] |
$('a[hreflang|="en"]') |
选择所有 <a> 元素，其 hreflang 属性的值等于 "en"，或以 "en" 开头后跟一个连字符，类似于 "en-US"。 |
[attribute*="value"] |
$('input[name*="male"]') |
选择所有具有 name 属性的 <input> 元素，其 a 值包含子字符串"male"。 |
[attribute~="value"] |
$('img[title~="Kites"]') |
选择所有 <img> 元素，其 title 属性的值包含单词"Kites"，由空格分隔。 |
[attribute$="value"] |
$('img[src$=".png"]') |
选择所有具有 src 属性且值以 ".png" 结尾的 <img> 元素。 |
[attribute!="value"] |
$('a[target!="_blank"]') |
选择所有没有 target 属性的 <a> 元素，或者如果没有值 "_blank"。 |
[attribute^="value"] |
$('img[title^="Smiley"]') |
选择所有 <img> 元素，其 title 属性的值正好以"Smiley"字符串开头。 |
:button |
$(":button") |
选择所有带有 type="button" 的输入和按钮元素。 |
:checkbox |
$(":checkbox") |
选择所有带有 type="checkbox" 的输入元素。 |
:checked |
$(":checked") |
选择所有选中或选中的元素，适用于复选框、单选按钮和选择元素。 |
:contains() |
$('p:contains("Hello")') |
选择包含文本"Hello"的所有 <p> 元素。 |
:disabled |
$(":disabled") |
选择所有被禁用的元素。 |
:empty |
$("td:empty") |
选择所有空的 <td> 元素，即没有包含文本的子元素。 |
:enabled |
$(":enabled") |
选择所有启用的元素。 |
:eq() |
$("tr:eq(1)") |
选择匹配集中的第二个 <tr> 元素，从零开始的索引。 |
:even |
$("tr:even") |
选择所有偶数 <tr> 元素，索引为零。 |
:file |
$(":file") |
选择所有带有 type="file" 的输入元素。 |
:first-child |
$("p:first-child") |
选择作为其父元素的第一个子元素的所有 <p> 元素。 |
:first-of-type |
$("p:first-of-type") |
选择作为其父元素的第一个 <p> 元素的所有 <p> 元素。 |
:first |
$("p:first") |
选择第一个 <p> 元素。 |
:focus |
$(":focus") |
如果元素当前处于焦点，则选择它。 |
:gt() |
$("ul li:gt(3)") |
选择匹配集中索引大于 3 的所有 <li> 元素（即选择第 4、第 5、... 列表元素），从零开始的索引。 |
:has() |
$("p:has(img)") |
选择包含至少一个 <img> 元素的所有 <p> 元素。 |
:header |
$(":header") |
选择所有作为标题的元素，例如 <h1>、<h2>、<h3> 等。 |
:hidden |
$("p:hidden") |
选择所有隐藏的 <p> 元素。 |
:image |
$(":image") |
选择所有带有 type="image" 的输入元素。 |
:input |
$(":input") |
选择所有输入、文本区域、选择和按钮元素（基本上选择所有表单控件）。 |
:lang() |
$(":lang(en)") |
选择具有 language 语言值"en"的所有元素，即 lang="en", lang="en-us" 等。 |
:last-child |
$("p:last-child") |
选择所有 <p> 元素，它们是其父元素的最后一个子元素。 |
:last-of-type |
$("p:last-of-type") |
选择作为其父元素的最后一个 <p> 元素的所有 <p> 元素。 |
:last |
$("p:last") |
选择最后一个 <p> 元素。 |
:lt() |
$("ul li:lt(3)") |
选择匹配集中索引小于 3 的所有 <li> 元素（即选择第一个、第二个、第三个列表元素），从零开始的索引。 |
:not() |
$("p:not(:empty)") |
选择所有非空的 <p> 元素。 |
:nth-child(n) |
$("p:nth-child(3)") |
选择所有 <p> 元素，它们是其父元素的第三个子元素。 |
:nth-last-child(n) |
$("p:nth-last-child(3)") |
选择所有 <p> 元素，它们是其父元素的第三个子元素，从最后一个元素计数到第一个元素。 |
:nth-last-of-type(n) |
$("p:nth-last-of-type(2)") |
选择所有 <p> 元素，它们是其父元素的第二个子元素，从最后一个元素计数到第一个元素。 |
:nth-of-type(n) |
$("p:nth-of-type(2)") |
选择所有 <p> 元素，它们是其父元素的第二个 <p> 元素 |
:odd |
$("tr:odd") |
选择所有奇数 <tr> 元素，零索引。 |
:only-child |
$("p:only-child") |
选择所有 <p> 元素，它们是其父元素的唯一子元素。 |
:only-of-type |
$("p:only-of-type") |
选择所有 <p> 元素，这些元素没有同名的同级元素。 |
:parent |
$(":parent") |
选择具有至少一个子节点的所有元素，无论是元素还是文本。 |
:password |
$(":password") |
选择所有带有 type="password" 的输入元素。 |
:radio |
$(":radio") |
选择所有带有 type="radio" 的输入元素。 |
:reset |
$(":reset") |
使用 type="reset" 选择所有输入和按钮元素。 |
:root |
$(":root") |
选择文档的根元素，该元素始终是 HTML 文档中的 <html> 元素。 |
:selected |
$(":selected") |
选择所有被选中的元素，仅适用于 <option> 元素。 |
:submit |
$(":submit") |
使用 type="submit" 选择所有输入和按钮元素。 |
:text |
$(":text") |
选择所有带有 type="text" 的输入元素。 |
:visible |
$("p:visible") |
选择所有可见的 <p> 元素。 |
Advertisements