jQuery选择器

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")//当前标签的同级兄弟标签(上下的兄弟标签)

原文地址:https://www.cnblogs.com/hhqdsj/p/13294886.html