摘要:當被最接近的列表元素或其子后代元素被點擊時,會切換黃色背景定義和用法方法獲得匹配選擇器的第一個祖先元素,從當前元素開始沿樹向上。詳細說明如果給定表示元素集合的對象,方法允許我們檢索樹中的這些元素以及它們的祖先元素,并用匹配元素構造新的對象。
w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp
本例演示如何通過 closest() 完成事件委托。當被最接近的列表元素或其子后代元素被點擊時,會切換黃色背景:
$( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("hilight"); });
定義和用法
closest() 方法獲得匹配選擇器的第一個祖先元素,從當前元素開始沿 DOM 樹向上。
語法
.closest(selector)
參數 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的選擇器表達式。 |
參數 描述
selector 字符串值,包含匹配元素的選擇器表達式。
詳細說明
如果給定表示 DOM 元素集合的 jQuery 對象,.closest() 方法允許我們檢索 DOM 樹中的這些元素以及它們的祖先元素,并用匹配元素構造新的 jQuery 對象。.parents() 和 .closest() 方法類似,它們都沿 DOM 樹向上遍歷。兩者之間的差異盡管微妙,卻很重要:
.closest() | .parents() |
---|---|
從當前元素開始 | 從父元素開始 |
沿 DOM 樹向上遍歷,直到找到已應用選擇器的一個匹配為止。 | 沿 DOM 樹向上遍歷,直到文檔的根元素為止,將每個祖先元素添加到一個臨時的集合;如果應用了選擇器,則會基于該選擇器對這個集合進行篩選。 |
返回包含零個或一個元素的 jQuery 對象 | 返回包含零個、一個或多個元素的 jQuery 對象 |
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103652.html
摘要:只要符合,不管是兒子輩,孫子輩都可以與其他的樹遍歷方法不同,選擇器表達式對于是必需的參數。方法以選定的元素為中心,往內查找可以通過方法。要一個一個給合集中每一個設置顏色,這里方法就是方法就是一個循環的迭代器,它會迭代對象合集中的每一個元素。 children()方法 jQuery是一個合集對象,如果想快速查找合集里面的第一級子元素,此時可以用children()方法。這里需要注意:.c...
摘要:方法是將集合中不符合條件的元素查找出來。判斷集合中的第一個元素是否匹配指定的選擇器。這個在讀源碼之集合操作有講過,如果集合個數大于零,則表示滿足條件。返回集合中所有元素指定的屬性值。獲取集合中每個元素的前一個兄弟節點。 這篇依然是跟 dom 相關的方法,側重點是跟集合元素查找相關的方法。 讀Zepto源碼系列文章已經放到了github上,歡迎star: reading-zepto 源碼...
摘要:查找元素縮小匹配的范圍,初始的對象集合中篩選不會有初始集合中的內容方法在命令鏈內調用,以便退回到前一個包裝集。指定的樣式屬性返回的值返回的值事件屬性相對于文檔左邊緣的鼠標位置。阻止事件的默認動作。觸發該事件的元素。而方法會返回一個新的數組。 jQuery eq()和get() get(): jQuery對象轉DOM對象。 eq(): jQuery對象構建新的jQuery對象。 $(s...
摘要:注同時移除元素上的事件及數據。其他對象通過其屬性名進行迭代。原始數組不受影響。檢查對象是否為空不包含任何屬性。返回一個數字,表示當前時間。兩者性能差不多接受一個標準格式的字符串,并返回解析后的對象。 在我看來,jQuery確實已經過時了。本項目總結了絕大部分 jQuery API 替代的方法,類似項目You-Dont-Need-jQuery,并會再此基礎上進行很多的補充。寫這個項目主要...
摘要:本項目總結了大部分替代的方法,暫時只支持以上瀏覽器。返回指定元素及其后代的文本內容。從服務器讀取數據并替換匹配元素的內容。用它自己的方式處理,原生遵循標準實現了最小來處理。當全部被解決時返回,當任一被拒絕時拒絕。是創建的一種方式。 原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...
閱讀 654·2019-08-30 15:44
閱讀 1381·2019-08-30 11:02
閱讀 2980·2019-08-29 18:42
閱讀 3506·2019-08-29 16:16
閱讀 1720·2019-08-26 13:55
閱讀 1769·2019-08-26 13:45
閱讀 2385·2019-08-26 11:43
閱讀 3247·2019-08-26 10:32