1、向下遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <style> #div1{ width:500px; height:200px; border:3px solid chocolate; } #div2{ width:400px; height:150px; margin-top:10px; margin-left:10px; border:3px solid chocolate; } p{ margin-left:10px; margin-top:10px; width:150px; height:80px; border:3px solid chocolate; } </style> <script> /* * children * find * */ $(document).ready(function(){ // $("#div1").children().css({border:"3px solid red"}); // $("#div1").children("#div2").css({border:"3px solid red"});/*这两句效果是一样的*/ /*children获取节点只能获取自己的儿子，而不能获取自己孙子节点的信息*/ $("#div1").find("#p").css({border:"3px solid red"}); /*find可以查找到自己的后代元素，所有的后代都可以在查找范围内 * find方法需要带一个参数*/ }); </script> </head> <body> <div id="div1">div1 <div id="div2">div2 <p id="p">p <a href="http://www.baidu.com"> hello </a> </p> </div> </div> </body> </html>
2、向上遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <style> #div1{ width:500px; height:200px; border:3px solid chocolate; } #div2{ width:400px; height:150px; margin-top:10px; margin-left:10px; border:3px solid chocolate; } p{ margin-left:10px; margin-top:10px; width:150px; height:80px; border:3px solid chocolate; } </style> <script> /* * parent() * parents() * parentsUntil() * */ $(document).ready(function(){ // $("a").parent().css({border:"3px solid red"});/*向上的一级父元素变成这个样式*/ // $("a").parents().css({border:"3px solid red"});/*向上的所有父元素都要变成这个样式*/ $("a").parents("#div1").css({border:"3px solid red"});/*向上的某一个父元素要变成这个样式*/ // $("a").parentsUntil("#div1").css({border:"3px solid red"});/*向上的所有父元素直到div1之前的都要变为这个样式（a和div1之间的元素）*/ }); </script> </head> <body> <div id="div1">div1 <div id="div2">div2 <p id="p">p <a href="http://www.baidu.com"> hello </a> </p> </div> </div> </body> </html>
3、同级遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> /* siblings() next() nextAll() nextUntil() //until是区间的意思 prev() //下面三个是向前算的方法 prevAll() prevUntil() */ $(document).ready(function(){ // $("h4").siblings().css({border:"3px solid red"});/*修改掉除了给定元素的所有同级元素为给定的样式*/ // $("h4").next().css({border:"3px solid red"});/*修改掉除了给定元素的所有同级元素为给定的样式*/ // $("h2").nextAll("h6").css({border:"3px solid red"});/*包括h2在内的下面所有同级元素*//*这里加参数是下面所有的某一类元素，不加参数就是默认所有的同级元素*/ $("h2").nextUntil("h4").css({border:"3px solid red"});/*h2到给定的元素之间的所有元素*/ }); </script> <style> .classa *{ display:block; border:3px solid gray; color:gray; padding:5px; margin:15px; } </style> </head> <body> <div class="classa"> <p>p</p> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </div> </body> </html>
4、过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> /* * first()//寻找同样元素的第一个 * last()//寻找同样元素的最后一个 * eq() * filter() * not() * */ $(document).ready(function(){ // $("div p").first().css({backgroundColor:"red"}); /*jQuery中的backgroundColor和css中的background-color还不一样呢。。。666*/ // $("div p").first().css("background-color","red"); /*jQuery中的backgroundColor和css中的background-color还不一样呢。。。666*/ // $("div p").eq(1).css("background-color","red"); /*eq()方法指定第几个元素，索引从0开始*/ // $("div p").filter(".plei1").css("background-color","red");/*选中满足要求的*/ $("div p").not(".plei1").css("background-color","red");/*过滤给定要求的*/ }); </script> <style> </style> </head> <body> <div> <p class="plei1">div1的p</p> </div> <div> <p>div2的p</p> </div> <div> <p class="plei1">div3的p</p> </div> <div> <p>div3的p</p> </div> </body> </html>