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、过滤
web前端学习（五）（8）-- jQuery元素遍历
原文地址：https://www.cnblogs.com/foreverlin/p/10122873.html