极客教程jQuery 选择器参考
jQuery 选择器参考
以下是所有 jQuery 选择器 的综合列表：
| 选择器 | 示例 | 描述 |
|---|---|---|
* |
$("*") |
这被称为通用选择器，用于选择所有元素。 |
# id |
$("#foo") |
它将选择id为”foo”的元素。 |
.class |
$(".foo") |
它将选择所有class为”foo”的元素。 |
class,.class |
$(“.foo,.bar”) | 它将选择所有class为”foo”或”bar”的元素。 |
element |
$(“p”) | 它将选择所有p元素。 |
el1,el2,el3 |
$(“h1,div,p”) | 它将选择所有h1、div和p元素。 |
:last |
$(“p:last”) | 这将选择最后一个p元素 |
:even |
$(“tr:even”) | 这将选择所有偶数项的tr元素 |
:odd |
$(“tr:odd”) | 这将选择所有奇数项的tr元素 |
:first-child |
$(“p:first-child”) | 这将选择所有作为其父元素的第一个子元素的p元素 |
:first-of-type |
$(“p:first-of-type”) | 这将选择所有作为其父元素的第一个p元素的p元素 |
:last-child |
$(“p:last-child”) | 它将选择所有是其父元素的最后一个子元素的p元素 |
:last-of-type |
$(“p:last-of-type”) | 它将选择所有是其父元素的最后一个p元素的p元素 |
:nth-child(n) |
$(“p:nth-child(3)”) | 这将选择所有是其父元素的第3个子元素的p元素 |
:nth-last-child(n) |
$(“p:nth-last-child(3)”) | 这将选择所有是其父元素的倒数第3个子元素的p元素 |
:nth-of-type(n) |
$(“p:nth-of-type(3)”) | 它将选择所有是其父元素的第3个p元素的p元素 |
:nth-last-of-type(n) |
$(“p:nth-last-of-type(3)”) | 这将选择所有p元素，它们在其父元素中是第3个p元素，从最后一个子元素开始计数 |
:only-child |
$(“p:only-child”) | 它将选择所有p元素，它们是其父元素的唯一子元素 |
:only-of-type |
$(“p:only-of-type”) | 它将选择所有p元素，它们是其父元素中唯一的同类型子元素 |
parent > child |
$(“div > p”) | 它将选择所有p元素，它们是div元素的直接子元素 |
parent descendant |
$(“div p”) | 它将选择所有p元素，它们是div元素的后代元素 |
element + next |
$(“div + p”) | 选择所有紧邻div元素的p元素 |
element ~ siblings |
$(“div ~ p”) | 选择所有div元素的兄弟p元素 |
:eq(index) |
$(“ul li:eq(3)”) | 选择列表中的第四个元素（索引从0开始） |
:gt(no) |
$(“ul li:gt(2)”) | 选择列表中索引大于2的元素 |
:lt(no) |
$(“ul li:lt(2)”) | 选择列表中索引小于2的元素 |
:not(selector) |
$(“input:not(:empty)”) | 选择所有非空的input元素 |
:header |
$(“:header”) | 选择所有标题元素 h1，h2 … |
:animated |
$(“:animated”) | 选择所有动画元素 |
:focus |
$(“:focus”) | 选择当前焦点元素 |
:contains(text) |
$(“:contains(‘Foo’)”) | 选择所有包含文本 “Foo” 的元素 |
:has(selector) |
$(“div:has(p)”) | 选择所有包含 p 元素的 div 元素 |
:empty |
$(“:empty”) | 选择所有空元素 |
:parent |
$(“:parent”) | 选择所有具有子元素的元素 选择所有作为其他元素的父元素的元素 |
:hidden |
$(“p:hidden”) | 选择所有隐藏的 p 元素 |
:visible |
$(“table:visible”) | 选择所有可见的表格元素 |
:root |
$(“:root”) | 选择文档的根元素 |
:lang(language) |
$(“p:lang(de)”) | 选择所有带有 lang 属性值以 “de” 开头的 p 元素 |
[attribute] |
$(“[href]”) | 选择所有带有 href 属性的元素 |
[attribute=value] |
$("[href='index.htm']") |
选择所有 href 属性值等于 “index.htm” 的元素 |
[attribute！=value] |
$("[href!='index.htm']") |
它将选择所有具有 “href” 属性值不等于 “index.htm” 的元素 |
[attribute$=value] |
$("[href$='.jpg']") |
它将选择所有具有以 “.jpg” 结尾的 “href” 属性值的元素 |
[attribute|=value] |
$("[title|='Tomorrow']") |
选择所有具有 title 属性值等于 ‘Tomorrow’ 或以 ‘Tomorrow-‘ 开头的元素。 |
[attribute^=value] |
$("[title^='Tom']") |
选择所有具有以 “Tom” 开头的 ‘title’ 属性值的元素 |
[attribute~=value] |
$("[title~='foo']") |
选择所有具有标题属性值包含特定单词”foo”的元素。 |
[attribute*=value] |
$("[title*='foo']") |
选择所有具有标题属性值包含单词”foo”的元素 |
:input |
$(":input") |
选择所有输入元素 |
:text |
$(":text") |
选择所有类型为”text”的输入元素 |
:password |
$(":password") |
选择所有类型为”password”的输入元素 |
:radio |
$(":radio") |
选择所有类型为”radio”的输入元素 |
:checkbox |
$(":checkbox") |
选择所有类型为”checkbox”的输入元素 |
:submit |
$(“:submit”) | 它将选择所有 type="submit" 的输入元素 |
:reset |
$(“:reset”) | 它将选择所有 type="reset" 的输入元素 |
:button |
$(“:button”) | 它将选择所有按钮元素和 type="button" 的输入元素 |
:image |
$(“:image”) | 它将选择所有 type="image" 的输入元素 |
$(":checkbox") |
$(“:checkbox”) | 它将选择所有type=”checkbox”的input元素 |
:submit |
$(“:submit”) | 它将选择所有type=”submit”的input元素 |
:reset |
$(“:reset”) | 它将选择所有type=”reset”的input元素 |
:button |
$(“:button”) | 它将选择所有type=”button”的input元素 |
:image |
$(“:image”) | 它将选择所有type=”image”的input元素 |
:file |
$(“:file”) | 它将选择所有type=”file”的input元素 |
:enabled |
$(“:enabled”) | 选择所有启用的输入元素 |
:disabled |
$(“:disabled”) | 选择所有禁用的输入元素 |
:selected |
$(“:selected”) | 选择所有选中的输入元素 |
:checked |
$(“:checked”) | 选择所有已选中的输入元素 |