jQuery - Selectors (5) Attribute - 屬性過濾器

jQuery屬性過濾器簡介

屬性過濾器針對HTML元素裡的屬性及屬性值來進行過濾與選擇的動作。例如,<a href="http://blog.kkbruce.net">KKBruce Blog</a>,我一天我想幫整個網站裡的連結加上target屬性,怎麼加?打開編輯器,一頁一頁慢慢看慢慢加?用搜尋目錄來取代?

jQuery屬性過濾器速查表

jQuery屬性過濾器
過濾器 說明 範例
[name|="value"] 選擇指定屬性等於字串值或以該字串為前綴的值(以字串後跟著一個連字符號"-")的元素。
這個過濾器是引入CSS規範來處理語言屬性。
$('[attribute|=value]')
[name*="value"] 選擇指定屬性包含特定字串值,不論在字串中的位置 $('[attribute*=value]')
[name~="value"] 選擇指定屬性包含特定字串值,字串用空格分隔 $('[attribute~=value]')
[name$="value"] 選擇指定屬性的字串是以字串值結尾
這個比較區分大小寫。
$('[attribute$=value]')
[name="value"] 選擇指定屬性的字串等於字串值 $('[attribute=value]')
[name!="value"] 選擇沒有指定屬性的元素,或指定屬性的字串不等於字串值 $('[attribute!=value]')
[name^="value"] 選擇指定屬性的字串是以字串值開頭 $('[attribute^=value]')
[name] 選擇所有具有指定屬性的元素,該屬性的字串可以是任何值。 $('[attribute]')
[name="value"][name2="value2"] 選擇符合所有指定屬性過濾器的元素 $('[attribute1=value1][attribute2=value2]')
attribute是一個屬性名稱,value是一個字串值,字串值的單雙引號(""或'')是選擇性,例如,$('[attribute|=value]')或$('[attribute|="value"]')都是正確的。


jQuery屬性過濾器範例

[name|="value"]過濾器範例:找出所有連結(a元素)有hreflang屬性且是英文(english)

[name|="value"]過濾器會執行兩個條件的過濾選擇,一是字串值等於value,二是字串值等於value-開頭。

