【jQuery入門】属性セレクタを上手く使い分けよう

以前、jQueryの「セレクタ」について学びましたが、今度は「属性セレクタ」について解説していきます。

こちらもCSSと同じでなので、CSSの知識があるなら問題なく理解できると思います。では早速見ていきましょう。

属性セレクタとは？

idやclassそれにaタグで使われるhrefやtargetなどの、指定された属性の存在の有無や、その値に基づいて要素を取得します。

属性セレクタの種類

属性セレクタの種類は以下の通りです。

[属性名 = '値']

指定した属性値をもつ要素を選択します。

以下の場合、href属性の値がhttp://japanの要素のみ文字色が赤色になります。

HTML

<div id="BOX">
  <a href="http://japan">日本</a>
  <a href="http://america">アメリカ</a>
  <a href="https://italy">イタリア</a>
  <a href="https://china">中国</a>
</div>

jQuery

$("[href = 'http://japan']").css("color","red");

[属性名 != '値']

指定した属性値をもたない要素を選択します。

以下の場合、href属性の値がhttp://japan以外の要素のみ文字色が赤色になります。

HTML

<div id="BOX">
  <a href="http://japan">日本</a>
  <a href="http://america">アメリカ</a>
  <a href="https://italy">イタリア</a>
  <a href="https://china">中国</a>
</div>

jQuery

$("[href != 'http://japan']").css("color","red");

[属性名 ^= '値']

指定した属性値で始まる要素を選択します。

以下の場合、href属性の値がhttpsで始まる要素のみ文字色が赤色になります。

HTML

<div id="BOX">
  <a href="http://japan">日本</a>
  <a href="http://america">アメリカ</a>
  <a href="https://italy">イタリア</a>
  <a href="https://china">中国</a>
</div>

jQuery

$("[href ^= 'https']").css("color","red");

[属性名 $= '値']

指定した属性値で終わる要素を選択します。

以下の場合、href属性の値がjapanで終わる要素のみ文字色が赤色になります。

HTML

<div id="BOX">
  <a href="http://japan">日本</a>
  <a href="http://america">アメリカ</a>
  <a href="https://italy">イタリア</a>
  <a href="https://china">中国</a>
</div>

jQuery

$("[href $= 'japan']").css("color","red");

[属性名 *= '値']

指定した属性値を含む要素を選択します。

以下の場合、href属性の値にhttpが含まれる要素のみ文字色が赤色になります。

HTML

<div id="BOX">
  <a href="http://japan">日本</a>
  <a href="http://america">アメリカ</a>
  <a href="https://italy">イタリア</a>
  <a href="https://china">中国</a>
</div>

jQuery

$("[href *= 'http']").css("color","red");

まとめ

今回はhref属性のみを例にあげましたが、他にも沢山属性はありますので、色々と試してみてください。

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。