jQuery 遍歷 - 祖先

先是父、祖父或曾祖父等等。

通過 jQuery，您能夠向上遍歷 DOM 樹，以查找元素的祖先。

向上遍歷 DOM 樹

這些 jQuery 方法很有用，它們用于向上遍歷 DOM 樹：

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被選元素的直接父元素。

該方法只會向上一級對 DOM 樹進行遍歷。

下面的例子返回每個 <span> 元素的的直接父元素：

實例

$(document).ready(function(){ $("span").parent();});

jQuery parents() 方法

parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：

實例

$(document).ready(function(){ $("span").parents();});

嘗試一下 ?

您也可以使用可選參數來過濾對祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

實例

$(document).ready(function(){ $("span").parents("ul");});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。

下面的例子返回介于 <span> 與 <div> 元素之間的所有祖先元素：

實例

$(document).ready(function(){ $("span").parentsUntil("div");});

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

多剛入門HTML5前端開發的小伙伴對HTML頁面的基本機構代碼還不是很清楚，下面和千鋒廣州小編一起來看看吧。

1、什么是標簽：

html標簽組成是html文檔的最基本元素,一般是成對出現,由開始標簽和與其對應的結束標簽構成.?如<html></html>，<p></p>，<body></body>，<head></head>，<span></span>等,此外，還有一些標簽是單獨出現的，如<img/>,<input/>等，標簽可以相互嵌套使用。

由于html語言是一門弱類型語言,對格式的要求不是非常嚴格，因此所有標簽是不區分大小寫的,但是，一般在實際開發中，大家都統一使用小寫。

2、html文檔的基本結構

如上圖，每一個html文檔的基本結構為：

第一層：

<!DOCTTYPE>------！文檔類型，它的目的是要告訴標準通用標記語言解析器，它應該使用什么樣的文檔類型定義（DTD）來解析文檔，在html5文檔中，一般寫為<!DOCTTYPE html> ;值得注意的是，<!DOCTTYPE>不屬于html標簽。

<html></html>-------html標簽，是html文檔的根標簽，所有的網頁標簽都放在這對標簽中，是所有html標簽的祖先容器。

第二層：

<head></head>-------頭部標簽，代表著html文檔的頭信息，是所有頭部元素的容器，內部一般包含：<title> <script><style><meta><link>這些頭部元素。

<body></body>-------網頁主體標簽，其內部主要包含著構成網頁內容的一些元素，如<p></p>,<span></span>,<div></div>,<table></table>等。這些元素都會在網頁的內容部分顯示。

3、標簽的屬性

就如人有這身高、體重、年齡等這些屬性一樣，html標簽也有自己的屬性，如字體顏色，寬，高，背景等。這些屬性一般通過鍵值對的形式卸載標簽中，是標簽的一部分，并且每種標簽的屬性都不完全像同，有的標簽有著自己特有的屬性。如下圖所示：

4、html注釋

在實際開發中，我們需要在html文檔中做一些標記，方便日后對代碼的維護及修改，也方便其他程序員了解我們的代碼。而在html文檔中，注釋的格式為:

我們可以理解為，html中，標簽元素是給計算機讀的，為注釋是給程序員看的。

以上就是今天分享的內容，希望對大家有幫助哦！

近我在做前端面試題總結系列，感興趣的朋友可以添加關注，歡迎指正、交流。
爭取每個知識點能夠多總結一些，至少要做到在面試時，針對每個知識點都可以侃起來，不至于啞火。

前言

在上一篇文章【前端 · 面試】JavaScript 之你不一定會的基礎題（一）中，有同學產生了這樣一個疑惑：為什么 click 事件的監聽函數中，this.id 和 event.target.id 的輸出值是不一樣的？

今天我們就來扒一扒這其中的原理。

題目

有如下的 HTML 文檔結構：

<div id="parent">
    <div id="child" class="child">
        點我
    </div>
</div>

第一次執行如下 JavaScript 代碼：

document.getElementById("parent").addEventListener("click", function () {
    alert(`parent 事件觸發，` + this.id);
});

document.getElementById("child").addEventListener("click", function () {
    alert(`child 事件觸發，` + this.id);
});

第二次執行另一套 JavaScript 代碼：

document.getElementById("parent").addEventListener("click", function (e) {
    alert(`parent 事件觸發，` + e.target.id);
});

document.getElementById("child").addEventListener("click", function (e) {
    alert(`child 事件觸發，` + e.target.id);
});

問題如下：

點擊 id 為 child 的 div 后，JavaScript 代碼的執行結果分別是什么？

答案是：

