JQuery 模糊匹配（JQuery 選擇器模糊匹配、選擇指定屬性是以給定字串開始的元素 ）
我們在使用 JQuery 的時候，有時需要選擇多個屬性以指定字串開頭或者包含某些字串的時候。
比如，我們一個頁面中，所有的被罰款人的 input 輸入框的 id 或者 name命名規則如下：
都以 beFineMan 開頭，然後後面依次加上不同的數字，例如這樣
<input id="beFinedMan1" name="beFinedMan1" />
<input id="beFinedMan2" name="beFinedMan2" />
<input id="beFinedMan3" name="beFinedMan3" />那麼，選擇所有的被罰款人輸入框中的 value，我們就需要使用模糊匹配。
JQuery API 提供的模糊匹配方法常用的有如下幾個：
1、選擇指定屬性值等於給定字串或以該字串為字首（該字串後跟一個連字元“-” ）的元素
（Attribute Contains Prefix Selector [name|="value"]） 例子請見部落格底部 例1.
2、選擇指定屬性具有包含一個給定的子字串的元素。（選擇給定的屬性是以包含某些值的元素）
（Attribute Contains Selector [name*="value"] ） 例子請見部落格底部 例2.
3、選擇指定屬性用空格分隔的值中包含一個給定值的元素
（Attribute Contains Word Selector [name~="value"] ） 例子請見部落格底部 例3.
4、選擇指定屬性是以給定值結尾的元素。這個比較是區分大小寫的
（Attribute Ends With Selector [name$="value"] ） 例子請見部落格底部 例4.
5、選擇指定屬性是給定值的元素
（Attribute Equals Selector [name="value"]） 例子請見部落格底部 例5.
6、選擇不存在指定屬性，或者指定的屬性值不等於給定值的元素
（Attribute Not Equal Selector [name!="value"]） 例子請見部落格底部 例6.
7、選擇指定屬性是以給定字串開始的元素
（Attribute Starts With Selector [name^="value"]） 例子請見部落格底部 例7.
例1：
jQuery( "[attribute|='value']" )
attribute: 一個屬性名.
value: 一個屬性值，引號是可選的. 可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢hreflang屬性值是英語的所有連結
<!DOCTYPE html> <html> <head> <style> a { display: inline-block; } </style> <script src="https://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> $('a[hreflang|="en"]').css('border','3px dotted green'); </script> </body> </html>結果如下：
例2：
jQuery( "[attribute*='value']" )
attribute: 一個屬性名.
value: 一個屬性值，可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢所有 input 的 name 屬性中帶有 'man' 的元素，並將它們的值設為一些文字
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-latest.js"></script> </head> <body> <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> <script>$('input[name*="man"]').val('has man in it!');</script> </body> </html>結果如下：
例3：
jQuery( "[attribute~='value']" )
attribute: 一個屬性名.
value: 一個屬性值，可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢所有屬性中含有 'man' 這個單詞的文字框，並且修改其文字值
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-latest.js"></script> </head> <body> <input name="man-news" /> <input name="milk man" /> <input name="letterman2" /> <input name="newmilk" /> <script>$('input[name~="man"]').val('mr. man is in it!');</script> </body> </html>結果如下：
例4：
jQuery( "[attribute$='value']" )
attribute: 一個屬性名.
value: 一個屬性值，可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢所有的屬性名稱以“letter”的結束，並把他們的文字輸入
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-latest.js"></script> </head> <body> <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> <script>$('input[name$="letter"]').val('a letter');</script> </body> </html>結果如下：
例5：
jQuery( "[attribute='value']" )
attribute: 一個屬性名.
value: 一個屬性值，可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢所有屬性值為 'Hot Fuzz' 的 input 元素，並且將跟在它後面的 span 元素中的文字修改成 " Hot Fuzz"
<!DOCTYPE html> <html> <head> <script src="https://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>$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script> </body> </html>結果如下：
例6：
jQuery( "[attribute!='value']" )
attribute: 一個屬性名.
value: 一個屬性值，可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢所有 name 屬性不是 'newsletter' 的元素，並在其後的 span 中追加 '; not newsletter' HTML
<!DOCTYPE html> <html> <head> <script src="https://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>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script> </body> </html>結果如下：
例7：
jQuery( "[attribute^='value']" )
attribute: 一個屬性名.
value: 一個屬性值，可以是一個不帶引號的一個單詞或帶一個引號的字串。
例：查詢所有 input 中 name 屬性以 'news' 開頭的元素，並將它們的值設定為一些文字
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-latest.js"></script> </head> <body> <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> <script>$('input[name^="news"]').val('news here!');</script> </body> </html>結果如下：
