Louis Lee's Blog
1 摘要
工欲善其事必先利其器,要想用好jQuery,就要做好自己的基本功。本篇部落格對於jQuery中的選擇器進行了一個小結,對於基本選擇器、層次選擇器、過濾選擇器和表單選擇器進行了分別列表和解釋。
2 什麼是jQuery選擇器
顧名思義,選擇器即選擇某個物件或事物的器具。而jQuery選擇器的操作物件則是DOM樹的某個元素,例如HTML元素中的某個div塊、button按鈕和a連結,當然也可以是其中的document和window物件。一般我們要做頁面效果、事件之前,提前要做的就是選擇對應的的操作物件,而這個任務就交由jQuery選擇器來完成。
3 為什麼要用jQuery選擇器
原生Javascript中一般要想獲取DOM樹中某個元素,只能通過DOM元素的id屬性或者標籤名字來獲取該元素。也就是通過getElementById()
和getElementsByTagName()
這兩個函式來獲取。
而jQuery對於這兩種方式進行封裝,簡化為$("#id")
和$("tagName")
,其中id和tagName分別是元素的id屬性和標籤名字。顯而易見,jQuery相比原生Javascript更加簡潔,而且還能避免某些錯誤。
當然,強大的jQuery是不會滿足這兩種方式來獲取DOM元素,jQuery還支援class選擇,層次選擇,屬性選擇等等。下面將詳細介紹如何使用jQuery選擇器。
4 如何使用jQuery選擇器
jQuery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。下面將所有選擇器列入表格內,對於簡單易懂的選擇器將一帶而過,對於複雜的選擇器則重點解釋介紹。
4.1 基本選擇器
表4-1 基本選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
#id | 根據給定的id匹配一個元素 | 單個元素 | $("#test") 選取 id 為 test 的元素 |
.class | 根據給定的類名匹配元素 | 集合元素 | $(".test") 選取所有 class 為 test 的元素 |
element | 根據給定的元素名匹配元素 | 集合元素 | $("p") 選取所有的<p> 元素 |
* | 匹配所有元素 | 集合元素 | $("*") 選取所有的元素 |
selector1, selector2, …, selectorN | 將每一個選擇器匹配到的元素合併後一起返回 | 集合元素 | $("div,span,p.myClass") 選取所有<div> ,<span> 和擁有 class 為 myClass 的<p> 標籤的一組元素 |
4.2 層次選擇器
表4-2 層次選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
$(“ancestor descendant”) | 選取 ancestor 元素裡的所有 descendant (後代)元素 | 集合元素 | $("div span") 選取<div> 裡的所有的<span> 元素 |
$(“parent>child”) | 選取 parent 元素下的 child (子)元素,與$("ancestor descendant") 有區別,$("ancestor descendant") 選擇的是後代元素,$("parent>child") 選擇的是直屬子元素,僅一代。 |
集合元素 | $("div > span") 選取<div> 元素下元素名是<span> 的子元素 |
$(“prev + next”) | 選取緊接在 prev 元素後的 next 元素 | 集合元素 | $(".one + div") 選取 class 為 one 的下一個<div> 同輩元素 |
$(“prev ~ siblings”) | 選取 prev 元素之後的所有 siblings 元素 | 集合元素 | $("#two ~ div") 選取id為 two 的元素後面的所有 <div> 同輩元素 |
解釋:$("prev + next")
選取的是所有 prev 元素後的 第一個 next 元素。$("prev ~ siblings")
選取的是所有 prev 元素後的所有的 siblings 元素。
4.3 過濾選擇器
4.3.1 基本過濾選擇器
表4-3 基本過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:first | 選取第 1 個元素 | 單個元素 | $("div:first") 選取所有<div> 元素中第 1 個<div> 元素 |
:last | 選取最後一個元素 | 單個元素 | $("div:last") 選取所有<div> 元素中最後一個<div> 元素 |
:not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $("input:not(.myClass)") 選取 class 不是 myClass 的<input> 元素 |
:even | 選取索引是偶數的所有元素,索引從 0 開始 | 集合元素 | $("input:even") 選取索引是偶數的<input> 元素 |
:odd | 選取索引是奇數的所有元素,索引從 0 開始 | 集合元素 | $("input:odd") 選取索引是奇數的<input> 元素 |
:eq(index) | 選取索引等於 index 的元素(index 從 0 開始) | 集合元素 | $("input:eq(1)") 選取索引等於 1 的<input> 元素 |
:gt(index) | 選取索引大於 index 的元素(index 從 0 開始) | 集合元素 | $("input:eq(1)") 選取索引大於 1 的<input> 元素 |
:lt(index) | 選取索引小於 index 的元素(index 從 0 開始) | 集合元素 | $("input:eq(1)") 選取索引小於 1 的<input> 元素 |
:header | 選取所有的標題元素, 例如h1,h2,h3等等 | 集合元素 | $(":header") 選取網頁中所有的<h1> ,<h2> ,<h3> …… |
:animated | 選取當前正在執行動畫的所有元素 | 集合元素 | $("div:animated") 選取正在執行動畫的<div> 元素 |
:focus | 選取當前獲取焦點的元素 | 集合元素 | $(":focus") 選取當前獲取焦點的元素 |
4.3.2 內容過濾選擇器
表4-3 內容過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:contains(text) | 選取含有文字內容為“text”的元素 | 集合元素 | $("div:contains('我')") 選取含有文字“我”的<div> 元素 |
:empty | 選取不包含子元素或者文字的空元素 | 集合元素 | $("div:empty") 選取不包含子元素(包括文字元素)的<div> 空元素 |
:has(selector) | 選取含有選擇器所匹配的元素的元素 | $("div:has(p)") 選取含有<p> 元素的<div> 元素 |
|
:parent | 選取含有子元素或者文字的元素 | 集合元素 | $("div:parent") 選取擁有子元素(包括文字元素)的<div> 元素 |
4.3.3 可見性過濾選擇器
表4-3 可見性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:hidden | 選取所有不可見的元素 | 集合元素 | $(":hidden") 選取所有不可見的元素。包括<input type="hidden"/> ,<div style="display: none;"> 和<div style="visibility: hidden;"> 等元素。如果只想選取<input> 元素,可以使用$("input:hidden") |
:visible | 選取所有可見元素 | 集合元素 | $("div:visible") 選取所有可見的<div> 元素 |
4.3.4 屬性過濾選擇器
表4-4 屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
[attribute] | 選取擁有此屬性的元素 | 集合元素 | $("div[id]") 選取擁有屬性id的元素 |
[attribute=value] | 選取屬性的值為 value 的元素 | 集合元素 | $("div[title=test]") 選取屬性 title 為“test”的<div> 元素 |
[attribute!=value] | 選取屬性的值不等於 value 的元素 | 集合元素 | $("div[title!=test]") 選取屬性 title 不等於“test”的<div> 元素(注意:沒有屬性 title 的<div> 元素也會被選取) |
[attribute^=value] | 選取屬性的值以 value 開始的元素 | 集合元素 | $("div[title^=test]") 選取屬性 title 以“test”開始的<div> 元素 |
[attribute$=value] | 選取屬性的值以 value 結束的元素 | 集合元素 | $("div[title$=test]") 選取屬性 title 以“test”結束的<div> 元素 |
[attribute*=value] | 選取屬性的值含有 value 的元素 | 集合元素 | $("div[title*=test]") 選取屬性 title 含有“test”的<div> 元素 |
[attribute|=value] | 選取屬性等於給定字串或以該字串為字首(該字串後跟一個連字元“-”)的元素 | 集合元素 | $("div[title|='en']") 選取屬性 title 等於 en 或以 en 為字首(該字串後跟一個連字元“-”)的元素 |
[attribute~=value] | 選取屬性用空格分隔的值中包含給定值 value 的元素 | 集合元素 | $("div[title~='uk']") 選取屬性 title 用空格分隔的值中包含字元 uk 的元素 |
[attribte1][attribte2][attribteN] | 用屬性選擇器合併成一個符合屬性選擇器,滿足多個條件。每選擇一次,縮小一次範圍 | 集合元素 | $("div[id][title$='test']") 選取擁有屬性 id ,並且屬性 title 以“test”結束的<div> 元素 |
4.3.5 子元素過濾選擇器
表4-5 子元素過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:nth-child(index/even/odd/equation) | 選取每個父元素下的第 index 個子元素或則奇偶元素。( index 從 1 算起) | 集合元素 | :eq(index) 值匹配一個元素,而 :nth-child 將為每一個父元素匹配子元素,並且 :nth-child(index) 的 index 是從 1 開始的,而 :eq(index) 是從 0 算起的 |
:first-child | 選取每個父元素的第 1 個子元素 | 集合元素 | :first 只返回單個元素,而 :first-child 選擇符將為每個父元素匹配第 1 個子元素。例如$("ul li:first-child") ;選擇每個<ul> 中第 1 個<li> 元素 |
:last-child | 選取每個父元素的最後一個子元素 | 集合元素 | 同樣 :last 只返回單個元素,而 :last-child 選擇符將為每個父元素匹配最後一個子元素。例如$("ul li:last-child") ;選擇每個<ul> 中最後一個<li> 元素 |
:only-child | 如果某個元素是它父元素中唯一的子元素,那麼將會被匹配。如果父元素中含有其他元素,則不會被匹配 | 集合元素 | $("ul li:only-child") 在<ul> 中選取是唯一子元素的<li> 元素 |
4.3.6 表單物件屬性過濾選擇器
表4-6 表單物件屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:enabled | 選取所有可用元素 | 集合元素 | $("#form1 :enabled") 選取 id 為“form1”的表單內的所有可用元素 |
:disabled | 選取所有不可用元素 | 集合元素 | $("form2 :disabled") 選取 id 為“form2”的表單內的所有不可用元素 |
:checked | 選取所有被選中的元素(單選框,複選框) | 集合元素 | $("input:checked") 選取所有被選中的<input> 元素 |
:selected | 選取所有被選中的選項元素(下拉列表) | 集合元素 | $("select option:selected") 選取所有被選中的選項元素 |
4.4 表單選擇器
表4-7 表單物件屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:input | 選取所有的<input> 、<textarea> 、<select> 和<button> 元素 |
集合元素 | $(":input") 選取所有<input> 、<textarea> 、<select> 和<button> 元素 |
:text | 選取所有的單行文字框 | 集合元素 | $(":text") 選取所有的單行文字框 |
:password | 選取所有的密碼框 | 集合元素 | $(":password") 選取所有的密碼框 |
:radio | 選取所有的單選框 | 集合元素 | $(":radio") 選取所有的單選框 |
:checkbox | 選取所有的多選框 | 集合元素 | $(":checkbox") 選取所有的多選框 |
:submit | 選取所有的提交按鈕 | 集合元素 | $(":submit") 選取所有的提交按鈕 |
:image | 選取所有的影象按鈕 | 集合元素 | $(":image") 選取所有的影象按鈕 |
:reset | 選取所有的重置按鈕 | 集合元素 | $(":text") 選取所有的重置按鈕 |
:button | 選取所有的按鈕 | 集合元素 | $(":button") 選取所有的按鈕 |
:file | 選取所有的上傳域 | 集合元素 | $(":file") 選取所有的上傳域 |
:hidden | 選取所有的不可見元素 | 集合元素 | $(":hidden") 選取所有的不可見元素 |
參考文獻
- 《鋒利的jQuery》(第2版) 單東林 張曉菲 魏然 編著