一、jQuery 選擇器

（1）選擇器是 jQuery 的根基, 在 jQuery 中, 對(duì)事件處理, 遍歷 DOM 和 Ajax 操作都依賴于選擇器

（2）jQuery 選擇器的優(yōu)點(diǎn):

簡(jiǎn)潔的寫法

$('#id) //documnet.getElementById('id'); $('p') //documnet.getElementByTagName('p');

（3）完善的事件處理機(jī)制

//若在網(wǎng)頁中沒有id為'id'的元素，瀏覽器會(huì)報(bào)錯(cuò) //document.getElementById('id').style.backgroundColor='blue';//需要先判斷document.getElementById('id')是否存在 if(document.getElementById('id'))document.getElementById('id').style.backgroundColor='blue';//使用jQuery獲取網(wǎng)頁中的元素即使不存在頁面也不會(huì)報(bào)錯(cuò) $("#id").css("backgroundColor","blue");

?

二、基本選擇器

（1）基本選擇器是 jQuery 中最常用的選擇 器, 也是最簡(jiǎn)單的選擇器, 它通過元素 id, class 和標(biāo)記名來查找 DOM 元素

（2）基本選擇器示例

(A)改變 id 為 one 的元素的背景色為 紅色

? ? $("#one").css("backgroundColor","red");

(B)改變?cè)孛麨榈乃性氐谋尘吧珵?# bbffaa，字體顏色為紅色

? ? $("p").css({color:"red",backgroundColor:"#bbffaa"});

(C)改變第一個(gè)元素的背景色為紅色

? ? $("p").eq(0).css("backgroundColor","red");

(D)改變所有元素和 id 為 one 的元素的背 景色為 # bbffaa

? ? ?$("h1,#one").css("backgroundColor","#bbffaa");

?

三、層次選擇器

（1）如果想通過 DOM 元素之間的層次關(guān)系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使 用層次選擇器

注意: (“prev ~ div”) 選擇器只能選擇 “# prev ” 元素后 面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位 置無關(guān), 只要是同輩節(jié)點(diǎn)就可以選取

（2）層次選擇器示例

(A)改變內(nèi)所有的背景色為 # bbffaa

