一、jQuery 選擇器

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

（2）jQuery 選擇器的優點:

簡潔的寫法

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

（3）完善的事件處理機制

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

?

二、基本選擇器

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

（2）基本選擇器示例

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

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

(B)改變元素名為的所有元素的背景色為 # bbffaa，字體顏色為紅色

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

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

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

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

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

?

三、層次選擇器

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

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

（2）層次選擇器示例

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

? ? $(“body div")

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

? ? $("body>div")

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

? ? $("#one+div")

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

? ? $("#two~div")

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

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

?

四、過濾選擇器

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

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

（3）基本過濾選擇器

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

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

? ? $("div:first")

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

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

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

? ? $(“tr:even")

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

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

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

? ?$(":header")

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

? ?$(":animated")

?

五、內容過濾選擇器

（1）內容過濾選擇器的過濾規則主要體現在它 所包含的子元素和文本內容上

（2）內容過濾選擇器示例

(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）可見性過濾選擇器是根據元素的可見和不可見狀態來選 擇相應的元素

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

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

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

? ? $("div:visible")

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

? ??$(":hidden")

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

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

?

七、屬性過濾選擇器

（1）屬性過濾選擇器的過濾規則是通過元素的 屬性來獲取相應的元素

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

(A)選取有屬性id的div元素，然后在結果中選取屬性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"結束 的div元素.

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

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

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

?

八、子元素過濾選擇器

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

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

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

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

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

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

每個class為one的div父元素下的第2個子元素.

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

每個class為one的div父元素下的第一個子元素

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

每個class為one的div父元素下的最后一個子元素

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

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

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

?

九、表單對象屬性過濾選擇器

（1）此選擇器主要對所選擇的表單元素進行過濾

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

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

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

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

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

利用 jQuery 對象的 length 屬性獲取多選框 選中的個數

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

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

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

?

十、表單選擇器

?

練習

1. 給網頁中所有的<p>元素添加 onclick 事件

2. 是一個特定的表格隔行變色

3. 對多選框進行操作, 輸出選中的多選框的個數

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。