SEEDS Creator's Blog

読者です 読者をやめる 読者になる 読者になる

要素の選択について

jQuery js プログラミング

近頃は朝夕の気温がめっきり下がり、外に出るのが億劫になってきています。 そんな時は自宅にこもり、先日発売されたモンスターハンター4Gなんかをやりたくなりますね…まだ持っていませんが… 社内でモンハン部が発足すれば、迷わず購入するのですが…|ω・`)チラ

閑話休題、業務でjQueryを用いて諸々の機能を実装するのですが、その際に少々悩むjQueryでの要素の選択について、自身の備忘録を兼ねて書きます。

DOM要素の選択

まず、jQueryでは容易にDOM要素の選択が行なえます。

$("body")

上記のコードだけでbody要素を選択することができます。

基本的なセレクタ(セレクター)指定方法

セレクタの指定方法には、タグを指定する以外にも様々なパターンがあります。 以下に基本的なセレクタ指定方法を記述します。

要素(タグ)セレクタ

$("div")

div要素が選択ができます。

idセレクタ




指定したidを持つ要素が選択できます。

classセレクタ

$(".hogehoge")

指定したclassを持つ要素が選択できます。

グループセレクタ

$("body, div, p")

指定した要素が選択ができます。

$("body, #hoge, .hogehoge")

また、上記コードのように、異なるセレクタでの指定も可能です。

ユニバーサルセレクタ

$("*")

全ての要素が選択ができます。 ワイルドカードでの指定です。

属性セレクタ

<a href="" target="_blank">リンク</a&gt

このようにtarget属性を持ったaタグがあるとして、

$("a[target='_blank']")

上記コードで、target='_blank'の属性と値を持つaタグが選択できます。 また、属性セレクタには色々と指定方法があり、それについても記述します。

[属性名]

$("input[name]")

特定の属性を持つ要素を選択できます。

[属性名=値]

$("input[name="hoge"]")

属性の値が一致した要素を選択できます。

[属性名=!値]

$("input[name!='hoge']")

属性の値が完全一致しない要素を選択できます。

[属性名 *= 値]

$("input[name*='hoge']")

属性の値が部分一致した要素を選択できます。

<input name="hoge" type="text" >
<input name="hoge123" type="text" >
<input name="hoge hoga hogi" type="text" >

上記コードでは、全て対象です。

[属性名 ~= 値]

$("input[name~='hoge']")

区切られた単語ベースで一致した要素を選択できます。

<input name="hoge" type="text" >
<input name="hoge123" type="text" >
<input name="hoge hoga hogi" type="text" >

上記コードでは、1行目と3行目が対象です。

[属性名 ^= 値]

$("input[name^='hoge']")

値と前方一致した属性を持つ要素を絞り込みます。

<input name="hoge123" type="text" >
<input name="123hoge" type="text" >

上記コードでは、1行目が対象です。

[属性名 $= 値]

$("input[name$='hoge']")

値と後方一致した属性を持つ要素を絞り込みます。

<input name="hoge123" type="text" >
<input name="123hoge" type="text" >

上記コードでは、2行目が対象です。

階層構造でのセレクタ指定方法

基本的な指定方法では、ピンポイントでその要素の選択でしたが、階層構造でのセレクタ指定もできるので、子孫要素の選択などが可能です。 以下に基本的な子孫、兄弟要素を選択するセレクタの指定方法を記述します。

子孫セレクタ

$("body div")

body要素の中にある、div要素を選択できます。

$("body div.hoge")

上記のように、特定のclassを持ったdiv要素の選択などもできます。

セレクタ

$("body > div")

body要素の直下の、div要素を選択できます。

隣接セレクタ

$("h1 + div")```
h1要素の”すぐ”後に続く(隣接する)、div要素を選択できます。
<h3>兄弟セレクタ</h3>

$("h1 ~ div")

h1要素の後に続く(弟要素)、div要素を選択できます。
”兄弟セレクタ”と書きましたが、基準となる要素より後の要素のみが対象のようです。<br /><br />
以上が私が思う、ごく基本的なセレクタの指定方法のまとめです。

<h2><span style="color: #2196f3">まとめ</span></h2>
セレクタの指定方法は多くあり、今回の内容で全て網羅しているわけではありません。
私の知らないセレクタの指定方法もまだあるかと思います。
また、セレクタではなくjQuery関数で、先祖子孫、親子、兄弟要素の選択の方法や、フィルタと呼ばれるセレクタの指定方法もあります。
それらについては次回以降に書こうかと考えております。

<h2><span style="color: #2196f3">後述</span></h2>
今回も至極当然な記事になってしまった…が、備忘録も兼ねているということでよしとします。
頻繁に利用するので、作業の度に調べることの無いようにしよう。