jQuery選擇器的強(qiáng)大之處

讓我們簡(jiǎn)要概述那些常用的元素查找方法。

使用`$("#myElement")`，你可以選擇id值為“myElement”的元素。由于HTML文檔中每個(gè)id應(yīng)該是唯一的，因此此選擇器返回的是唯一的元素。

`$("div")`則選擇所有的div標(biāo)簽元素，返回一個(gè)div元素?cái)?shù)組。

通過`.myClass`，你可以選取使用名為“myClass”的CSS類的所有元素。

`$("")`選擇文檔中的所有元素。你還可以使用多種方式進(jìn)行聯(lián)合選擇，如`$("#myElement, div, .myClass")`。

接下來是層疊選擇器：

`$("form input")`選擇所有form元素中的input元素。

`$("#main > ")`選擇id為“main”的所有子元素。

`$("label + input")`選擇所有l(wèi)abel元素的下一個(gè)input元素節(jié)點(diǎn)。這意味著選擇器返回的是直接跟在label標(biāo)簽后面的input標(biāo)簽的所有input標(biāo)簽元素。

`$("#prev ~ div")`選擇器返回的為id為“prev”的標(biāo)簽元素的所有屬于同一個(gè)父元素的div標(biāo)簽。

還有基本過濾選擇器：

`$("tr:first")`和`$("tr:last")`分別選擇所有tr元素中的第一個(gè)和最后一個(gè)。

`$("input:not(:checked)")`過濾掉已選中的input元素。

`$("tr:even")`和`$("tr:odd")`分別選擇tr元素的第0、2、4...和第1、3、5...的元素。

其他如`$("td:eq(2)")`、`$("td:gt(4)")`和`$("td:lt(4)")`等，分別對(duì)應(yīng)選擇特定的td元素。

還有內(nèi)容過濾選擇器，如：

`$("div:contains('John')")`選擇所有包含“John”文本的div元素。

`$("td:empty")`選擇所有空的td元素?cái)?shù)組。

還有可視化過濾選擇器、屬性過濾選擇器、子元素過濾選擇器以及專門針對(duì)表單元素的選擇器。這些選擇器提供了豐富的功能，使我們能更精確地選擇頁面中的元素，進(jìn)行各種操作。$(":checked")選擇所有的被checked的表單元素

$("selectoption:selected")選擇所有的select的子元素中被selected的元素

jQuery選擇器有9種，分別是：基本的有id、標(biāo)簽、類、通配符選擇器；層次選擇器；基本過濾器選擇器；內(nèi)容過濾器選擇器；可見性過濾器選擇器；屬性過濾器選擇器；子元素過濾器選擇器；表單選擇器；表單過濾器選擇器。

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是“writeLess，DoMore”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、 *** 處理、動(dòng)畫設(shè)計(jì)和Ajax交互。

jQuery選擇器一般分為四種

一、基本選擇器

基本選擇器是jQuery中最常用也是最簡(jiǎn)單的選擇器，它通過元素的id、class和標(biāo)簽名等來查找DOM元素。

1、ID選擇器#id

描述：根據(jù)給定的id匹配一個(gè)元素，返回單個(gè)元素（注：在網(wǎng)頁中，id名稱不能重復(fù)）

示例：$("#test")選取 id為 test的元素

2、類選擇器.class

描述：根據(jù)給定的類名匹配元素，返回元素 ***

示例：$(".test")選取所有class為test的元素

3、元素(標(biāo)簽)選擇器 element

描述：根據(jù)給定的元素名匹配元素，返回元素 ***

示例：$("p")選取所有的<p>元素$("div"):選取所有的div標(biāo)簽

4、

描述：匹配所有元素，返回元素 ***

示例：$("")選取所有的元素

5、selector1，selector2,...,selectorN（并集選擇器）

描述：將每個(gè)選擇器匹配到的元素合并后一起返回，返回合并后的元素 ***

示例：$("p,span,p.myClass")選取所有<p>,<span>和class為myClass的<p>標(biāo)簽的元素 ***

二、層次選擇器

層次選擇器根據(jù)層次關(guān)系獲取特定元素。

1、后代選擇器

