第九节（jQuery的遍历、祖先、后代、同胞、过滤）

浏览数：26 / 时间：2015年06月09日

  通过 jQuery 遍历 DOM 树
  
parent()  方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
parents()  方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil()  方法返回介于两个给定元素之间的所有祖先元素


<style type="text/css">
            *{margin:0;padding:0;}
            .parent{width:600px;height:300px;}
            .parent ul li{list-style:none;}
            .parent,ul,li,p{border:1px solid green;padding:5px;margin:10px;}

</style>

<body>

    <div class="parent">(太爷)
        <ul class="p_ul">(爷爷)
            <li>(父亲)
                <p>子</p>
            </li>
            <li></li>
        </ul>
    </div>

    <input type="button" value="找爸爸" id="parent"/>
    <input type="button" value="找祖祖" id="parents"/>

    <input type="button" value="parentsUntil" id="parentsUntil"/>
    


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    
    $(function(){
        //    alert("亲爱的同学们，我爱你们 !");
        
        // parent()  方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
        
        // $("p").css({ "color": "#ff0011", "background": "blue" });

        $("#parent").click(function(){
            $("p").parent().css({"color":"red","border":"3px solid red"});
        });
    /*
            function clickMe(){
                $("p").parent().css({"color":"red","border":"3px solid red"});
            }
    */

        // parents()  方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
        $("#parents").click(function(){
            $("p").parents(".p_ul").html("大家好，太帅了！");
        });


        //  parentsUntil()  方法返回介于两个给定元素之间的所有祖先元素
        $("#parentsUntil").click(function(){
            $("p").parentsUntil(".p_ul").css("background","#690");

        });
        

    });

</script>

</body>

   
  通过 jQuery，向下遍历 DOM 树，以查找元素的后代
   children() 方法返回被选元素的所有直接子元素 ，该方法只会向下一级对 DOM 树进行遍历
   find()  方法返回被选元素的后代元素，一路向下直到最后一个后代 ， 


<style type="text/css">
            *{margin:0;padding:0;}
            .parent{width:600px;height:300px;}
            .parent ul li{list-style:none;}
            .parent,ul,li,p{border:1px solid green;padding:5px;margin:10px;}

</style>

<body>

    <div class="parent">(太爷)
        <div class="par"> par
            <ul class="p_ul">(爷爷)
                <li>(父亲)
                    <p class="p_p">子</p>
                </li>
                <li>另一个li标签</li>
            </ul>
        </div>
    </div>

    <input type="button" value="children" id="children"/>



<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    
    $("#children").click(function(){

        //  children() 方法返回被选元素的所有直接子元素 ，该方法只会向下一级对 DOM 树进行遍历

        //$(".parent").children().css("background","#690");
        //$("div").children("ul").css("border","3px green solid");

        // $(".parent").children(".par").css({"background":"green","color":"#fff"});
         
        // find()  方法返回被选元素的后代元素，一路向下直到最后一个后代 

        $(".parent").find("li").eq(1).css("background","red");


    });


</script>
</body>

 同胞拥有相同的父元素，能够在 DOM 树中遍历元素的同胞元素

 在 DOM 树中水平遍历


siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素 ， 该方法只返回一个元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil()  方法返回介于两个给定参数之间的所有跟随的同胞元素
prev() ， prevAll() ， prevUntil()   方法的工作方式与上面的方法类似，只不过方向相反而已：
它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）



<style type="text/css">
            *{margin:0;padding:0;}
            .parent{width:600px;}
            .parent .p_ul{border:3px solid red;}
            .parent ul li{list-style:none;}
            .parent,ul,li,p,div{border:1px solid green;padding:5px;margin:10px;}

</style>


<body>

    <div class="parent">(太爷)
        <div class="par"> par
            <ul class="p_ul">(爷爷) ul
                <li class="p_li">(父亲) li
                    <p class="p_p">子 p</p> 
                </li>
                <li>另一个li标签</li>
            </ul>
            <p id="one">我是一个p标签</p>
            <p>我是一个p标签</p>
            <div>我是一个div标签</div>
            <p id="end">由于需要，我又写了一个p标签</p>
        </div>
    </div>

    <input type="button" value="siblings" id="siblings"/>
    <input type="button" value="next" id="next"/>
    <input type="button" value="nextAll" id="nextAll"/>
    <input type="button" value="nextUntil" id="nextUntil"/>



<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    
    // siblings()方法返回被选元素的所有同胞元素
    $("#siblings").click(function(){
        // $(".p_ul").siblings("p").css("background","red");
        $(".p_ul").siblings("p").hide();
    });

    // next()方法返回被选元素的下一个同胞元素 ， 该方法只返回一个元素
    $("#next").click(function(){
        $(".p_ul").next("p").css("background","red");
    });
    
    // nextAll()方法返回被选元素的所有跟随的同胞元素
    $("#nextAll").click(function(){
        $(".p_ul").nextAll().css("background","red");
    });

    // nextUntil()  查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
    $("#nextUntil").click(function(){
        $("#one").nextUntil("#end").css("background","red");
    });


</script>

</body>

  缩写搜索元素的范围

 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法

 比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素
  first() 方法返回被选元素的首个元素
  last() 方法返回被选元素的最后一个元素
  eq() 方法返回被选元素中带有指定索引号的元素
  filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
  not() 方法返回不匹配标准的所有元素


<style type="text/css">
            *{margin:0;padding:0;}
            .parent{width:600px;}
            .parent .p_ul{border:3px solid red;}
            .parent ul li{list-style:none;}
            .parent,ul,li,p,div{border:1px solid green;padding:5px;margin:10px;}
</style>


<body>

    <div class="parent">(太爷)
        <div class="par"> par
            <ul class="p_ul">(爷爷) ul
                <li class="p_li">(父亲) li
                    <p class="p_p">子 p</p> 
                </li>
                <li>另一个li标签</li>
                <li>我是第三个li标签</li>
            </ul>
            <p id="one">我是一个p标签 one</p>
            <p>我是一个p标签</p>
            <div>我是一个div标签</div>
            <p id="end">由于需要，我又写了一个p标签</p>
        </div>
    </div>

    <input type="button" value="first" id="first"/>
    <input type="button" value="last" id="last"/>
    <input type="button" value="eq" id="eq"/>
    <input type="button" value="filter" id="filter"/>
    <input type="button" value="not" id="not"/>





<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    
    $("#first").click(function(){
        //   first() 方法返回被选元素的首个元素
        $(".p_ul").find("li").first().css("background","red");
    });

    $("#last").click(function(){
        //   last() 方法返回被选元素的最后一个元素
        $(".p_ul").find("li").last().css("background","green");
    });

    //  eq() 方法返回被选元素中带有指定索引号的元素
    $("#eq").click(function(){
        $(".p_ul").find("li").eq(-1).css("background","green");
    });    

    //  filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
    $("#filter").click(function(){
        //$("p").filter("#one").css("background","yellow");
        $("p").filter("#one, :last").css("background","yellow");

    });    

    // 从p元素中删除带有 one 的ID的元素
    $("#not").click(function(){
        $("p").not("#one").css("background","yellow");
    });    

</script>

</body>