Jquery實戰

來源:文萃谷 1.84W

基本的CSS選擇器

Jquery實戰

熟悉web開發的人員一定對css的選擇功能相當的瞭解,通過css選擇功能,我們可以在css樣式文件裏輕鬆的將樣式應用到選擇的頁面元素上。jQuery也正是採用了這樣的機制,使jQuery的元素選擇能力易常強大。

a——選擇所有元素

#specialID——選擇匹配id為specialID的元素

ialClass——選擇匹配擁有css類sepcialClass的元素

a#ialClass——選擇匹配id為specialID、有用css類specialClass的元素

p ialClass——匹配擁有css類specialClass、在

元素內的元素

除了支持傳統的css選擇器,Jquery還支持CSS3選擇功能。

子節點選擇器

$("p > a") 選擇元素

的直接子節點的元素,非直接子節點的元素將不會被選擇到

特性選擇器

特性選擇器在匹配的選擇元素上過濾滿足某特性(屬性)的元素

如我們需要做如下的選擇:匹配所有指向本網站之外地址的鏈接,我們可以這樣選擇

$("a[href^=http://") 該選擇器選擇具有href屬性,且href屬性值以http://開始的鏈接元素

特性選擇的語法是:

選擇具有某特性(屬性)的元素

form[method]

選擇具有某特性,且屬性值為指定值的元素

input[type=text]

選擇匹配特性以特定字符開頭的元素

div[title^=my] ——選擇匹配title特性值已my開頭的所有div元素

選擇匹配特性以特定字符結束的元素

a[href$=] ——選擇引用了pdf文件的所有鏈接元素

其他

a[href*=]選擇引用jQuery網站的所有鏈接元素

過濾符

通過過濾符選擇器可以在已選擇的元素中過濾出需要的元素,上面的特性選擇器也屬於過濾符,另外還有“:”字符

如:

li:has(a)—— 選擇匹配包含元素的所有

元素

1. 基礎過濾符:

:first:匹配多個對象中的第一個對象

:last:匹配多個對象中的最後一個對象

:not(selector):匹配去除了not後面選擇符中內容的項,not中的selector只能是過濾選擇器,不能是查找選擇器

:even:匹配所有對象中的第偶數個

:odd:匹配所有對象中的第奇數個

:eq(index):匹配某一下表的單獨某元素

:gt(index):匹配大於某一下標的所有元素

:lt(index):匹配小於某一下標的所有元素

:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6

:animated:匹配所有有動畫效果的元素

2. 內容過濾符:

:contains(text):匹配內部擁有該文本元素的對象,包含間接有用的情況

:empty:匹配所有沒有子元素的對象

:has(selector):匹配所有至少含有一個子選擇符的對象

:parent:匹配元素,這些元素包含子元素(包括文本元素)

3. 可見性過濾符:

:hidden:匹配所有隱藏對象,或者input中的hidden類型

:visible:匹配所有可見的對象

4. 子過濾符:

:nth-child(index/even/odd/equation):匹配子元素中的某一下標/偶數/奇數/等式的對象,:eq(index)只能匹配某單一對象的子元素特徵,而這個方法可以匹配多個對象的某一子元素共同特徵 nth-child過濾器,從1開始計數,這主要是與css標準兼容。

:first-child:匹配第一個子元素

:last-child:匹配最後一個子元素

這兩個匹配符也可以對多個父對象的.所有子元素進行匹配操作

:only-child:如果一個父元素只有一個子元素,就匹配這個子元素

5. 表單過濾符

: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,認清查找選擇器、篩選選擇器之間的區別是非常重要的。篩選選擇器,通過對元素應用更高的選擇標準(如過濾特性或或其他相關值),縮小正在匹配的元素的集合;查找選擇器,比如後代選擇器(空格)、子節點選擇器(>)以及兄弟節點選擇器(+)等,則查找與已選擇元素具有某種關係的其他元素,而不是通過把標準應用於已匹配元素來限制匹配範圍。

熱門標籤