jQuery 的選擇器借鑒了大量 CSS1 ~ CSS3 標准的特點,並且整理成一個強大的對象選擇工具集。但要注意的是如果你的對象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 這些元字符時,你必須用 “\\” 進行轉義。例如你要選擇文檔里包含 “name=”names[]“” 的 input 元素時,在編寫過濾規則時你必須先對 “[]” 進行轉義,所以我們應該這樣定義選擇器:“$(“input[name=names\\[\\]]”)”。
泛選擇器(*)
在 jQuery 選擇器里,“*” 號是一個通配符,表示所有。例如:
1 |
$("*").css("border","3px solid red") |
上面的一句表示遍歷頁面里的所有容器,並且全部賦予一個線寬為 3px 的紅色實線邊框。還有一種情況是我們只需要對某些容器里的內容進行操作,我們可以這樣寫:
1 |
$("#test").find("*").css("border","3px solid red") |
上一句只對 ID 為 test 的容器里的子容器產生效果,為它們加上線寬為 3px 的紅色實現邊框。
:animated 選擇器
:animated 選擇器是用來選擇當前執行 jQuery 動畫的元素的,嚴格來說是一個特征過濾器。例如:在空 HTML 文檔里建一些 Div ,其中一個 ID 為 mover ,然后編寫以下的 jQuery 語句
1 2 |
$("#mover").slideToggle("slow", animateIt); $("div:animated").toggleClass("colored"); |
上面的代碼執行后將先找到 ID 為 mover 的元素,並不斷地進行展開和收縮的動畫。然后瀏覽器遍歷頁面里所有的 Div 標簽,如果該 Div (在這個例子里也就是 ID 為 mover 的 Div 了)正在執行動畫的話,jQuery 將為這個 Div 加上 class=”colored”。具體的 Demo 可以看這個頁面。
屬性選擇器
jQuery 的屬性選擇器是其所有選擇器最強大的一個,也是最靈活復雜的,具體情況還可以繼續進行細分。
屬性字頭選擇器(Attribute Contains Prefix Selector)
jQuery 屬性字頭選擇器的使用格式是 jQuery(‘[attribute|=value]‘) ,例如 jQuery(‘[herflang|=en]‘) 這句代碼執行時將會選擇文檔中所有含有 herflang 屬性,並且 herflang 的值以 “en” 開頭的元素,即使 “en” 后面緊跟着連字符 “-” 也能進行選擇。
屬性開頭選擇器(Attribute Starts With Selector)
jQuery(‘[attribute^=value]‘) ,用於選擇屬性的值以某個字符串開頭的元素,但和 jQuery(‘[attribute|=value]‘) 的區別是,如果 value 的后面是一個連字符的話,這個元素不會被選擇。例如 jQuery(‘[rel^=no]‘) 將會選擇所有 rel 的值以 “no” 開頭的元素,但類似於 rel=”no-****” 的元素不會被選擇。
屬性包含選擇器(Attribute Contains Selector)
基本使用方法為 jQuery(‘[attribute*=value]‘),例如 jQuery(‘[rel*=no]‘),表示所有帶有 rel 屬性,並且 rel 的值里包含子字符串 “no” 的元素(如 rel=”nofollow”,rel=”yesorno” 等等)都將會被選擇。
屬性單詞選擇器(Attribute Contains Word Selector)
jQuery(‘[attribute~=value]‘),這個選擇器的特別之處在於 value 的值只能必須是一個獨立的單詞(或者是字符串),例如 jQuery(‘[rel~=no]‘) ,此句在執行的時候會選擇帶有 rel=”yes or no” 的元素,但不會選擇帶有 rel=”yesorno” 的元素。這個選擇器可以看做屬性包含選擇器的補充品,用於需要進行嚴格匹配的時候。
屬性結尾選擇器(Attribute Ends With Selector)
jQuery(‘[attribute$=value]‘) ,用於選擇特定屬性的值以某個字符串結尾的元素,例如 jQuery(‘[rel$=no]‘) 將會選擇 rel 屬性的值以 “no” 結尾的元素。
屬性均等選擇器(Attribute Equals Selector)
jQuery(‘[attribute=value]‘) ,只選擇屬性的值完全相等的元素,如:jQuery(‘[rel=nofollow]‘),則只選擇 rel=”nofollow” 的元素,差一點都不行!
屬性非等選擇器(Attribute Not Equal Selector)
jQuery(‘[attribute!=value]‘) ,和 :not([attr=value]) 的效果一樣,用於選擇屬性不等於某個值的元素,例如jQuery(‘[rel!=nofollow]‘),所有 rel=”nofollow” 的元素都不會被選擇。
按鈕選擇器(:button Selector)
jQuery(‘:button’) ,所有的 <input type=”button”> 和 <button> 元素都會被選擇。
Checkbox 選擇器(:checkbox Selector)
jQuery(‘:checkbox’) ,所有的 <input type=”checkbox”> 元素都會被選擇。
Checked 選擇器(:checked Selector)
jQuery(‘:checked’) ,可以看做是 Checkbox 選擇器的補充,用於選擇所有已經被勾選的 Checkbox 對象。
子元素選擇器(Child Selector)
jQuery(‘parent > child’),只選擇 parent 的子元素(下一級元素),不對子元素以下的元素進行選擇。
復合屬性選擇器 [attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(“input[id][name$='man']“) ;
說明: 復合屬性選擇器,需要同時滿足多個條件時使用.又是一個組合,這種情況我們實際使用的時候很常用.這個例子中選擇的是所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的元素.
通過屬性過濾(Attribute Filters)的學習,可以看出來,jQuery的選擇器用法是微妙的,得細致而為之.讓我想起來了那個因為一個小數點導致什么宇宙飛船爆炸還是什么的事了.有點聳人聽聞,但是等我們使用的非常非常多了以后,自然就很容易分開區別了.