注意:英文在網頁中的簡稱為en與en-UK,又例如中文有"zh"、"zh-tw"、"zh-hant"、"zh-cn",而不是english或chinese。
<!DOCTYPE html>
<html>
<head>
  <style>
 a { display: inline-block; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <a href="example.html" hreflang="en">Some text</a> 
  <a href="example.html" hreflang="en-UK">Some other text</a>
  <a href="example.html" hreflang="english">will not be outlined</a>
<script>
// 1. 選擇a集合元素裡hreflang屬性字串前綴為en及en-開頭的a元素
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>
</body>
</html>

雖然我們下的條件字串值為"en",但依CSS規格,它會把字串值改為兩段來過濾,一是字串值為"en",二是字串前綴為"en-"開頭的字串值,都是符合選擇條件的元素。

[name*="value"]過濾器範例:...。

字串值(value)可以出現在位何位置。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <input name="man-news" />
  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>
// 1. 選擇input集合元素裡有name屬性且字串值的任何位置有man字串
$("input[name*='man']").val("has man in it!");</script>
</body>
</html>
[name*=value]很像關鍵字搜尋,只要你的字串中有符合的關鍵字,就會被選擇。

[name~="value"]過濾器範例:由特定集合元的素屬性中選擇特定字串,字串必須由空格分隔

假設name的字串值有三組,"KKBruce"、"KK Bruce"、"KingKong Bruce",而且下的條件為[name~="Bruce"],符合的會有"KK Bruce"及"KingKong Bruce",因為只有這兩組的Bruce是用"空格分隔"。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="man-news" />
  <input name="milk man" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>
// 1. 由input集合元素中搜尋有屬性name且"man字串是用空格分隔"
$('input[name~="man"]').val('mr. man is in it!');</script>
</body>
</html>
記得,[name~="value"]屬性過濾器強調在「空格分隔」這個作用上。

[name$="value"]過濾器範例:由特定集合元素屬性中選擇特定字串,字串必須是在結尾處

注意,此[name$="value"]過濾器會區分大小寫,例如,[name$="bruce"]與[name$="Bruce"]兩個是不一樣的條件。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="newsletter" />
  <input name="milkman" />
  <input name="jobletter" />
<script>
// 1. 由input集合元素中搜尋有屬性name且"letter字串結尾"
$('input[name$="letter"]').val('a letter');</script>
</body>
</html>
JavaScript語言本身就是會區別大小寫,不知道jQuery文件為什麼在此屬性特別強調這一段。大小寫問題是出錯機會很高的一部分,不然常常會出現,程式怎麼查都對,結果就是出不來。

[name="value"]過濾器範例:由特定集合元素屬性中選擇特定字串,字串必須完全符合字串值

這是屬性過濾器中最簡單的一個,要完全符你所下的屬性及字串值才會選擇。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <label>
      <input type="radio" name="newsletter" value="Hot Fuzz" />
      <span>name?</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="Cold Fusion" />
      <span>value?</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="Evil Plans" />
      <span>value?</span>
    </label>
  </div>
<script>
// 1. 由input集合元素中找出有value屬性且字串值為"Hot Fuzz"
// 2. .next() 此input元素的下一個元素(span)
// 3. .text() 寫入文字節點
$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script>
</body>
</html>
很明顯,只有第一個input元素會被選擇,然後找下一個元素(span),在span元素內寫入字串" Hot Fuzz"。

[name!="value"]過濾器範例:由特定集合元素屬性中選擇特定字串,字串必須不含字串值

[name!="value"]過濾器與[name="value"]過濾器為相反關係

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name is newsletter</span>
  </div>
  <div>
    <input type="radio" value="Cold Fusion" />
    <span>no name</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name is accept</span>
  </div>
<script>
// 1. 由input集合元素中找出有name屬性,且字串值不等於newsletter
// 2. .next() 移至下一個元素
// 3. .append() 附加HTML Tag至元素中
$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>
</body>
</html>
[name!="value"]過濾器等同於:not([attribute=value])。

因為[name!="value"]是一個jQuery所延伸方法,並不是CSS規格的一部分,執行:has()查詢在原生DOM的querySelectorAll()方法中,並不能得到有利的執行效能。在主流瀏覽器中想要得到更好的效能,使用$("your-pure-css-selector").not('[attribute="value"]')來替代。

[name^="value"]過濾器範例:由特定集合元素屬性中選擇特定字串,字串開頭須含字串值

[name^="value"]與[name$="value"]為互為對照,一個是找開頭字串,一個是找結尾字串。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="newsletter" />
  <input name="milkman" />
  <input name="newsboy" />
<script>
// 1. 由input集合元素中找出有name屬性,且字串值開頭為news字串
// 2. .val() 寫入字串
$('input[name^="news"]').val('news here!');</script>
</body>
</html>
本選擇器可用來識別由伺服器端框架所產生的HTML頁面裡的系統性單元ID。然而,它將會比類別選擇器來的慢,因為類別選擇器可以將單元ID群組化。


[name]過濾器範例:由特定集合元素找含有特定屬性,字串值可為任何值

只找含有特定屬性的元素。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>
<script>
// 1. 由div集合元素且有設定id屬性的元素
// 2. .one() 進行單一次事件設定
$('div[id]').one('click', function(){
  // 1. 取得div的文字串接此div的id名稱
  var idString = $(this).text() + ' = ' + $(this).attr('id');
  // 2. 寫入串接後的字串
  $(this).text(idString);
});
</script>
</body>
</html>
這個範例只有div且有設定id屬性的div元素會被選擇,效果必須由你去點擊才會產生,點擊產生的效會改變文字內容。

[name="value"][name2="value2"]過濾器範例:設定多組屬性過濾條件,只有全部符合的元素會被選擇

設定多組屬性過濾條件,只有全部符合的元素會被選擇。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input id="man-news" name="man-news" />
  <input name="milkman" />
  <input id="letterman" name="new-letterman" />
  <input name="newmilk" />
<script>
// 1. 由input集合元素中找出
// 2. 有設定id屬性(過濾條件一)
// 3. 有設定name屬性且結尾為字串"man"(過濾條件二)
$('input[id][name$="man"]').val('only this one');</script>
</body>
</html>

KKBruce補充

屬性選擇器讓我們在操控HTML的屬性上可以很大的幫助,例如,我想設定a元素中提供pdf下載的連結樣式與圖示,$('a[href$=".pdf"]').css('...')。我又想設定壓縮檔的下載連結樣式與圖示,同理,$('a[href$=".7z"]').css('...'),透過集合元素+屬性過濾器,可以很精準的選擇你所想要的元素。

jQuery屬性過濾器修改歷程

[2012/1/4] 參考 jQuery 1.7 文件翻譯編寫。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「+1」,我會很高興的。

无觅相关文章插件,迅速提升网站流量