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]") |