KingKong Bruce記事: jQuery - Selectors (5) Attribute

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 文件翻譯編寫。

Attribute [name|="value"]
Attribute [name*="value"]
Attribute [name~="value"]
Attribute [name$="value"]
Attribute [name="value"]
Attribute [name!="value"]
Attribute [name^="value"]
Attribute [name]
Attribute [name="value][name2="value2"]

沒有留言:

張貼留言

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

訂閱：張貼留言 (Atom)

KingKong Bruce記事

網頁