第一次結果為：先彈出“child 事件觸發，child”，再彈出“parent 事件觸發，parent”。
第二次結果為：先彈出“child 事件觸發，child”，再彈出“parent 事件觸發，child”。

對于這個答案中的第二次輸出結果，有人生出了疑惑：為什么 parent 事件觸發時，e.target.id 的結果為 child呢？不應該是 parent 嗎？

解惑

DOM 元素事件執行順序

首先，我們知道，HTML 頁面上 DOM 元素的事件執行順序一般有三個階段：

事件捕獲
事件觸發
事件冒泡

整個過程如下圖：

事件捕獲和事件冒泡

當一個事件發生在具有父元素的元素上(例如，在我們的例子中是 child 元素)時，現代瀏覽器運行兩個不同的階段 - 捕獲階段和冒泡階段。在捕獲階段：

瀏覽器檢查元素的最外層祖先<html>，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它。
然后，它移動到<html>中單擊元素的下一個祖先元素，并執行相同的操作，然后是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素。

在冒泡階段，恰恰相反:

瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它
然后它移動到下一個直接的祖先元素，并做同樣的事情，然后是下一個，等等，直到它到達<html>元素。

這兩個階段如下圖所示：

在現代瀏覽器中，默認情況下，所有事件處理程序都在冒泡階段進行注冊，這也是為什么只有一個阻止冒泡方法的方法 event.stopPropagation()，而沒有阻止捕獲的方法，因為完全沒必要。

this 和 event.target

首先，我們得有一個清晰的認知：事件冒泡或者事件捕獲，都是針對注冊了事件的元素。

關于 this 和 event.target ，總結如下：

在整個事件流程中，event.target 永遠都指向真正觸發了事件流程的元素，即處于事件觸階段的元素。
this 是正在執行事件的元素的引用，和 event.currentTarget 指向的元素是一致的，即當前執行的是哪個元素的監聽事件，this 和 event.currentTarget 指向的就是哪個元素。

event 還有一個屬性 event.srcElement，它是 event.target 的別名，但是是一個非標準屬性，盡量不在生產環境中使用。

阻止冒泡

假如有以下代碼：

parent.onclick = function1;
child.onclick = function2;

當我們點擊 child 時，由于事件默認會在冒泡階段注冊，所以，不僅會執行 function2，之后還會執行 function1，這樣的結果可能不是我們所期望的，我們更希望它們的點擊事件之間互不影響。

如果要實現這點，只需要在 function2 中添加 event.stopPropagation() 即可。

擴展

現在我們將題目中的 JavaScript 代碼再增加一份：

document.getElementById("parent").addEventListener("click", function (e) {
    alert(`parent 事件觸發，` + e.target.id);
}, false);

document.getElementById("child").addEventListener("click", function (e) {
    alert(`child 事件觸發，` + e.target.id);
}, true);

問題1：如果點擊 child 元素，輸出是什么？

問題2：如果點擊 parent 元素，輸出是什么？

可以看到，現在 parent 的點擊事件是冒泡階段執行，child 的點擊事件是在捕獲階段執行。

針對問題1，由于 parent 注冊的是冒泡階段執行，所以它的事件是在 child 觸發階段后的冒泡階段執行的，所以答案應該是：先彈出 “child 事件觸發，child”，再彈出“parent 事件觸發，child”。

針對問題二，雖然 child 注冊的是捕獲階段執行事件，但是 parent 事件流程的捕獲根本走不到它，所以答案應該是：只彈出“parent 事件觸發，parent”。

總結

上面我們分析了這么多，其實總結起來就下面幾條：

event.target 指向觸發事件流程的元素，且不會改變。
this 指向的是當前所執行事件的注冊元素。
捕獲止于 event.target，冒泡始于 event.target。
主流瀏覽器都默認在冒泡階段進行事件注冊，所以，只有阻止冒泡的方法而沒有阻止捕獲的方法。
元素的 addEventListener 方法中的第三個參數是 true 或者 false，對元素自己觸發的事件流程都沒有任何影響，只有在它的父元素或者子元素在觸發相同的事件后才有影響。

小問題也有大根源，勇于發現，勇于探究！

~本文完，感謝閱讀！

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！你歸，無論得失，唯以余韻相贈！
知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

在線咨詢

上一篇：傻傻搞不懂前端和UI的區別？看這篇就夠了
下一篇：賣家必知的手淘千萬級流量入口（珍藏）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery 遍歷 - 祖先

前言

題目

解惑

DOM 元素事件執行順序

this 和 event.target

阻止冒泡

擴展

總結

您的項目需求