首页 > 代码库 > JQuery选择器大全

JQuery选择器大全

2024-07-08 15:10:02   229人阅读

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

 

 

 

 

 


联系
我们