JQuery选择器大全
1. 基本选择器
选择器 | 描述 | 返回 | 示例 |
#id | 单个元素 | $("#test") | |
.class | 集合元素 | $(".test") | |
element | 集合元素 | $("p") | |
* | 匹配所有元素 | 集合元素 | $("*") |
selector1,selector2 | 集合元素 | $("div,span,p") |
2. 层次选择器
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取所有后代 | 集合元素 | $("div span") |
$("parent>child") | 选取直接后代 | 集合元素 | $("div.span") |
$("prev+next") | 选取紧接在prev元素后的next元素 | 单个元素 | $(".one+div") |
$("prev~siblings") | 选取紧接在prev元素后的所siblings元素 | 集合元素 | $(".one~div") |
3. 过滤选择器
(1)基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 单个元素 | $("div:first") | |
:last | 单个元素 | $("div:last") | |
:not(selector) | 集合元素 | $("input:not(.myclass)") | |
:even | 索引从0开始 | 集合元素 | $("input:even") |
:odd |
集合元素 | $("input:odd") | |
:eq(index) | 单个元素 | $("input:eq(1)") | |
:gt(index) | 集合元素 | $("input:gt(1)") | |
:lt(index) | 集合元素 | $("input:lt(1)") | |
:header | 选取所有的标题元素 | 集合元素 | $(":header") |
:animated | 选取当前正在执行动画的元素 | 集合元素 | $(":animated") |
:focus | 选取当前获取焦点的元素 | 单个元素 | $(":focus") |
(2)内容过滤选择器
选择器 | 描述 | 返回 | 示例 |
$(":contains(text)") | 集合元素 | $("div:contains('我')") | |
$(":empty") | 选取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty") |
$(":has(selector)") | 集合元素 | $("div:has(p)") | |
$(":parent") | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent") |
(3)可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
:visible | 选取所有可见元素 | 集合元素 | $("div:visible") |
(4)属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]") |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[title=test]") |
[attribute!=value] | 集合元素 | $("div[title!=test]") | |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $("div[title^=test]") |
[attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=test]") |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=test]") |
[attribute|=value] |
选取属性等于给定字符串或以该字 符串为前缀(该字符串后跟一个连字 "-")的元素 |
集合元素 | $("div[title|='en']") |
[attribute~=value] |
选取属性用空格分隔的值中包含一个 给定值的元素 |
集合元素 | $("div[title~='en']") |
[attribute1][attribute2] [attributeN] |
用属性选择器合并成一个复合属性选 择器,满足多个条件。每选择一次, 缩小一次范围 |
集合元素 | $("div[id][title$='test']") |
(5)子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even/ odd/equation) |
选取每个父元素下的第index 个子元素或者奇偶元素(index 从1算起) |
集合元素 |
$("ul li:nth-child(even)") $("ul li:nth-child(2)") $("ul li:nth-child(3n)") |
:first-child | 选取每个父元素的第一个元素 | 集合元素 | $("ul li:first-child") |
:last-child | 选取每个父元素的最后一个元素 | 集合元素 | $("ul li:last-child") |
:only-child |
如果某个元素是它父元素中唯一的 子元素,那么将会被匹配。如果父元 素含有其它元素,则不会匹配 |
集合元素 | $("ul li:only-child") |
(6)表单对象过滤选择器
选择器 | 描述 | 返回 | 示例 |
:enabled | 选取所有可用的元素 | 集合元素 | $("#form1:enabled") |
:disabled | 选取所有不可用的元素 | 集合元素 | $("#form2:disabled") |
:checked |
选取所有被选中的元素(单选框,复选框) | 集合元素 |
$("input:checked") |
:selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected") |
4. 表单选择器
选择器 | 描述 | 返回 | 示例 |
:input |
选取所有的<input>、<textarea> <select>和<button>元素 |
集合元素 | $(":input") |
:text |
选取所有的单行文本框 |
集合元素 | $(":text") |
:password |
选取所有的密码框 |
集合元素 | $(":password") |
:radio |
选取所有的单选框 |
集合元素 | $(":radio") |
:checkbox |
选取所有的多选框 |
集合元素 | $(":checkbox") |
:submit |
选取所有的提交按钮 |
集合元素 | $(":submit") |
:image |
选取所有的图像按钮 |
集合元素 | $(":image") |
:reset |
选取所有的重置按钮 |
集合元素 | $(":reset") |
:button |
选取所有的按钮 |
集合元素 | $(":button") |
:file |
选取所有的上传域 |
集合元素 | $(":file") |
:hidden |
选取所有的不可见元素 |
集合元素 | $(":hidden") |