jQuery神奇的選擇器(Selector)
就像正規運算式(Regular Expression)的Pattern match一般，jQuery使用了CSS(Cascading Style Sheet)、XPath(XML Path Language)與自訂等三大類的選擇器(Selector)當做$( )函數的參數，讓我們由複雜多樣的DOM結構裡，快速的找出符合樣式的要素。
使用選擇器的三個基本格式是：
| 序 | 格式 | 範例 | 說明 |
|---|---|---|---|
| 1 | $("HTML標籤") | $("div") | 傳回表示所有div要素的jQuery物件 |
| 2 | $("#要素的ID") | $("#linksLeft") | 傳回表示
要素的jQuery物件
|
| 3 | $(".要素的類別") | $(".blogname") | 傳回
要素的jQuery物件
|
CSS選擇器
更完整的CSS Selector如下表：
| 樣 式 | 說明 | 範例 |
|---|---|---|
| * | 萬用選擇器(Universal selector)；表示所有的要素 | $("*") |
| E | Type selectors；選取指定的要素類型 | $("div") 選取所有的div要素 |
| E > F | Child selectors；選取E的子要素F | $("div > li") 選取div要素裡的子要素li |
| E F | Descendant selectors；選取E的後代要素F，子代、孫代、... | $("div li") |
| E + F | 套用緊鄰在E之後的要素F | 範例在表格下面 |
| E:first-child | E是第一個子要素；這個表示方法似乎不是很直覺，容易被理解成是E的第一個子要素，但其實是：E是其父要素的第一個子要 素 | $(".blogbody:first-child") 找到首頁第一篇文章 |
| E:last-child | E是其父要素的最後一個子要素 | $(".blogbody:last-child") 找到首頁最後一篇文章 |
| E:nth-child(n) | E是其父要素的第n個子要素 | $(".blogbody:nth-child(2)") 找到首頁第３篇文章(由0起算) |
| E:only-child | E是唯一的子要素 | $(".blogname:only-child") |
| E:empty | E沒有任何的子要素 | $("div:empty") |
| E:enabled | 生效的要素E | HTML標籤沒有被加上disabled |
| E:disabled | 失效的要素E | HTML標籤被加上disabled |
| E:checked | 被勾選的要素E | HTML標籤被加上chedked |
| E:selected | 被選取的要素E | HTML標籤被加上selected |
| E:not(s) | 不屬於s的要素E | $(".blogbody:not(blogbody_even) |
| E[@attr] | 有指定屬性的要素E | $("a[@href]) 找出所有的") |
| E[@attr=value] | 屬性的值完全相同的要素E | $("h3[@class=hdr]") |
| E[@attr^=value] | 屬性的值以value開頭的要素E | $("a[@href^=http://blog.xuite.net]") |
| E[@attr$=value] | 屬性的值以value結尾的要素E | $("a[@href$=.pdf]") |
| E[@attr*=value] | 屬性的值含有value的要素E | $("a[@href*=xuite.net]") |
| E[@attr1=value1] [@attr2=value2 |
選取條件同時成立的要素E |
- E + F 範例：
h2 + * { color:green } /*所有緊隨 h2 的要素内的文字皆為紅色 */
h1 + p { border-top: 3px solid #f60; }
- HTML原始碼(標題會套用h1 + p)：
標題
段落 A 段落 B 段落 C
自訂的選擇器
| 樣 式 | 說明 | 範例 |
| :even | 要素的偶數項 | $("tbody tr:even").addClass("even") |
| :odd | 要素的奇數項 | $("tbody tr:odd").addClass("odd") |
| :eq(N) | 第N項的要素 | $("div.blogbody:eq(0)") 選第一篇文章 |
| :gt(N) | 大於第N項的要素 | $("div.blogbody:gt(3)") 選第五篇(由0起算)~第十篇的文章(假設首頁只有十篇) |
| :lt(N) | 小於第N項的要素 | $("div.blogbody:lt(3)") 選第一篇至第三篇文章 |
| :first | 等於:eq(0)，第一個要素 | $("div.blogbody:first') 選第一篇文章 |
| :last | 最後的要素 | $("div.blogbody:last") 第十篇文章 |
| :parent | 選取自己是父代的要素 | $("div.blogbody:parent") 有子要素的文章會被選取 |
| :contains("text") | 選取含有指定文字的要素 | $("div.title:contains('jQuery')") 找出有jQuery字串的標題 |
| :visible | 有呈現出的要素 | |
| :hidden | 隱藏了的要素 |
表單的選擇器
| 樣 式 | 說明 | 範例 |
| :input | 選取所有的輸入要素，包含input、select、textara、 button等 | $("#form1 :input") |
| :text | 選取 的要素 |
|
| :password | 選取 的要素 |
|
| :radio | 選取 的要素 |
|
| :checkbox | 選取 的要素 |
|
| :submit | 選取 的要素 |
|
| :image | 選取 的要素 |
|
| :reset | 選取 的要素 |
|
| :button | 選取 的要素 |
|
| :reset | 選取 的要素 |
|
| :file | 選取 的要素 |
- 表單和選擇器之間至少要空一格，如: $("#fom1 :button")會生效，$("#form1:button")則無法運作
參考：http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors
您可能也會有興趣的類似文章
- jQuery選擇器測試與範例 (0則留言, 2007/09/29)
- [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
- 使用jQuery的效益 (0則留言, 2007/09/23)
- jQuery在Xuite的測試 (0則留言, 2007/10/01)
- 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
- 用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
- FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
- 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
- [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
- 在Xuite測試 jQuery (0則留言, 2007/09/12)
- jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
- 方便查閱的jQuery 1.2 Cheat Sheet (1則留言, 2007/09/25)
- 使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
- jQuery TreeView插件IE異常解決方法 (0則留言, 2007/11/13)
- 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)
感謝分享整理的成果，學習 selector 沒有比看範例還容易理解的了，
找了許多網頁都沒有範例，沒想到您這麼多年前就整理好了，
真是造福後來的學習者。
請問一下唷
我在使用選擇器時有個問題
搜尋某個form裡,id=title的數量為何
alert($("#scope1Form [@id=title]").size());
但是ie可以顯示的出數量,但firefox跟safari都顯示為0,是因為我的寫法有錯嗎…