1、基本选择器
$(
"*"
)
$(
"#id"
)
$(
".class"
)
$(
"element"
)
$(
".class,p,div"
)
2、层级选择器
$(
".outer div"
)
$(
".outer>div"
)
$(
".outer+div"
)
$(
".outer~div"
)
3、基本筛选器
$(
"li:first"
)
$(
"li:eq(2)"
)
$(
"li:even"
)
$(
"li:gt(1)"
)
4、属性选择器
$(
'[id="div1"]'
)
$(
'["shuxing="zs"][id]'
)
5、表单选择器
$(
":text"
)
相当于
$(
"[type='text']")
注意只适用于input标签
6、筛选器
6.1、过滤筛选器
$(
"li"
).eq(2)
$(
"li"
).first()
$(
"ul li"
).hasclass(
"test"
)
6.2、 查找筛选器
例子:
<div class="outer">outer
<div class="centre">centre
<div class="interior">interior
<p>interior--pppp</p>
</div>
<p class="p1">centre--ppp111</p>
<p class="p2">centre--ppp222</p>
<p class="p3">centre--ppp333</p>
</div>
<span>span</span>
</div>
$(".centre").children("p").css("color","red") //子代筛选器
$(".centre").find("p").css("color","red")//后代筛选器
$(".interior").next().css("color","red")//当前标签的下一个同级标签
$(".interior").nextAll().css("color","red")//当前标签的下所有同级标签
$(".interior").nextUntil(".p3").css("color","red")//当前标签的下区间内(前闭后开区间)的同级标签
$(".p2").prev().css("color","red")//当前标签的上一个同级标签
$(".p2").prevAll().css("color","red")//当前标签的上面所有同级标签
$(".p2").prevUntil(".interior").css("color","red")//当前标签的上面区间内(前闭后开区间)的同级标签
$(".p2").parent().css("color","red")//当前标签的父标签
$(".p2").parents().css("color","red")//当前标签的所有父级标签(所有祖宗标签全选)
$(".p2").parentsUntil(".outer").css("color","red")//当前标签的区间内的所有父级标签(区间内的祖宗标签全选)
$(".p2").siblings().css("color","red")//当前标签的同级兄弟标签(上下的兄弟标签)