借助jQuery我們可以輕松地堆DOM元素進行向上、向下遍歷以及同級的遍歷,本文我們即來整理jQuery遍歷DOM的父級元素、子級元素和同級元素的方法總結:
如下圖，顯示了HTML中的結構樹，通過 JQuery 遍歷，您能夠從被選（當前的）元素開始，輕松地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進行遍歷。
遍歷 - 父級（祖先）
向上遍歷DOM數。
通過如下三個方法，我們可以獲取父級元素：
parent()
parents()
parentsUntil()
1.JQuery parent()
parent() 方法返回被選元素的直接父元素。
該方法只會向上一級對 DOM 樹進行遍歷。
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>
$(document).ready(function () {
// 通過parent()函數，可獲取當前元素的直接父級元素
var elem = $('span').parent();
console.log(elem);
});
2.JQuery parents()
parents() 方法返回被選元素的所有父元素。
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>
$(document).ready(function () {
// 通過parent()函數，可獲取當前元素的所有父級元素
var elem = $('span').parents();
console.log(elem);
});
3.JQuery parentsUntil()
parentsUntil() 方法返回介于兩個給定元素之間的所有父級元素
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>
$(document).ready(function () {
// 獲取span在body標簽下的所有父級元素
var elem = $('span').parentsUntil('body');
console.log(elem);
});
遍歷 - 子級（后代）
向下遍歷DOM樹。
向下遍歷可以使用如下兩個函數：
1.children()
2.find()
1.JQuery children()
children() 方法返回被選元素的所有直接子元素。
該方法只會向下一級對 DOM 樹進行遍歷。
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>
$(document).ready(function () {
// 獲取section標簽下的所有直接子元素
var elem = $('section').children();
console.log(elem);
});
2.JQuery find()
find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>
$(document).ready(function () {
// 獲取section標簽下的所有p標簽的子元素
var elem = $('section').find('p');
console.log(elem);
// 獲取section標簽下的所有子元素
var elems = $('section').find('*');
console.log(elems);
});
遍歷 - 同級（兄弟）
有以下幾個方法：
1.sibings()
除自身外，遍歷同級的所有元素，修改適用于同級所有元素
2.next()
除自身外，僅下一個元素修改
3.nextAll()
除自身外，修改下面的所有元素
4.nextUntil()
除自身外，對下面的元素進行區間修改
5.prev()
修改上一個元素
6.preAll()
修改位于元素之上的所有元素
7.preUntil()
對位于區間之上的元素進行區間修改
<style>
.bd *{
margin:5px;
padding:3px;
border:3px solid black;
}
</style>
</head>
<body>
<div class="bd">
<p></p>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
</div>
</body>
--------------------------------------------------------------
$(document).ready(function(){
//$("h1").siblings().css({border:"3px solid red"})
//$("h4").nextAll().css({border:"4px solid grey"});
$("h2").prev().css({border:"3px solid green"});
});
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
