jQuery選擇器

選擇器

語法

描述

示例

標簽選擇器

E{

CSS規則

}

以文檔元素作為選擇符

td {

font-size:14px;

}

a {

font-size:14px;

}

ID選擇器

#D{

CSS規則

}

以文檔元素的唯一標識符ID作為選擇符

#note {

font-size:14px;

width:120px;

}

類選擇器

E.className{

CSS規則

}

以文檔元素的class作為選擇符

Div. note {

font-size:14px;

}

.dream{

font-size:14px;

}

群組選擇器

E1,E2,E3{

CSS規則

}

多個選擇符應用同樣的樣式規則

td,p,p.a{

font-size:14px

}

後代選擇器

E F{

CSS規則

}

元素E的任意後代元素F

#linkes a{

font-size:14px

}

通配選擇器

*{

CSS規則

}

以文檔的所有元素作為選擇符

*{

font-size:14px

}

$()函數在很多javaScript類庫中都被作為一個選擇器函數來使用,在jQuery中也不例外.

其中,$(“#ID”)用來代替document.getElementById()函數,即通過ID獲取元素;

$(“tagName”)用來代替document.getElementsByTagName()函數,即通過標簽名獲取HTML元素;

jQuery選擇器選擇器的分類

2 基本選擇器 (basic)

2 層次選擇器 (level)

2 過濾選擇器 (filter)

2 表單選擇器 (form)

2 基本選擇器 (basic)

選擇器

描述

返回

示例

#id

根據給定的id匹配一個元素

單個元素

$(“#test”)選取id為test的元素

.class

根據給定的類名匹配元素

集合元素

$(“.test”)選取所有class為test的元素

element

根據給定的元素名匹配元素

集合元素

$(“p”)選取所有的

元素

*

匹配所有元素

集合元素

$(“*”)選取所有元素

selector ,selector2,

….,selectorN

將每一個選擇器匹配到的元素合並後一起返回

集合元素

$(“p,span,p,myClass”)選取所有

,,和擁有class為myClass的

標簽的一組元素

2 層次選擇器 (level)

選擇器

描述

返回

示例

$(“ancestor descendant”)

選取ancestor元素裡所有descendant(後代)元素

集合元素

$(“p span”)選取

裡的所有元素

$(“parent > child”)

選取parent元素下的child(子)元素,與$(“ancestor descendant”)

有區別,其選擇的是【後代】元素

集合元素

$(“p > span”)選取

下元素名是的子元素

$(“prev + next”)

選取緊接在prev元素後的next元素

集合元素

$(“.one + p”)選取class為one的下一個

元素

$(“prev ~ siblings”)

選取prev元素之後的所有siblings元素

集合元素

$(“#two ~ p”)選取id為two的元素後面的所有

兄弟元素

v 等價關系

選擇器

方法

等價關系

$(“.one + p”)

$(“.one “).next(“p”)

等價關系

$(“#prev ~ p”)

$(“#prev”).nextAll(“p”)

$(“#prev ~ p”)選擇器隻能選擇”#prev”元素後面的同輩

元素,而siblings()方法與前後位置無關,隻要是同輩節點就都能匹配

$(“#prev ~ p”).css(“background”,”#bbffaa”)//選取#prev之後的所有同輩p元素

(“#prev “).nextAll(“p”).css(“background”,”#bbffaa”)//同上

(“#prev “).siblings(“p”).css(“background”,”#bbffaa”)//選取#prev所有的同輩p元素,無論前後位置

2 過濾選擇器 (filter)

? 基本過濾

? 內容過濾

? 可見性過濾

? 屬性過濾

? 子元素過濾

? 表單對象屬性過濾

? 基本過濾

選擇器

描述

返回

示例

:first

選取第一個元素

單個元素

$(“p:first”)選取所有

元素中第一個

元素

:last

選取最後一個元素

單個元素

$(“p:last”)選取所有

元素中最後一個

元素

:not(selector)

去除所有與給定選擇器匹配的元素

集合元素

$(“input:not(.myClass)”)選取class不是myClass的元素

:even

選取索引是偶數的所有元素,索引從0開始

集合元素

$(“input:even”)選取索引是偶數的元素

:odd

選取索引是奇數的所有元素,索引從0開始

集合元素

$(“input:odd”)選取索引是奇數的元素

:eq(index)

選取索引等於index的元素(index從0開始)

單個元素

$(“input:eq(1))選取索引等於1的的元素

:gt(index)

選取索引大於index的元素(index從0開始)

集合元素

$(“input:gt(1))選取索引大於1的的元素

:lt(index)

選取索引小於於index的元素(index從0開始)

集合元素

$(“input:lt(1))選取索引小於1的的元素

? 基本過濾

選擇器

描述

返回

示例

:header

選取所有的標題元素,例如h1,h2,h3等

集合元素

$(“:header”)選取網頁中所有

:animated

選取當前正在執行動畫的所有元素

集合元素

$(“p:animated”)選取正在執行動畫的

元素

? 內容過濾

選擇器

描述

返回

示例

:contains(text)

選取所有文本內容含”text”的元素

集合元素

$(“p:contains(‘我’)”)選取含有文本”我”的

元素

:empty

選取不包含子元素或者文本的空元素

集合元素

$(“p:empty”)選取不包含子元素(包括文本元素)的

空元素

:has(selector)

選取含有選擇器所匹配的元素的元素

集合元素

$(“p:has(p)”)選取含有

元素的

元素

:parent

選取含有子元素或者文本的元素

集合元素

$(“p:parent”)選取擁有子元素(包括文本元素)的

空元素

? 可見性過濾

選擇器

描述

返回

示例

:hidden

選取所有不可見的元素

集合元素

$(“:hidden”)選取所有不可見的元素.包括,

如果隻想選取元素,可以使用$(“input:hidden”)

:visible

選取所有可見的元素

集合元素

$(“p:visible”)選取所有可見的

元素

? 屬性過濾

選擇器

描述

返回

示例

[attribute]

選取擁有此屬性的元素

集合元素

$(“p[id]”)選取擁有屬性id的元素

[attribute =value]

選取屬性的值為value的元素

集合元素

$(“p[title=test]”)選取屬性title為”test”的

元素

[attribute !=value]

選取屬性的值不等於value的元素

集合元素

$(“p[title=test]”)選取屬性title不等於”test”的

元素(註意:沒有屬性title的的

元素也會被選取)

[attribute ^=value]

選取屬性的值以value開始的元素

集合元素

$(“p[title^=test]”)選取屬性title以”test”開始的

元素

[attribute $=value]

選取屬性的值以value結束的元素

集合元素

$(“p[title$=test]”)選取屬性title以”test”結束的

元素

[attribute *=value]

選取屬性的值含有value的元素

集合元素

$(“p[title*test]”)選取屬性title含有”test”的

元素

[selector1][selector2][selectorN]

用屬性選擇器合並成一個復合屬性選擇器,滿足多個條件

集合元素

$(“p[id][title$=test]”)選取擁有屬性id,並且屬性title以”test”結束的

元素

? 表單對象屬性過濾

選擇器

描述

返回

示例

:enabled

選取所有可用元素

集合元素

$(“#form1:enabled”)選取id為”form1″的表單內的所有可用元素

:disabled

選取所有不可用元素

集合元素

$(“#form2:disabled”)選取id為”form2″的表單內所有不可用元素

:checked

選取所有被選中的元素(單選框,復選框)

集合元素

$(“input:checked”)選取所有被選中的元素

:selected

選取所有被選中的選項元素(下拉列表)

集合元素

$(“select:selected”)選取所有被選中的選項元素

2 表單選擇器(form)

選擇器

描述

返回

示例

:input

選取所有的