示例：$("p span")選取<p>元素里的所有的<span>元素（注：后代選擇器選擇父元素所有指定選擇的元素，不管是兒子級(jí)，還是孫子級(jí)）

2、子選擇器$("parent>child")

示例：$("p>span")選擇<p>元素下的所有<span>元素（注：子選擇器只選擇直屬于父元素的子元素）

3、同輩選擇器$("prev+next")

描述：選取緊接在prev元素后的next元素，返回元素 ***

示例：$(".one+p")選取class為one的下一個(gè)<p>同輩元素 ***

4、同輩選擇器$("prev~siblings")

描述：選取prev元素后的所有siblings元素，返回元素 ***

示例：$("#two~p")選取id為two的元素后所有<p>同輩元素 ***

三、過濾選擇器

1>基本過濾選擇器

1、:first

描述：選取第一個(gè)元素，返回單個(gè)元素

示例：$("p:first")選取所有<p>元素中第一個(gè)<p>元素

2、:last

描述：選取最后一個(gè)元素，返回單個(gè)元素

示例：$("p:last")選取所有<p>元素中最后一個(gè)<p>元素

3、:not(selector)

描述：去除所有與給定選擇器匹配的元素，返回元素 ***

示例：$("input:not(.myClass)")選取class不是myClass的<input>元素

4、:even

描述：選取索引是偶數(shù)的所有元素，索引從0開始，返回元素 ***

5、:odd

描述：選取索引是奇數(shù)的所有元素，索引從0開始，返回元素 ***

6、:eq(index)

描述：選取索引等于index的元素，索引從0開始，返回單個(gè)元素

7、:gt(index)

描述：選取索引大于index的元素，索引從0開始，返回元素 ***

8、:lt(index)

描述：選取索引小于于index的元素，索引從0開始，返回元素 ***

9、:focus

描述：選取當(dāng)前獲取焦點(diǎn)的元素

2>內(nèi)容過濾選擇器

1、:contains(text)

描述：選取含有文本內(nèi)容為text的元素，返回元素 ***

示例：$("p:contains('我')")選取含有文本“我”的元素

2、:empty

$("p:empty")選取不包含子元素或者文本元素的空<p>元素（<p></p>）

:has(selector) 選取含有選擇器所匹配的元素的元素，返回元素 ***

示例：$("p:has(p)")選取含有<p>元素的<p>元素（<p><p/></p>）

:parent 選取含有子元素或者文本的元素，返回元素 ***

示例：$("p:parent")選取含有子元素或者文本元素的<p>元素（<p><p/></p>或者<p>文本</p>）

可見性過濾選擇器

:hidden 選取所有不可見的元素，返回元素 ***

:visible 選取所有可見的元素，返回元素 ***

屬性過濾選擇器（返回元素 *** ）

[attribute] 示例：$("p[id]")選取擁有id屬性的p元素

[attribute=value] 示例：$("input[name=text]")選取擁有name屬性等于text的input元素

[attribute!=value] 示例：$("input[name!=text]")選取擁有name屬性不等于text的input元素

[attribute^=value] 示例：$("input[name^=text]")選取擁有name屬性以text開始的input元素

[attribute$=value] 示例：$("input[name$=text]")選取擁有name屬性以text結(jié)束的input元素

[attribute=value] 示例：$("input[name=text]")選取擁有name屬性含有text的input元素

[attribute~=value] 示例：$("input[class~=text]")選取擁有class屬性以空格分割的值中含有text的input元素

[attribute1][attribute2][attributeN] 描述：合并多個(gè)屬性過濾選擇器

表單對(duì)象屬性過濾選擇器（返回元素 *** ）

:enabled 描述：選取所有可用元素

:disabled 描述：選取所有不可用元素

:checked 描述：選取所有被選中的元素（單選框，復(fù)選框）

示例：$("input:checked")選取所有被選中的<input>元素

:selected 描述：選取所有被選中的選項(xiàng)元素（下拉列表）

示例：$("select option:selected")選取所有被選中的選項(xiàng)元素

表單選擇器（返回元素 *** ，使用相似）

:text 描述：選擇所有的單行文本框

示例：$(":text")選取所有的單行文本框

:password 描述：選擇所有的密碼框

:button 描述：選擇所有的按鈕

:checkbox 描述：選擇所有的多選框