jQuery 遍歷
阿新 • • 發佈：2020-09-14
什麼是遍歷？
就是對DOM進行操作
圖示解析：
- <div> 元素是 <ul> 的父元素，同時是其中所有內容的祖先。
- <ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素
- 左邊的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同時是 <div> 的後代。
- <span> 元素是 <li> 的子元素，同時是 <ul> 和 <div> 的後代。
- 兩個 <li> 元素是同胞（擁有相同的父元素）。
- 右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div> 的後代。
- <b> 元素是右邊的 <li> 的子元素，同時是 <ul> 和 <div> 的後代。
jQuery 遍歷 -祖先
有三個方法
- parent(): parent() 方法返回被選元素的直接父元素。該方法只會向上一級對 DOM 樹進行遍歷。
- parents(): parents() 方法返回被選元素的所有祖先元素，它一路向上直到文件的根元素 (<html>)。
- parentsUntil():parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .ancestors * 7 { 8 display: block; 9 border: 2px solid lightgrey; 10 color: lightgrey; 11 padding: 5px; 12 margin: 15px; 13 } 14 </style> 15 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 16 </script> 17 <script> 18 $(document).ready(function(){ 19 $("span").parent().css({"color":"red","border":"2px solid red"}); 20 }); 21 </script> 22 </head> 23 <body> 24 25 <div class="ancestors"> 26 <div style="width:500px;">div (曾祖父元素) 27 <ul>ul (祖父元素) 28 <li>li (父元素) 29 <span>span</span> 30 </li> 31 </ul> 32 </div> 33 34 <div style="width:500px;">div (祖父元素) 35 <p>p (父元素) 36 <span>span</span> 37 </p> 38 </div> 39 </div> 40 41 </body> 42 </html>
$(document).ready(function(){
$("span").parents();
});
$(document).ready(function(){
$("span").parents("ul");
});
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery 遍歷 -後代
- children()children() 方法返回被選元素的所有直接子元素。
- find()find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
$(document).ready(function(){
$("div").children();
});
$(document).ready(function(){
$("div").children("p.1");
});
$(document).ready(function(){
$("div").find("span");
});
$(document).ready(function(){
$("div").find("*");
});