屬性選擇器 (jQuery 3)

官網連結

※七種屬性

有分大小寫

$(function($) {
    $("[name|='link']").css("color", "lightblue");
});
----------
<a name="link">a</a>
<a name="link ">b</a>
<a name=" link">c</a>
<a name="Dlink">d</a>
<a name="link-a">e</a>
<a name="linking">f</a>
<a name="D-link">g</a>

※以上面的例子，效果成功的如下：
=：剛好是什麼的，以下的6種都是以這個為出發點，成功的是a
!=：不是什麼的，成功的是全部，以下會說明
*=：字串裡的其中一部分或全部，都抓的到，成功的是全部
^=：開頭是什麼的，成功的是abef
$=：結尾是什麼的，成功的是acdg
~=：前後有空格也抓的到，成功的是abc
|=：後面有接「-」也抓的到，成功的是ae

※!=

注意官網的最後一句：or do have the specified attribute but not with a certain value.
沒有value屬性會選中的意思，所以<div><span><p>沒有value屬性都會選中

以下的input是有value屬性的：所以就只是不等於的意思，我試過不給value和value=""都是很正常的

<input name="link" value="a"/>
<input name="link " value="b"/>
<input name=" link" value="c"/>
<input name="Dlink" value="d"/>
<input name="link-a" value="e"/>
<input name="linking" value="f"/>
<input name="D-link" value="g"/>

※將超連結的a，改成input後，「!=」終於是b~g了

※官方有說這不是CSS的規範，所以效能差，使用$( "your-pure-css-selector" ).not( "[name='value']" )會比較好

※所以「!=」最好用在有value屬性時

※一次選多個

$("[id][name$='link']" ).css('border', '1px solid red');
----------
<input id="" name="link" value="a"/>
<input name="link " value="b"/>
<input name=" link" value="c"/>
<input name="Dlink" value="d"/>

※只有a會被選中，[id]表示要設定id，像我的a是空的也可以，如果要更準確，可以下[id="xxx"]