Jquey模糊選擇


屬性字頭選擇器(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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM