首页 > 代码库 > 第九节（jQuery的遍历、祖先、后代、同胞、过滤）
第九节（jQuery的遍历、祖先、后代、同胞、过滤）
通过 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=http://www.mamicode.com/"找爸爸" id="parent"/> <input type="button" value=http://www.mamicode.com/"找祖祖" id="parents"/> <input type="button" value=http://www.mamicode.com/"parentsUntil" id="parentsUntil"/> <script type="text/javascript" src=http://www.mamicode.com/"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=http://www.mamicode.com/"children" id="children"/><script type="text/javascript" src=http://www.mamicode.com/"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=http://www.mamicode.com/"siblings" id="siblings"/> <input type="button" value=http://www.mamicode.com/"next" id="next"/> <input type="button" value=http://www.mamicode.com/"nextAll" id="nextAll"/> <input type="button" value=http://www.mamicode.com/"nextUntil" id="nextUntil"/><script type="text/javascript" src=http://www.mamicode.com/"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=http://www.mamicode.com/"first" id="first"/> <input type="button" value=http://www.mamicode.com/"last" id="last"/> <input type="button" value=http://www.mamicode.com/"eq" id="eq"/> <input type="button" value=http://www.mamicode.com/"filter" id="filter"/> <input type="button" value=http://www.mamicode.com/"not" id="not"/><script type="text/javascript" src=http://www.mamicode.com/"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>
第九节（jQuery的遍历、祖先、后代、同胞、过滤）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。