JQuery各種選擇器的介紹

1. JQuery 基本選擇器

express	description	remarks
#$("#idName")	id選擇器
$(".className")	類別選擇器
$("tagName")	標籤選擇器
$("*")	通配符選擇器
$("tagName,.className,#idName,. ..")	群組選擇器

# 

2. 層次選擇器

從父子關係和兄弟關係進行節點的選擇.

##注意是a 節點之後的兄弟節點,#

 

3. 基本過濾選擇器

從位置的角度來過濾標籤.

express	description	remarks
$("a b")	選擇a節點所有的後位節點b ( 包含子節點和孫節點)
$("a>b")	選擇a節點的所有子節點b ( 只包含子節點, 不包含孫節點)
$("a+b")	選擇a節點之後的第一個兄弟節點b
$("a~b")	#選擇a節點之後的所有兄弟節點b	而不是所有的兄弟節點

express	description	#remarks
$("tagName:first")	選取tagName元素集合中的第一個元素
#$("tagName:last")	選擇tagName元素集合中的最後一個元素
$("tagName:odd")	選擇tagName元素集合中奇數位置的元素
$("tagName:even")	#選擇tagName元素集合中偶數位置的元素
#$("tagName:eq(1)")	選擇tagName元素集合中第二個元素 ( 索引和陣列一樣, 從零開始)
$("tagName:gt(2)")	#選擇tagName元素集合中第三個元素往後的元素 ( 即tagName下, 位置大於3的元素)
$("tagName:lt(2)")	選擇tagName元素集合中第三個元素往前的元素 ( 即tagName下, 位置小於3的元素)
$(":header")	#勾選所有的標題元素 ( h1 到h6 )
#$(":animated")	選擇有動畫的元素
$("tagName:not(.one)")	選擇tagName元素集合中class值不是one的元素

 

4. 內容過濾選擇器

##節點值是否為空白,節點上的文字是否包含指定的字串, 子元素中的class值是否為指定的值.

expressdescriptionremarks$("tagName:empty")選擇tagName元素集合中內容為空的元素 $("tagName:parent")選擇tagName元素集合中包含子元素的元素 $("tagName:contents('abc')")#選擇tagName元素集合中內容包含"abc"的元素 $("tagName:has(.one)")選擇tagNmae元素集合中class值為one的元素 #

 

5. 屬性過濾器( 選擇包含指定屬性的元素)

從節點的屬性來過濾篩選節點:有無屬性,屬性值等於,不等於,包含,是**開頭,是**結尾,多重過濾.

	( 不是子元素)
	( 不是子元素)
	( 不是子元素, 是tagName元素)

express	#description	remarks
$("div[id]")	被選取的元素包含id屬性
$("div[id='test']")	#被選取的元素包含id="test"
$("div[title!='test']")	被選取的元素的title屬性不是"test"
$("div[title^='te']")	被選取的元素的title屬性值是由"test開始的"
$("div[title$='st']")	#被選中的元素的title屬性是以"test"結尾的
$("div[title*='est']")	被選取的元素的title屬性值包含"est"
$("div[title*='est'][id]")	被選取的元素的title屬性值包含"est", 且有id屬性

 

6. 可見性篩選選擇器

根據頁面上的元素是否顯示來選擇節點

#express	description	remarks
$("div:hidden")	選取隱藏的div元素
#$("div :hidden")	選取div元素中所有隱藏的元素 ( 包含子元素和孫元素)
#$("div:visiable")	選取可見的div元素
$("div :visiable")	選取div中可見的元素 ( 包含子元素與孫子元素)

以上是JQuery各種選擇器的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！