就像正�運 算式(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 |
$(".要素的��e") |
$(".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]
[@attr2=value2 |
選取𡐤件同媆成立的要素E |
h2 + * { color:green } /*所有緊隨 h2 的要素内的文字皆鮋紅色 */
h1 + p { border-top: 3px solid #f60; }
<h1>㻢題</h1>
<p>段落 A</p>
<p>段落 B</p>
<p>段落 C</p>
自�的選欅器
畭 式 |
說明 |
�例 |
: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 |
選取<input type="text">的要素 |
|
:password |
選取<input type="password">的要素 |
|
:radio |
選取<input type="radio">的要素 |
|
:checkbox |
選取<input type="checkbox">的要素 |
|
:submit |
選取<input type="submit">的要素 |
|
:image |
選取<input type="image">的要素 |
|
:reset |
選取<input type="reset">的要素 |
|
:button |
選取<input type="button">的要素 |
|
:reset |
選取<input type="reset">的要素 |
|
:file |
選取<input type="file">的要素 |
|
- 表�和選欅器之間至少要空一格，如: $("#fom1 :button")𩂰生效，$("#form1:button")�t剠法運作
�考：http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors
表�和選欅器之間至少要空一格，如: $("#fom1 :button")𩂰生效，$("#form1:button")�t剠法運作
這點要補充一下
$("#fom1 :button")是指button,且被id鮋form1的𡌂西包著
$("#form1:button")是指id鮋form1的button
那空格是十分重要的
| 