jQuery_2_常规选择器-高级选择器

高级选择器

层次选择器

1. 后代选择器 $("#d1 p") 获取追溯到的多个DOM对象 （无论儿子还是孙子都是后代）

2. 子选择器 $("#d1>p") 只获取子类节点的多个DOM对象 （只是儿子）

3. next选择器 $("#d1+p") 只获取某节点后同一个级别的DOM对象 （这里的p是紧跟的,如果中间还有别的标签，则 无用）

4. nextAll选择器 $("#d1~p") 获取某节点后面所有同级DOM对象

<div id="d1">
<p>p</p>
<p>p</p>
<p>p</p>
<div id="d2">
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</div>

#d1>p{
color:red;
}

#d1+p{
color:red;
}

#d1~p{
color:red;
}

$("#d1 p").css("color", "red"); //后代选择器，无论儿子还是孙子都是后代
$("#d1").find("p").css("color", "blue");//find等价于后代选择器

$("#d1>p").css("color", "green");//子选择器
$("#d1").children("p").css("color", "orange")//为子选择器提供了一个等价children()方法

$("#d1+p").css("color", "blue");//next选择器
$("#d1").next("p").css("color", "blue");//为next选择器提供了一个等价的next()方法

$("#d1~p").css("color", "blue");//nextAll选择器
$("#d1").nextAll("p").css("color", "yellow");//为nextAll选择器提供了一个等价的nextAll()方法

层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次是无法选取到的。

选择器方法不传参，就相当于传递了“*”号

$("#d1").next().css("color", "green");//next()等选择器不传参，就相当于传递了*号
//如果*在某个环境里有所浪费，建议尽量不去使用

CSS不能实现的选择器，下面是jQuery提供的方法

<p>p</p>
<p>p</p>
<p>p1</p>
<strong>s</strong>
<div id="d1">div<p>p2</p></div>
<strong>s</strong>
<p>p3</p>
<strong>s</strong>
<p>p</p>
<p>p</p>

$("#d1").prev("p").css("color", "red"); //同级上一个元素
$("#d1").prevAll("p").css("color", "red");//同级所以上面的元素

$("#d1").preAll("P").css("color", "red");
$("#d1").nextAll("P").css("color", "red");
$("#d1").preAll("P").nextAll("P").css("color", "red");//错误形式，不能连缀
$("#d1").siblings("p").css("color", "red");//同级上下所以元素

$("#d1").preUntil("p").css("color", "red"); //同级上非指定元素选定，遇到则停止
$("#d1").nextUntil("p").css("color", "red");//同级下非指定元素选定，遇到则停止