📚系列文章—目录🔥
猴子也能学会的jQuery第十期——jQuery元素操作（上）
猴子也能学会的jQuery第十期——jQuery元素操作（下）
猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作
猴子也能学会的jQuery第十二期——jQuery遍历（上）
猴子也能学会的jQuery第十二期——jQuery遍历（中）
猴子也能学会的jQuery第十二期——jQuery遍历（下）
🔥未完待续...
文章目录
📌回顾上期
上期讲了jQuery遍历的内容，分为上中下三个部分
- jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
🎯jQuery祖先
祖先是指父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
- 接下来介绍用于向上遍历 DOM 树的方法，分别是parent()、parents()和parentsUntil()
🧩jQuery parent()方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面通过代码演示，返回每个 <span> 元素的直接父元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> <div style="width:500px;">div (祖父元素) <p>p (父元素) <span>span</span> </p> </div> </div> </body> </html>
🧩jQuery parents()方法
- parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 （<html>）。
- 下面通过代码演示，返回所有 <span> 元素的所有祖先。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parents().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>
- 同时可以使用可选参数来过滤对祖先元素的搜索。
- 下面通过代码演示，返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素。
<!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parents("ul").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (great-great-grandparent) <div style="width:500px;">div (great-grandparent) <ul>ul (grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </div> </body> </html>
🧩jQuery parentsUntil()方法
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
- 下面通过代码演示，返回介于 <span> 与 <div> 元素之间的所有祖先元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>
🎯jQuery后代
- 后代是子、孙、曾孙等等。
- 通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
- 接下来介绍用于向下遍历DOM树的jQuery方法，分别是children()方法和find()方法。
🧩jQuery children()方法
- children() 方法返回被选元素的所有直接子元素。
- 该方法只会向下一级对 DOM 树进行遍历。
- 下面代码演示，返回每个 <div> 元素的所有直接子元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (儿子元素) <span>span (孙子元素)</span> </p> <p>p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>
- 同时也可以使用可选参数来过滤对子元素的搜索。
- 下面通过代码演示，返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").children("p.1").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p class="1">p (儿子元素) <span>span (孙子元素)</span> </p> <p class="2">p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>
🧩jQuery find()方法
- find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
- 下面通过代码演示，返回属于 <div> 后代的所有 <span> 元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (儿子元素) <span>span (孙子元素)</span> </p> <p>p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>
- 同时也可以使用"*"返回所有后代
- 下面通过代码演示，返回 <div> 的所有后代。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").find("*").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (儿子元素) <span>span (孙子元素)</span> </p> <p>p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>
📚持续更新🔥
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
