jQuery是一款經典的JavaScript庫,它為我們提供了豐富的選擇器來選擇HTML文檔中的元素。其中,按照內容來選擇元素的選擇器是非常重要的一類。
// 選擇文本內容為Hello的元素 $("p:contains('Hello')") // 選擇文本節點內容為Hello的元素 $("*:contains('Hello')").contents().filter(function() { return this.nodeType == 3 && this.nodeValue.trim() === 'Hello'; }).parent();
首先,我們來看一個最簡單的選取文本內容的選擇器 -:contains()
。這個選擇器可以匹配文本內容中包含指定字符串的所有元素,返回一個jQuery對象。
如果要緊密匹配,可以通過文本節點級別的篩選來實現,具體的方式就是:選取所有文本節點,通過nodeType
屬性判斷是否是文本節點,再通過jQuery的filter()
方法對節點內容進行比對,以實現精確匹配的效果。
上述例子中使用到了jQuery的contents()
方法,該方法作用是獲取集合元素的所有子節點(包括文本節點、元素節點、注釋節點)。
總而言之,jQuery強大的選擇器是Web開發的不二之選,熟練掌握選擇器的使用,可以十分高效地完成需要的業務需求。