近頃は朝夕の気温がめっきり下がり、外に出るのが億劫になってきています。
そんな時は自宅にこもり、先日発売されたモンスターハンター４Gなんかをやりたくなりますね…まだ持っていませんが…
社内でモンハン部が発足すれば、迷わず購入するのですが…|ω・`）チラ
閑話休題、業務でjQueryを用いて諸々の機能を実装するのですが、その際に少々悩むjQueryでの要素の選択について、自身の備忘録を兼ねて書きます。
DOM要素の選択
まず、jQueryでは容易にDOM要素の選択が行なえます。
1$("body")上記のコードだけでbody要素を選択することができます。
基本的なセレクタ(セレクター)指定方法
セレクタの指定方法には、タグを指定する以外にも様々なパターンがあります。
以下に基本的なセレクタ指定方法を記述します。
要素（タグ）セレクタ
1$("div")div要素が選択ができます。
idセレクタ
1$("#id")指定したid属性を持つ要素が選択できます。
classセレクタ
1$(".hogehoge")指定したclass属性を持つ要素が選択できます。
グループセレクタ
1$("body, div, p")指定した要素が複数選択できます。
1$("body, #hoge, .hogehoge")また、上記コードのように、異なるセレクタでの指定も可能です。
ユニバーサルセレクタ
1$("*")ワイルドカードでの指定で、全ての要素が選択できます。
属性セレクタ
1<a href="/hoge/" target="_blank">リンク</a>このようにtarget属性を持ったaタグがあるとして、
1$("a[target='_blank']")上記コードで、target=’_blank’ の属性と値を持つ a タグが選択できます。
また、属性セレクタには色々と指定方法があり、それについても記述します。
[属性名]
1$("input[name]")特定の属性を持つ要素を選択できます。
[属性名=値]
1$("input[name='hoge']")属性の値が一致した要素を選択できます。
[属性名=!値]
1$("input[name!='hoge']")属性の値が完全一致しない要素を選択できます。
[属性名 *= 値]
1$("input[name*='hoge']")属性の値が部分一致した要素を選択できます。
1<input name="hoge" type="text">
2<input name="hoge123" type="text">
3<input name="hoge hoga hogi" type="text">上記コードでは、全て対象です。
[属性名 ~= 値]
1$("input[name~='hoge']")区切られた単語ベースで一致した要素を選択できます。
1<input name="hoge" type="text">
2<input name="hoge123" type="text">
3<input name="hoge hoga hogi" type="text">上記コードでは、１行目と３行目が対象です。
[属性名 ^= 値]
1$("input[name^='hoge']")値と前方一致した属性を持つ要素を絞り込みます。
1<input name="hoge123" type="text">
2<input name="123hoge" type="text">上記コードでは、１行目が対象です。
[属性名 $= 値]
1$("input[name$='hoge']")値と後方一致した属性を持つ要素を絞り込みます。
1<input name="hoge123" type="text">
2<input name="123hoge" type="text">上記コードでは、２行目が対象です。
階層構造でのセレクタ指定方法
基本的な指定方法では、ピンポイントでその要素の選択でしたが、階層構造でのセレクタ指定もできるので、子孫要素の選択などが可能です。
以下に基本的な子孫、兄弟要素を選択するセレクタの指定方法を記述します。
子孫セレクタ
1$("body div")body要素の中にある、div要素を選択できます。
1$("body div.hoge")上記のように、特定のclassを持ったdiv要素の選択などもできます。
子セレクタ
1$("body > div")body要素の直下の、div要素を選択できます。
隣接セレクタ
1$("h1 + div")h1要素のすぐ後に続く(隣接する)、div要素を選択できます。
兄弟セレクタ
1$("h1 ~ div")h1要素の後に続く(弟要素)、div要素を選択できます。
兄弟セレクタと書きましたが、基準となる要素より後の要素のみが対象のようです。
以上が私が思う、ごく基本的なセレクタの指定方法のまとめです。
まとめ
セレクタの指定方法は多くあり、今回の内容で全て網羅しているわけではありません。
私の知らないセレクタの指定方法もまだあるかと思います。
また、セレクタではなくjQuery関数で、先祖子孫、親子、兄弟要素の選択の方法や、フィルタと呼ばれるセレクタの指定方法もあります。
それらについては次回以降に書こうかと考えております。
後述
今回も至極当然な記事になってしまった…が、備忘録も兼ねているということでよしとします。
頻繁に利用するので、作業の度に調べることの無いようにしよう。