[原文地址:http://blog.xuite.net/emisjerry/tech/13659524]
就像正規運 算式(Regular Expression)的Pattern match一般，jQuery使用了CSS(Cascading Style Sheet)、XPath(XML Path Language)與自訂等三大類的選擇器(Selector)當做$( )函數的參數，讓我們由複雜多樣的DOM結構裡，快速的找出符合樣式的要素。
使用選擇器的三個基本格式是：
|
序 |
格式 |
範例 |
說明 |
|
1 |
$("HTML標籤") |
$("div") |
傳回表示所有div要素的jQuery物件 |
|
2 |
$("#要素的ID") |
$("#linksLeft") |
傳回表示<div id="linksLeft">要素的jQuery物件 |
|
3 |
$(".要素的類別") |
$(".blogname") |
傳回<div class="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]) 找出所有的<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] |
選取條件同時成立的要素E |
- E + F 範例：
h1 + p { border-top: 3px solid #f60; }
- HTML原始碼(標題會套用h1 + p)：
<p>段落 A</p>
<p>段落 B</p>
<p>段落 C</p>
自訂的選擇器
|
樣 式
|