屬性字頭選擇器(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” 的元素都不會被選擇。
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //以指定字符開頭 alert($("[id^='A_M']").length); //所有以id為"A_M"開頭的,彈出6 //以指定字符結尾 alert($("[id$='_04']").length); //所有以id為"_04"結尾的,彈出4 //包含指定字符 alert($("[id*='M']").length); //所有id包含"M"的,彈出9 //指定對象內選擇 alert($("div[id^='A_M']").length); //所有div以id為"A_M"開頭的,彈出4 //可以在指定DOM內選擇 }); // 區分大小寫 </script> </head> <body> <div id="A_M_01"> <li id="A_M_01_ul"></li> </div> <div id="A_M_02"> <li id="A_M_02_ul"></li> </div> <div id="A_M_03"></div> <div id="A_M_04"></div> <div id="B_M_04"></div> <div id="C_M_04"></div> <div id="D_M_04"></div> </body> </html>