<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery遍历</title> <script src="../js/jquery-1.8.3.js"></script> <script src="../js/jquery-1.4.2.js"></script> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> /* * 祖先是父、祖父或曾祖父等等。 * 通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。 * * 向上遍历 DOM 树 * 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： * parent() * parents() * parentsUntil() */ $(document).ready(function(){ /* * jQuery parent() 方法 * parent() 方法返回被选元素的直接父元素。 * 该方法只会向上一级对 DOM 树进行遍历。 * 下面的例子返回每个 <span> 元素的的直接父元素： */ $("span").parent().css({ "color":"red", "border":"2px solid red" }); /* * jQuery parents() 方法 * parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。 * 下面的例子返回所有 <span> 元素的所有祖先： * 实例 */ $("span").parents().css({ "color":"red", "border":"2px solid red" }); //下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素： $("span").parents("ul").css({"color":"red","border":"2px solid red"}); /* * jQuery parentsUntil() 方法 * parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 * 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素： */ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <div style="500px;">div (曾祖父) <ul>ul (祖父) <li>li (直接父) <span>span</span> </li> </ul> </div> <div style="500px;">div (祖父) <p>p (直接父) <span>span</span> </p> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery遍历-后代</title> <script src="../js/jquery-1.8.3.js"></script> <script src="../js/jquery-1.4.2.js"></script> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script> /* * jQuery 遍历 - 后代 * 后代是子、孙、曾孙等等。 * 通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。 * 向下遍历 DOM 树 * 下面是两个用于向下遍历 DOM 树的 jQuery 方法： * children() * find() */ $(document).ready(function(){ /* * jQuery children() 方法 * children() 方法返回被选元素的所有直接子元素。 * 该方法只会向下一级对 DOM 树进行遍历。 * 下面的例子返回每个 <div> 元素的所有直接子元素： */ $("div").children().css({"color":"red","border":"2px solid red"}); /* * 您也可以使用可选参数来过滤对子元素的搜索。 * 下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素： * * $(document).ready(function(){ * $("div").children("p.1"); * }); */ /* * jQuery find() 方法 * find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。 * 下面的例子返回属于 <div> 后代的所有 <span> 元素： */ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="500px;">div (当前元素) <p>p (子) <span>span (孙)</span> </p> <p>p (child) <span>span (孙)</span> </p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery遍历-同胞</title> <script src="../js/jquery-1.8.3.js"></script> <script src="../js/jquery-1.4.2.js"></script> <script> /* * 同胞拥有相同的父元素。 * 通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素 * * 在 DOM 树中水平遍历 * 有许多有用的方法让我们在 DOM 树进行水平遍历： * siblings() * next() * nextAll() * nextUntil() * prev() * prevAll() * prevUntil() */ /* * jQuery siblings() 方法 * siblings() 方法返回被选元素的所有同胞元素。 * 下面的例子返回 <h2> 的所有同胞元素： */ $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); /* * 您也可以使用可选参数来过滤对同胞元素的搜索。 * 下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素： * * $(document).ready(function(){ * $("h2").siblings("p"); * }); */ /* * jQuery next() 方法 * next() 方法返回被选元素的下一个同胞元素。 * 该方法只返回一个元素。 * 下面的例子返回 <h2> 的下一个同胞元素： */ $("h2").next().css({"color":"red","border":"2px solid red"}); /* * jQuery nextAll() 方法 * nextAll() 方法返回被选元素的所有跟随的同胞元素。 * 下面的例子返回 <h2> 的所有跟随的同胞元素： */ $("h2").nextAll().css({"color":"red","border":"2px solid red"}); /* * jQuery nextUntil() 方法 * nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 * 下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素： */ $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"}); /* * prev(), prevAll() 以及 prevUntil() * 方法的工作方式与上面的方法类似，只不过方向相反而已： * 它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。 */ }); </script> </head> <body class="siblings"> <div>div (父) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>