closest() 方法獲得匹配選擇器的第一個(gè)祖先元素

seanlook 發(fā)布于2019-08-23 17:00 / 1927人閱讀

摘要：當(dāng)被最接近的列表元素或其子后代元素被點(diǎn)擊時(shí)，會(huì)切換黃色背景定義和用法方法獲得匹配選擇器的第一個(gè)祖先元素，從當(dāng)前元素開始沿樹向上。詳細(xì)說明如果給定表示元素集合的對象，方法允許我們檢索樹中的這些元素以及它們的祖先元素，并用匹配元素構(gòu)造新的對象。

w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp

本例演示如何通過 closest() 完成事件委托。當(dāng)被最接近的列表元素或其子后代元素被點(diǎn)擊時(shí)，會(huì)切換黃色背景：

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

定義和用法
closest() 方法獲得匹配選擇器的第一個(gè)祖先元素，從當(dāng)前元素開始沿 DOM 樹向上。

語法
.closest(selector)

參數(shù)	描述
selector	字符串值，包含匹配元素的選擇器表達(dá)式。

參數(shù) 描述
selector 字符串值，包含匹配元素的選擇器表達(dá)式。
詳細(xì)說明
如果給定表示 DOM 元素集合的 jQuery 對象，.closest() 方法允許我們檢索 DOM 樹中的這些元素以及它們的祖先元素，并用匹配元素構(gòu)造新的 jQuery 對象。.parents() 和 .closest() 方法類似，它們都沿 DOM 樹向上遍歷。兩者之間的差異盡管微妙，卻很重要：

.closest()	.parents()
從當(dāng)前元素開始	從父元素開始
沿 DOM 樹向上遍歷，直到找到已應(yīng)用選擇器的一個(gè)匹配為止。	沿 DOM 樹向上遍歷，直到文檔的根元素為止，將每個(gè)祖先元素添加到一個(gè)臨時(shí)的集合；如果應(yīng)用了選擇器，則會(huì)基于該選擇器對這個(gè)集合進(jìn)行篩選。
返回包含零個(gè)或一個(gè)元素的 jQuery 對象	返回包含零個(gè)、一個(gè)或多個(gè)元素的 jQuery 對象

云服務(wù)器 GPU云服務(wù)器共有祖先元素 php 匹配數(shù)組元素匹配選擇一個(gè)元素

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/103652.html

相關(guān)文章

jQuery DOM節(jié)點(diǎn)的遍歷

摘要：只要符合，不管是兒子輩，孫子輩都可以與其他的樹遍歷方法不同，選擇器表達(dá)式對于是必需的參數(shù)。方法以選定的元素為中心，往內(nèi)查找可以通過方法。要一個(gè)一個(gè)給合集中每一個(gè)設(shè)置顏色，這里方法就是方法就是一個(gè)循環(huán)的迭代器，它會(huì)迭代對象合集中的每一個(gè)元素。 children()方法 jQuery是一個(gè)合集對象，如果想快速查找合集里面的第一級子元素，此時(shí)可以用children()方法。這里需要注意：.c...

Elle 2019-08-21 11:56 評論0 收藏0
讀 Zepto 源碼之集合元素查找

摘要：方法是將集合中不符合條件的元素查找出來。判斷集合中的第一個(gè)元素是否匹配指定的選擇器。這個(gè)在讀源碼之集合操作有講過，如果集合個(gè)數(shù)大于零，則表示滿足條件。返回集合中所有元素指定的屬性值。獲取集合中每個(gè)元素的前一個(gè)兄弟節(jié)點(diǎn)。這篇依然是跟 dom 相關(guān)的方法，側(cè)重點(diǎn)是跟集合元素查找相關(guān)的方法。讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼...

DC_er 2019-08-20 16:53 評論0 收藏0
jQuery 常用方法

摘要：查找元素縮小匹配的范圍，初始的對象集合中篩選不會(huì)有初始集合中的內(nèi)容方法在命令鏈內(nèi)調(diào)用，以便退回到前一個(gè)包裝集。指定的樣式屬性返回的值返回的值事件屬性相對于文檔左邊緣的鼠標(biāo)位置。阻止事件的默認(rèn)動(dòng)作。觸發(fā)該事件的元素。而方法會(huì)返回一個(gè)新的數(shù)組。 jQuery eq()和get() get(): jQuery對象轉(zhuǎn)DOM對象。 eq(): jQuery對象構(gòu)建新的jQuery對象。 $(s...

Alliot 2019-08-20 17:46 評論0 收藏0
jQuery is out of date

摘要：注同時(shí)移除元素上的事件及數(shù)據(jù)。其他對象通過其屬性名進(jìn)行迭代。原始數(shù)組不受影響。檢查對象是否為空不包含任何屬性。返回一個(gè)數(shù)字，表示當(dāng)前時(shí)間。兩者性能差不多接受一個(gè)標(biāo)準(zhǔn)格式的字符串，并返回解析后的對象。在我看來，jQuery確實(shí)已經(jīng)過時(shí)了。本項(xiàng)目總結(jié)了絕大部分 jQuery API 替代的方法，類似項(xiàng)目You-Dont-Need-jQuery，并會(huì)再此基礎(chǔ)上進(jìn)行很多的補(bǔ)充。寫這個(gè)項(xiàng)目主要...

duan199226 2019-08-21 11:30 評論0 收藏0
原生js替換jQuery各種方法-中文版

摘要：本項(xiàng)目總結(jié)了大部分替代的方法，暫時(shí)只支持以上瀏覽器。返回指定元素及其后代的文本內(nèi)容。從服務(wù)器讀取數(shù)據(jù)并替換匹配元素的內(nèi)容。用它自己的方式處理，原生遵循標(biāo)準(zhǔn)實(shí)現(xiàn)了最小來處理。當(dāng)全部被解決時(shí)返回，當(dāng)任一被拒絕時(shí)拒絕。是創(chuàng)建的一種方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 評論0 收藏0