一、jQuery的向下遍歷
<script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"></head><body><div id="div1"> <div id="div2"> <p id="p1"> <a>hello world</a> </p> </div></div>#div1{ width:500px; height:200px; border:3px solid coral;}#div2{ width:400px; height:150px; margin-top:10px; margin-left:10px; border: 3px solid coral;}#p1{ margin-left:10px; margin-top:10px; width:150px; height:80px; border:3px solid coral;}1.children()方法的元素遍歷
$(document).ready( function (){ $("#div1").children().css({border:"3px solid black"});});可以看到此時div1的兒子div2的邊框顏色變成了黑色。
2.find()方法的元素遍歷
$(document).ready( function (){ $("#div1").find("a").css({border:"3px solid grey"});});可以看到此時div1的重孫子a元素出現了灰色邊框。、
.children()與.find()方法的區別是:children只能對元素的兒子元素進行修改，而find則可以對其所有的子元素進行修改。
二、jQuery的向上遍歷
顧名思義，向上遍歷就是從子集找到父集。
.parent()$(document).ready( function (){ $("#div2").parent().css({border:"3px solid black"}); });div2的父元素div1邊框發生了改變
.parents()$(document).ready( function (){ $("a").parents().css({border:"3px solid grey"});});a元素除外，a元素的所有父級元素都發生了改變
.parentUntil()$(document).ready( function (){ $("a").parentsUntil("#div1").css({border:"3px solid grey"})});從a元素到div1元素之前的元素邊框發生了改變。
三個方法的區別是，.parent()只能向上遍歷一層；.parents()則可以指定父級元素的id進行跨越遍歷；.parentUntil()則具有區間性質，將會遍歷包含于區間中的所有元素。
三、遍歷 - 同級（兄弟）
同級元素擁有相同的父級元素。
在 DOM 樹中水平遍歷。
有許多有用的方法讓我們在 DOM 樹進行水平遍歷：
1.JQuery siblings()
siblings() 方法返回被選元素的所有同胞元素。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 獲取h1標簽的所有同級元素 var elem = $('h1').siblings(); console.log(elem); // p p });2.JQuery next()
next() 方法返回被選元素的下一個同胞元素
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 獲取h1標簽的下一個同級元素 var elem = $('h1').next(); console.log(elem); // p});3.JQuery nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section>
$(document).ready(function () { // 獲取p標簽的后面的所有同級元素 var elem = $('p').nextAll(); console.log(elem); // p});4.JQuery nextUntil()
nextUntil() 方法返回介于兩個給定參數之間的所有跟隨的同胞元素。
<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p> <h2>重點注意</h2></section>
$(document).ready(function () { // 獲取 var elem = $('h1').nextUntil('h2'); console.log(elem); // p p });5.JQuery prev() & prevAll() & prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同級元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）。
新聞熱點
疑難解答
