JQuery筆記四 ：遍歷獲取內容【藍鷗HTML5出品】
【HTML5教程】微信小程式全方位深度解析CSDN學院觀看地址：http://edu.csdn.NET/lecturer/992
學習是一個枯燥的過程，但能把枯燥的東西變成可以傳播可以帶來別人快樂的就是一件小確幸。
根據一個元素以及和這個元素之間的關係，來查詢到另外的元素。
如下圖，顯示了HTML中的結構樹，通過 JQuery 遍歷，您能夠從被選(當前的)元素開始，輕鬆地在家族樹中向上移動(祖先)，向下移動(子孫)，水平移動(同胞)。
這種移動被稱為對 DOM 進行遍歷。
遍歷 - 父級(祖先)
向上遍歷DOM數
通過如下三個方法，我們可以獲取父級元素
• parent()
• parents()
• parentsUntil()
JQuery parent()
parent() 方法返回被選元素的直接父元素。
該方法只會向上一級對 DOM 樹進行遍歷。
HTML程式碼：<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section> JQ程式碼： $(document).ready(function () { // 通過parent()函式，可獲取當前元素的直接父級元素 var elem = $('span').parent(); console.log(elem); }); JQuery parents() parents() 方法返回被選元素的所有父元素。 HTML程式碼：<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section> JQ程式碼： $(document).ready(function () { // 通過parent()函式，可獲取當前元素的所有父級元素 var elem = $('span').parents(); console.log(elem); });
JQuery parentsUntil()
parentsUntil() 方法返回介於兩個給定元素之間的所有父級元素
HTML程式碼：<section> <h1>文章的<span>標題</span>啦</h1> <p>文章的內容內容內容內容內容內容</p> <p>結尾部分</p></section> JQ程式碼： $(document).ready(function () { // 獲取span在body標籤下的所有父級元素 var elem = $('span').parentsUntil('body'); console.log(elem); });
遍歷 - 子級(後代)
向下遍歷DOM樹
向下遍歷可以使用如下兩個函式：
• children()
• find()
JQuery children()
children() 方法返回被選元素的所有直接子元素。
該方法只會向下一級對 DOM 樹進行遍歷。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p></section>
JQ程式碼：
$(document).ready(function () {
// 獲取section標籤下的所有直接子元素
var elem = $('section').children();
console.log(elem);
});JQuery find()
find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
HTML程式碼：
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>
JQ程式碼：
$(document).ready(function () {
// 獲取section標籤下的所有p標籤的子元素
var elem = $('section').find('p');
console.log(elem);
// 獲取section標籤下的所有子元素
var elems = $('section').find('*');
console.log(elems);
});遍歷 - 同級(兄弟)
同級元素擁有相同的父級元素
在 DOM 樹中水平遍歷
有許多有用的方法讓我們在 DOM 樹進行水平遍歷：
• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()
JQuery siblings()
siblings() 方法返回被選元素的所有同胞元素。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p></section>
JQ程式碼：
$(document).ready(function () {
// 獲取h1標籤的所有同級元素
var elem = $('h1').siblings();
console.log(elem); // p p
});JQuery next()
next() 方法返回被選元素的下一個同胞元素
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p></section>
JQ程式碼：
$(document).ready(function () {
// 獲取h1標籤的下一個同級元素
var elem = $('h1').next();
console.log(elem); // p
});JQuery nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p></section>
JQ程式碼：
$(document).ready(function () {
// 獲取p標籤的後面的所有同級元素
var elem = $('p').nextAll();
console.log(elem); // p
});JQuery nextUntil()
nextUntil() 方法返回介於兩個給定引數之間的所有跟隨的同胞元素。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
<h2>重點注意</h2></section>
JQ程式碼：
$(document).ready(function () {
// 獲取
var elem = $('h1').nextUntil('h2');
console.log(elem); // p p
});JQuery prev() & prevAll() & prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同級元素(在 DOM 樹中沿著同胞元素向後遍歷，而不是向前)。
遍歷 - 過濾
三個最基本的過濾方法是：
first()
last()
eq()
基於其在一組元素中的位置來選擇一個特定的元素。
其他過濾方法，比如 filter() 和 not() 允許選取匹配或不匹配某項指定標準的元素。
JQuery first()
first() 方法返回被選元素的首個元素。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
<h2>重點注意</h2></section>
JQ程式碼：
$(document).ready(function () {
// 獲取section元素中的第一個為p標籤的子元素
var elem = $('section p').first();
console.log(elem); // p p
});JQuery last()
last() 方法返回被選元素的最後一個元素。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
<h2>重點注意</h2></section>
JQ程式碼：
$(document).ready(function () {
// 獲取section元素中的最後一個為p標籤的子元素
var elem = $('section p').last();
console.log(elem); // p p
});JQuery eq()
eq() 方法返回被選元素中帶有指定索引號的元素。
下標從0開始，因此首個元素的下標是0而不是1。
HTML程式碼： <section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
<h2>重點注意</h2></section>
JQ程式碼：
$(document).ready(function () {
// 獲去第二個p元素
var elem = $('p').eq(1);
console.log(elem);
});JQuery filter()
filter()方法允許規定一個標準。
不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
JQ程式碼：
$(document).ready(function () {
// 獲取類名帶有 btn 的 input 元素
var elem = $('input').filter('.btn');
console.log(elem);
});JQuery not()
not() 方法返回不匹配標準的所有元素。
JQ程式碼：
$(document).ready(function () {
// 獲取所有類名不帶 btn 的 input 元素
var elem = $('input').not('.btn');
console.log(elem);
});注意：not() 方法與 filter() 相反。