今回はJQueryの属性名と属性値を選択するいろいろな方法をデモしていきたいと思います。
それではいってみましょう(^^♪
Menu
属性名 $(‘[ 属性 ]’)
$(‘[ 属性 ]’)
属性名が選択できます。
【サンプル】
1 2 3 | $('button').click(function(){ $("[class]").css("color","red"); }); |
1 2 3 4 5 6 7 8 | <ul> <li class="sample_aaa">あああ</li> <li class="sample_bbb">いいい</li> <li class="ccc_sample">ううう</li> <li class="ddd_sample">えええ</li> <li class="sample abc">えええ</li> </ul> <button>ボタン</button> |
クラス属性にstyle属性が追加されます。
【結果】
属性値 $(‘[ 属性 = “値” ]’)
=
$(‘[ 属性 = “値” ]’)
完全一致する属性値を選択
【サンプル】
1 2 3 | $('button').click(function(){ $("[class='sample']").css("color","red"); }); |
1 2 3 4 5 6 7 8 | <ul> <li class="sample">あああ</li> <li class="sample_bbb">いいい</li> <li class="ccc_sample">ううう</li> <li class="ddd_sample">えええ</li> <li class="sample abc">おおお</li> </ul> <button>ボタン</button> |
完全一致のsample属性値にstyleが追加されます。
【結果】
指定した属性値以外 [ 属性名 != ‘値’ ]
!=
[ 属性名 != ‘値’ ]
【サンプル】
1 2 3 | $('button').click(function(){ $("[class!='sample']").css("color","red"); }); |
1 2 3 4 5 6 7 | <ul> <li class="sample">あああ</li> <li class="sample_bbb">いいい</li> <li class="ccc_sample">ううう</li> <li class="ddd_sample">えええ</li> <li class="sample abc">おおお</li> </ul> |
指定した属性値以外にstyle属性が追加されます。
check!
結果を見ればわかりますが、本当はクラスsample(あああ)に色を付けたくありませんでした。
下記のDOM上ではきちんとクラスsampleにはstyle属性は効いていないのが確認できます。
ですがここで気を付けたいのがulにstyle属性が効いてる為、liのクラスsample(あああ)も赤色のフォントに変わってしまいます!
【結果】
下記のようにulタグ使用時は気を付けましょう!
属性値の先頭が一致 $(‘[ 属性 ^= “値” ]’)
^=
$(‘[ 属性 ^= “値” ]’)
【サンプル】
1 2 3 | $('button').click(function(){ $("[class^='sample']").css("color","red"); }); |
1 2 3 4 5 6 7 8 | <ul> <li class="sample">あああ</li> <li class="sample_bbb">いいい</li> <li class="ccc_sample">ううう</li> <li class="ddd_sample">えええ</li> <li class="sample abc">えええ</li> </ul> <button>ボタン</button> |
class属性値の先頭に一致するsampleにstyle属性が追加されます。
【結果】
属性値の末尾が一致 $(‘[ 属性 $= “値” ]’)
$=
$(‘[ 属性 $= “値” ]’)
【サンプル】
1 2 3 | $('button').click(function(){ $("[class$='sample']").css("color","red"); }); |
1 2 3 4 5 6 7 8 | <ul> <li class="sample">あああ</li> <li class="sample_bbb">いいい</li> <li class="ccc_sample">ううう</li> <li class="ddd_sample">えええ</li> <li class="sample abc">えええ</li> </ul> <button>ボタン</button> |
class属性値の末尾に一致するsampleにstyle属性が追加されます。
【結果】
属性値の含む $(‘[ 属性 *= “値” ]’)
*=
$(‘[ 属性 *= “値” ]’)
【サンプル】
1 2 3 | $('button').click(function(){ $("[class*='_']").css("color","red"); }); |
1 2 3 4 5 6 7 8 | <ul> <li class="sample">あああ</li> <li class="sample_bbb">いいい</li> <li class="ccc_sample">ううう</li> <li class="ddd_sample">えええ</li> <li class="sample abc">えええ</li> </ul> <button>ボタン</button> |
クラス属性値の_(アンダースコア)が含まれるclassにstyle属性が追加されます。
【結果】
まとめ
今回は属性名と属性値をデモしてみましたが先程のデモでも見たとおりDOMとサイト上の表示が違うので気を付けましょう!
以上です(^▽^)o