DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區別
jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區別
編輯:JQuery特效代碼     

在這個sprint中,因為要寫前端UI,所以用到了jQuery,但是jQuery在向上遍歷DOM樹的API中,有parents()、 parent()、closest()這幾個,一直不太清楚它們具體的區別,所以狠下心好好讀了一下jQuery的API文檔,並把區別記在這裡,以供參考。

 1.parents([selector])

本方法用於選擇給定jQuery對象中包含的DOM元素或者DOM元素集的祖先節點,並將這些節點包裝成jQuery對象返回,返回的節點集是以從裡到外的順序排序的。

同時,本方法還接受一個字符串選擇器,用於從返回的節點集中篩選符合選擇器的子元素集。

 2.parent([selector])

本方法用於選擇給定jQuery對象中包含的DOM元素或者DOM元素集的父節點。它和parents()不同的是,它只向上搜索一層,而parents()會搜索整個DOM樹。

本方法也可以接受一個字符串選擇器,用於篩選返回的元素。

有人可能會問:一個DOM元素的父元素不是只有一個麼,為什麼還要一個selector選擇器進行篩選呢?其實一個jQuery對象可能包含有很多個DOM元素,例如$('a').parent()就是選擇所有<a>標簽的父元素,這樣返回的就是一個元素集,所以可以進行篩選。

 3.closest(selector)

本方法用於向上遍歷jQuery對象中包含的DOM元素或者DOM元素集的祖先節點,直到找到符合selector選擇器的節點為止。

它和parents()的區別:

closest()從自身開始向上遍歷,直到找到一個適合的節點,返回的jQuery對象包含0個或者1個對象;

parents()從自身的父節點開始向上遍歷,返回所有祖先節點,並根據選擇器對這些節點進行篩選,最終返回的jQuery對象可能包含0、1或者多個對象。

 一個能說明區別的例子:
. 代碼如下:
<!DOCTYPE html>
<html>
<head>
    <title>a test document</title>
</head>
<body>
    <div>
        <p>
            <span>
                <b>My parents</b>
            </span>
        </p>
    </div>
</body>
</html>

在上述文檔中:

$('b').parents()將返回:由span、p、div、body、html等元素構造的jQuery對象;

$('b').parent()將返回:由span構造的jQuery對象;

$('b').closest('div')將返回:由div構造的jQuery對象。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved