- 相關(guān)推薦
Jquery實(shí)戰
基本的CSS選擇器
熟悉web開(kāi)發(fā)的人員一定對css的選擇功能相當的了解，通過(guò)css選擇功能，我們可以在css樣式文件里輕松的將樣式應用到選擇的頁(yè)面元素上。jQuery也正是采用了這樣的機制，使jQuery的元素選擇能力易常強大。
a——選擇所有元素
#specialID——選擇匹配id為specialID的元素
.specialClass——選擇匹配擁有css類(lèi)sepcialClass的元素
a#specialID.specialClass——選擇匹配id為specialID、有用css類(lèi)specialClass的元素
p a.specialClass——匹配擁有css類(lèi)specialClass、在
元素內的元素
除了支持傳統的css選擇器，Jquery還支持CSS3選擇功能。
子節點(diǎn)選擇器
$("p > a") 選擇元素
的直接子節點(diǎn)的元素，非直接子節點(diǎn)的元素將不會(huì )被選擇到
特性選擇器
特性選擇器在匹配的選擇元素上過(guò)濾滿(mǎn)足某特性(屬性)的元素
如我們需要做如下的選擇：匹配所有指向本網(wǎng)站之外地址的鏈接，我們可以這樣選擇
$("a[href^=http://") 該選擇器選擇具有href屬性，且href屬性值以http://開(kāi)始的鏈接元素
特性選擇的語(yǔ)法是：
選擇具有某特性(屬性)的元素
form[method]
選擇具有某特性，且屬性值為指定值的元素
input[type=text]
選擇匹配特性以特定字符開(kāi)頭的元素
div[title^=my] ——選擇匹配title特性值已my開(kāi)頭的所有div元素
選擇匹配特性以特定字符結束的元素
a[href$=.pdf] ——選擇引用了pdf文件的所有鏈接元素
其他
a[href*=jquery.com]選擇引用jQuery網(wǎng)站的所有鏈接元素
過(guò)濾符
通過(guò)過(guò)濾符選擇器可以在已選擇的元素中過(guò)濾出需要的元素，上面的特性選擇器也屬于過(guò)濾符，另外還有“:”字符
如：
li:has(a)—— 選擇匹配包含元素的所有
元素
1. 基礎過(guò)濾符：
:first：匹配多個(gè)對象中的第一個(gè)對象
:last：匹配多個(gè)對象中的最后一個(gè)對象
:not(selector)：匹配去除了not后面選擇符中內容的項，not中的selector只能是過(guò)濾選擇器，不能是查找選擇器
:even：匹配所有對象中的第偶數個(gè)
:odd：匹配所有對象中的第奇數個(gè)
:eq(index)：匹配某一下表的單獨某元素
:gt(index)：匹配大于某一下標的所有元素
:lt(index)：匹配小于某一下標的所有元素
:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6
:animated：匹配所有有動(dòng)畫(huà)效果的元素
2. 內容過(guò)濾符：
:contains(text)：匹配內部擁有該文本元素的對象，包含間接有用的情況
:empty：匹配所有沒(méi)有子元素的對象
:has(selector)：匹配所有至少含有一個(gè)子選擇符的對象
:parent：匹配元素，這些元素包含子元素（包括文本元素）
3. 可見(jiàn)性過(guò)濾符：
:hidden：匹配所有隱藏對象，或者input中的hidden類(lèi)型
:visible：匹配所有可見(jiàn)的對象
4. 子過(guò)濾符：
:nth-child(index/even/odd/equation)：匹配子元素中的某一下標/偶數/奇數/等式的對象，:eq(index)只能匹配某單一對象的子元素特征，而這個(gè)方法可以匹配多個(gè)對象的某一子元素共同特征 nth-child過(guò)濾器，從1開(kāi)始計數，這主要是與css標準兼容。
:first-child：匹配第一個(gè)子元素
:last-child：匹配最后一個(gè)子元素
這兩個(gè)匹配符也可以對多個(gè)父對象的所有子元素進(jìn)行匹配操作
:only-child：如果一個(gè)父元素只有一個(gè)子元素，就匹配這個(gè)子元素
5. 表單過(guò)濾符
:input ：匹配表單內input元素
:text ：匹配表單內input type為text的元素
:password ：匹配表單內input type為password的元素
:radio ：匹配表單內input type為radio的元素
:checkbox ：匹配表單內input type為checkbox的元素
:submit ：匹配表單內input type為submit的元素
:image ：匹配表單內image的元素
:reset ：匹配表單內input type為reset的元素
:button ：匹配表單內input type為button的元素
:file ：匹配表單內input type為file的元素.
:hidden ：匹配表單內input type為hidden的元素或者hidden區域
:enabled ：匹配所有啟用元素
:disabled ：匹配所有非啟用元素
:checked ：匹配所有選中元素
:selected ：匹配所有下拉列表選中元素
查找選擇器和篩選選擇器的概念區別
為了能靈活的使用jQuery,認清查找選擇器、篩選選擇器之間的區別是非常重要的。篩選選擇器，通過(guò)對元素應用更高的選擇標準（如過(guò)濾特性或或其他相關(guān)值），縮小正在匹配的元素的集合；查找選擇器，比如后代選擇器（空格）、子節點(diǎn)選擇器（>）以及兄弟節點(diǎn)選擇器（+）等，則查找與已選擇元素具有某種關(guān)系的其他元素，而不是通過(guò)把標準應用于已匹配元素來(lái)限制匹配范圍。
【Jquery實(shí)戰】相關(guān)文章：
jQuery程序設計08-05
jquery提交按鈕的代碼07-28
jQuery中prev()方法用法07-16
如何理解jquery事件冒泡09-15
jQuery的DOM操作筆記07-29
揮桿實(shí)戰教學(xué)05-24
jQuery 源碼分析和Ready函數06-28