jQuery遍历(1)
生活随笔
收集整理的這篇文章主要介紹了
jQuery遍历(1)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery 遍歷，意為“移動”，用于根據其相對于其他元素的關系來“查找”(或選取)HTML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。
圖示解釋：
舉例：
jQuery parent() 方法
parent() 方法返回被選元素的直接父元素。該方法只會向上一級對 DOM 樹進行遍歷。
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-8">5 <style>6 .ancestors *{ 7 display: block;8 border: 2px solid lightgrey;9 color: lightgrey; 10 padding: 5px; 11 margin: 15px; 12 } 13 </style> 14 <script src="jquery-1.12.0.min.js"> 15 </script> 16 <script> 17 $(document).ready(function(){ 18 $("li").parent().css({ 19 "color":"red", 20 "border":"1px solid green" 21 }) 22 }); 23 </script> 24 </head> 25 <body> 26 27 <div class="ancestors"> 28 <div style="width:500px;">div (曾祖父元素) 29 <ul>ul (祖父元素,li的父元素) 30 <li>li (父元素) 31 <span>span</span> 32 </li> 33 </ul> 34 </div> 35 36 <div style="width:500px;">div (祖父元素) 37 <p>p (父元素) 38 <span>span</span> 39 </p> 40 </div> 41 </div> 42 </body> 43 </html>jQuery parents() 方法
parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。
-------------------------------------------------------------------- 注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 --------------------------------------------------------------------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="jquery-1.12.0.min.js"> 16 </script> 17 <script> 18 $(document).ready(function(){ 19 $("li").parents('div').css({ 20 "color":"red", 21 "border":"1px solid green" 22 }) 23 }); 24 </script> 25 </head> 26 <body> 27 28 <div class="ancestors"> 29 <div style="width:500px;">div (曾祖父元素) 30 <ul>ul (祖父元素,li的父元素) 31 <li>li (父元素) 32 <span>span</span> 33 </li> 34 </ul> 35 </div> 36 37 <div style="width:500px;">div (祖父元素) 38 <p>p (父元素) 39 <span>span</span> 40 </p> 41 </div> 42 </div> 43 </body> 44 </html>jQuery 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> 16 $(document).ready(function(){ 17 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); 18 }); 19 </script> 20 </head> 21 <body class="ancestors"> body (曾曾祖父元素) 22 <div style="width:500px;">div (曾祖父元素) 23 <ul>ul (祖父元素) 24 <li>li (父元素) 25 <span>span</span> 26 </li> 27 </ul> 28 </div> 29 </body> 30 </html>jQuery children() 方法
children() 方法返回被選元素的所有直接子元素。
該方法只會向下一級對 DOM 樹進行遍歷。
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="jquery-1.12.0.min.js"></script> 16 <script> 17 $(document).ready(function(){ 18 $("li").children().css({"color":"red","border":"2px solid red"}); 19 }); 20 </script> 21 </head> 22 <body class="ancestors"> body (曾曾祖父元素) 23 <div style="width:500px;">div (曾祖父元素) 24 <ul>ul (祖父元素) 25 <li>li (父元素) 26 <span>span</span> 27 </li> 28 </ul> 29 </div> 30 </body> 31 </html>Query find() 方法
find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。
<!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="jquery-1.12.0.min.js"></script> <script>$(document).ready(function(){$("div").find('li').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遍历(1)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery效果之滑动
- 下一篇： weblogic10数据源(连接池)配置