? ? $(“body div")

(B)改變內(nèi)子的背景色為 # bbffaa

? ? $("body>div")

(C)改變 id 為 one 的下一個(gè)的背景色為 # bbffaa

? ? $("#one+div")

(D)改變 id 為 two 的元素后面的所有兄弟的元素的背 景色為 # bbffaa

? ? $("#two~div")

(E)改變 id 為 two 的元素所有兄弟元素的背景色為 # bbffaa

? ? $("#two"). siblings("p")

?

四、過濾選擇器

（1）過濾選擇器主要是通過特定的過濾規(guī)則來 篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭

（2）按照不同的過濾規(guī)則, 過濾選擇器又可分為 基本過濾, 內(nèi)容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對(duì)象屬性過濾選擇器.

（3）基本過濾選擇器

（4）基本過濾選擇器示例

(A)改變第一個(gè) div 元素的背景色為 # bbffaa

? ? $("div:first")

(B)改變id不為 one 的所有p元素的背景色為 # bbffaa

? ? $("p:not('#one')")

(C)改變索引值為偶數(shù)的 tr元素的背景色為 # bbffaa

? ? $(“tr:even")

(D)改變索引值為大于 3 且為奇數(shù)的 p元素的背景色為 # bbffaa

? ? $(“p:gt(3):odd")

(E)改變所有的標(biāo)題元素的背景色為 # bbffaa

? ?$(":header")

(F)改變當(dāng)前正在執(zhí)行動(dòng)畫的所有元素的背景色為 # bbffaa

? ?$(":animated")

?

五、內(nèi)容過濾選擇器

（1）內(nèi)容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它 所包含的子元素和文本內(nèi)容上

（2）內(nèi)容過濾選擇器示例

(A)改變含有文本 ‘di’ 的 p元素的背景色為 # bbffaa

? ? $("p:cotains(di)")

(B)改變不包含子元素(或者文本元素) 的 div 空 元素的背景色為 # bbffaa

? ?$("div:empty")

(C)改變含有 class 為 mini 元素的 p元素的背景 色為 # bbffaa

? ? ?$("p:has(.mini)")

(D)改變含有子元素(或者文本元素)的div元素 的背景色為 # bbffaa

? ? $("div:parent")

?

六、可見性過濾選擇器

（1）可見性過濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來選 擇相應(yīng)的元素

（2）可見選擇器 :hidden 不僅包含樣式屬性 display 為 none 的元素, 也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素

（3）可見性過濾選擇器示例

(A)改變所有可見的div元素的背景色為 # bbffaa?

? ? $("div:visible")

(B)選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 并設(shè)置其背景 色為 # bbffaa?

? ??$(":hidden")

(C)選取所有的文本隱藏域, 并打印它們的值

? ???$("input:hidden")

?

七、屬性過濾選擇器

（1）屬性過濾選擇器的過濾規(guī)則是通過元素的 屬性來獲取相應(yīng)的元素

（2）屬性過濾選擇器示例

(A)選取有屬性id的div元素，然后在結(jié)果中選取屬性title值 含有“es”的 div 元素.

? ? $("div[id][title='es']")

(B)含有屬性title 的div元素.

? ? ?$("div[title]")

(C)屬性title值等于"test"的div元素.

? ??$("div[title='test']")

(D)屬性title值不等于"test"的div元素(沒有屬性title的也將被選中).

? ? ?$("div[title!='test']")

(E)屬性title值 以"te"開始 的div元素.

? ?? $("div[title^='te']")

(F)屬性title值 以"est"結(jié)束 的div元素.

? ? ?$("div[title$='est']")

(G)屬性title值 含有"es"的div元素.

? ? $("div[title*='es']")?

?

八、子元素過濾選擇器

（1）nth-child() 選擇器詳解如下：

(A) :nth-child(even/odd): 能選取每個(gè)父元素下的索引值 為偶(奇)數(shù)的元素

(B):nth-child(2): 能選取每個(gè)父元素下的索引值為 2 的 元素

(C):nth-child(3n): 能選取每個(gè)父元素下的索引值是 3 的 倍數(shù) 的元素

(D):nth-child(3n + 1): 能選取每個(gè)父元素下的索引值是 3n + 1的元素

（2）子元素過濾選擇器示例

每個(gè)class為one的div父元素下的第2個(gè)子元素.

? ?$("div.one:nth-child(2)")

每個(gè)class為one的div父元素下的第一個(gè)子元素

? ?$("div.one:first-child")???$("div.one:nth-child(1)")

每個(gè)class為one的div父元素下的最后一個(gè)子元素

? ?$("div.one:last-child")

如果class為one的div父元素下的僅僅只有一個(gè)子元素， 那么選中這個(gè)子元素

? ?$("div.one:only-child")

?

九、表單對(duì)象屬性過濾選擇器

（1）此選擇器主要對(duì)所選擇的表單元素進(jìn)行過濾

（2）表單對(duì)象屬性過濾選擇器示例

利用 jQuery 對(duì)象的 val() 方法改變表單內(nèi) 可用 元素的值

? ? $(":enabled").val('xx')

利用 jQuery 對(duì)象的 val() 方法改變表單內(nèi) 不可用 元素的值

? ? $(":disabled").val('xx')

利用 jQuery 對(duì)象的 length 屬性獲取多選框 選中的個(gè)數(shù)

? ? $("input[type='checkbox']:checked").length

利用 jQuery 對(duì)象的 text() 方法獲取下拉框 選中的內(nèi)容

? ?$(":selected").text()

?

十、表單選擇器

?

練習(xí)

1. 給網(wǎng)頁中所有的<p>元素添加 onclick 事件

2. 是一個(gè)特定的表格隔行變色

3. 對(duì)多選框進(jìn)行操作, 輸出選中的多選框的個(gè)數(shù)

總結(jié)

以上是生活随笔為你收集整理的jQuery 基础教程 （三）之jQuery的选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。