【JQuery】属性名や属性値で検索して目的の場所を探す

投稿者: | 2020年11月9日
JQueryアイキャッチ画像

今回はJQueryの属性名と属性値を選択するいろいろな方法をデモしていきたいと思います。

それではいってみましょう(^^♪

 

属性名 $(‘[ 属性 ]’)

$(‘[ 属性 ]’)

属性名が選択できます。

【サンプル】


クラス属性にstyle属性が追加されます。

属性

【結果】

属性

 

 

属性値 $(‘[ 属性 = “値” ]’)

$(‘[ 属性 = “値” ]’)

完全一致する属性値を選択

【サンプル】


完全一致のsample属性値にstyleが追加されます。

属性値完全一致

【結果】

属性値完全一致

 

 

指定した属性値以外 [ 属性名 != ‘値’ ]

!=

[ 属性名 != ‘値’ ]

【サンプル】

 

指定した属性値以外にstyle属性が追加されます。

check!

結果を見ればわかりますが、本当はクラスsample(あああ)に色を付けたくありませんでした。

下記のDOM上ではきちんとクラスsampleにはstyle属性は効いていないのが確認できます。

ですがここで気を付けたいのがulにstyle属性が効いてる為、liのクラスsample(あああ)も赤色のフォントに変わってしまいます!

指定属性値以外

【結果】

下記のようにulタグ使用時は気を付けましょう!

指定属性値以外

 

 

属性値の先頭が一致 $(‘[ 属性 ^= “値” ]’)

^=

$(‘[ 属性 ^= “値” ]’)

【サンプル】

 

class属性値の先頭に一致するsampleにstyle属性が追加されます。

属性値前方一致

【結果】

前方一致

 

 

属性値の末尾が一致 $(‘[ 属性 $= “値” ]’)

$=

$(‘[ 属性 $= “値” ]’)

【サンプル】

 

class属性値の末尾に一致するsampleにstyle属性が追加されます。

属性値後方一致

【結果】

後方一致

 

 

属性値の含む $(‘[ 属性 *= “値” ]’)

*=

$(‘[ 属性 *= “値” ]’)

【サンプル】

 

クラス属性値の_(アンダースコア)が含まれるclassにstyle属性が追加されます。

属性値含む

【結果】

属性値含む

 

 

まとめ

今回は属性名と属性値をデモしてみましたが先程のデモでも見たとおりDOMとサイト上の表示が違うので気を付けましょう!

以上です(^▽^)o