整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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.idevent.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,對元素自己觸發的事件流程都沒有任何影響,只有在它的父元素或者子元素在觸發相同的事件后才有影響。

          小問題也有大根源,勇于發現,勇于探究!

          ~

          ~本文完,感謝閱讀!

          ~

          學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

          大家好,我是〖編程三昧〗的作者 隱逸王,我的公眾號是『編程三昧』,歡迎關注,希望大家多多指教!

          你來,懷揣期望,我有墨香相迎! 你歸,無論得失,唯以余韻相贈!

          知識與技能并重,內力和外功兼修,理論和實踐兩手都要抓、兩手都要硬!


          主站蜘蛛池模板: 日本不卡免费新一区二区三区| 国产一区玩具在线观看| 国产一区二区免费在线| 国产丝袜美女一区二区三区| 大帝AV在线一区二区三区| 无码精品人妻一区二区三区免费看 | 日本视频一区在线观看免费| 亚洲性日韩精品一区二区三区| 中文字幕精品一区二区| 成人无码AV一区二区| 丰满岳乱妇一区二区三区| 麻豆国产在线不卡一区二区 | 亚洲av无码一区二区三区人妖| 好看的电影网站亚洲一区| 久久精品国产一区二区三区| 精品女同一区二区三区免费播放 | 国产精品揄拍一区二区久久| 亚洲电影一区二区三区| 国产在线精品一区二区在线观看| 日韩有码一区二区| 视频一区二区三区免费观看| 精品国产一区二区三区久久影院| 国产乱码精品一区二区三区中| 中文字幕亚洲综合精品一区| 久久精品岛国av一区二区无码| 在线视频一区二区三区三区不卡| 精品国产一区二区三区在线观看| 一区二区国产在线观看| 国产观看精品一区二区三区 | 无码精品不卡一区二区三区| 亚洲色精品三区二区一区| 中文字幕日韩欧美一区二区三区| 国产主播在线一区| 福利国产微拍广场一区视频在线 | 精品国产免费一区二区三区| 国产一区二区女内射| 免费无码一区二区三区| 亚洲av日韩综合一区久热| 国产激情一区二区三区四区| 无码精品蜜桃一区二区三区WW| 区三区激情福利综合中文字幕在线一区亚洲视频1 |