久々にjQueryを使って作業したのですが その時属性フィルタが便利だと改めて気づいたのでまとめます。

基本の形 $(’[属性]’)

基本は[]で囲む形です。 いままで先頭にタグを絶対付けなきゃいけないって思っていましたがなくてもいけます。

$(’[属性=値]’)

指定した属性と値が一致した場合処理を行います。

$(’[属性!=値]’)

指定した属性がこの値を持っていない場合処理を行います。

$(’[属性^=値]’)

指定した属性がこの値ではじまる場合処理を行います。

$(’[属性$=値]’)

指定した属性がこの値でおわる場合処理を行います。

$(’[属性*=値]’)

指定した属性がこの値がどこかに入っている場合処理を行います。

$(’[属性1][属性2]’)

2つくっつけるとAND検索になります。 属性1を持っているかつ属性2を持っている場合処理を行います。

$(’[属性|=値]’)

これがちょっとわかりづらい。接頭語フィルタ。 属性の値がその値、または-で区切られた前に付いている場合処理を行う。

$('[name|="red"]').css({'color':'red'});

<p name="red">りんご</p>
<p name="red-sweet">いちご</p>
<p name="redsweet">ぶどう</p>

この場合りんごいちごは赤色になるけどぶどうには適用されません。

色んな種類の属性セレクタがありましたが、CSSでも同じセレクタが有ります。 ちなみにCSS3から登場した[属性^=値]、[属性$=値]、[属性*=値]などは jQuery1.0からサポートしています。