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");//同级下非指定元素选定，遇到则停止