先是父、祖父或曾祖父等等。
通過 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 代碼的執行結果分別是什么?
答案是:
對于這個答案中的第二次輸出結果,有人生出了疑惑:為什么 parent 事件觸發時,e.target.id 的結果為 child呢?不應該是 parent 嗎?
首先,我們知道,HTML 頁面上 DOM 元素的事件執行順序一般有三個階段:
整個過程如下圖:
事件捕獲和事件冒泡
當一個事件發生在具有父元素的元素上(例如,在我們的例子中是 child 元素)時,現代瀏覽器運行兩個不同的階段 - 捕獲階段和冒泡階段。 在捕獲階段:
在冒泡階段,恰恰相反:
這兩個階段如下圖所示:
在現代瀏覽器中,默認情況下,所有事件處理程序都在冒泡階段進行注冊,這也是為什么只有一個阻止冒泡方法的方法 event.stopPropagation(),而沒有阻止捕獲的方法,因為完全沒必要。
首先,我們得有一個清晰的認知:事件冒泡或者事件捕獲,都是針對注冊了事件的元素。
關于 this 和 event.target ,總結如下:
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”。
上面我們分析了這么多,其實總結起來就下面幾條:
小問題也有大根源,勇于發現,勇于探究!
~
~本文完,感謝閱讀!
~
學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!
大家好,我是〖編程三昧〗的作者 隱逸王,我的公眾號是『編程三昧』,歡迎關注,希望大家多多指教!
你來,懷揣期望,我有墨香相迎! 你歸,無論得失,唯以余韻相贈!
知識與技能并重,內力和外功兼修,理論和實踐兩手都要抓、兩手都要硬!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。