こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、10年目エンジニアです。
この記事では、 jQueryでのセレクタについて解説します。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows10 |
|---|---|
| jQueryのバージョン | 3.6.0 |
セレクタとは
セレクタとは、対象のHTMLから特定の要素を取得する機能です。
書き方は
|
1 |
$("【セレクタ】") |
となります。
セレクタに選択できるものと書き方のパターンが多いので、次章からサンプルプログラムをまじえながら解説します。
基本のセレクタ
この章では、基本のセレクタの書き方である
- 全要素を選択するセレクタの書き方
- タグで指定するセレクタの書き方
- idで指定するセレクタの書き方
- クラスで指定するセレクタの書き方
を解説します。
全要素を選択するセレクタの書き方
全要素を選択するセレクタは
|
1 |
$("*") |
と書きます。
タグで指定するセレクタの書き方
タグで指定するセレクタは
|
1 |
$("【HTMLタグを指定】") |
と書き、対象のHTMLから指定したタグすべての要素を取得します。
|
1 2 3 |
<div id="test">テスト</div> <div id="hogehoge">ほげほげ</div> <p id="piyo">ぴよ</p> |
というHTMLからdivタグの要素を取得したい場合は
|
1 |
$("div") |
と書くと、idが「test」、「hogehoge」のdivタグの要素を配列で取得できます。
idで指定するセレクタの書き方
idで指定するセレクタは
|
1 |
$("#【idを指定】") |
と書き、対象HTMLから指定したidの要素を取得します。
|
1 2 3 |
<div id="test">テスト</div> <div id="hogehoge">ほげほげ</div> <p id="piyo">ぴよ</p> |
というHTMLからidが「test」の要素を取得したい場合は
|
1 |
$("#test") |
と書くと、idが「test」のdivタグの要素が取得できます。
クラスで指定するセレクタの書き方
クラスで指定するセレクタは
|
1 |
$(".【クラスを指定】") |
と書き、対象HTMLから指定したクラスの要素を取得します。
|
1 2 3 |
<div id="test" class="test">テスト</div> <div id="hogehoge" class="hogehoge">ほげほげ</div> <p id="piyo" class="test">ぴよ</p> |
というHTMLからクラスが「test」の要素を取得したい場合は
|
1 |
$(".test") |
と書くと、idが「test」のdivタグとidが「piyo」のpタグの要素を配列で取得できます。
階層関係で指定するセレクタ
この章では、階層関係で指定するセレクタを
- 親子関係で指定するセレクタの書き方
- 先祖・祖先関係で指定するセレクタの書き方
を解説します。
親子関係で指定するセレクタの書き方
親子関係で指定するセレクタは
|
1 |
$("【親を指定】 > 【子を指定】") |
と書き、対象HTMLから指定した条件に合致する親子関係の子の要素を取得します。
|
1 2 3 4 |
<div id="test"> <p id="hogehoge" class="hogehoge">ほげほげ</p> <p id="sample" class="piyo">ほげほげ</p> </div> |
というHTMLから親がdivタグで、子供のクラスが「hogehoge」の要素を取得したい場合は
|
1 |
$("div > .hogehoge") |
と書くと、idが「hogehoge」のpタグの要素が取得できます。
先祖・祖先関係で指定するセレクタの書き方
先祖・祖先関係で指定するセレクタは
|
1 |
$("【先祖を指定】 【子孫を指定】") |
と書き、対象HTMLから指定した条件に合致する先祖と子孫の関係の子孫の要素を取得します。
|
1 2 3 4 5 6 7 8 |
<div class="test"> <div class="hogehoge"> <p id="test">テスト</p> </div> </div> <div class="test"> <p id="fuga">fuga</p> </div> |
というHTMLから先祖のクラスが「test」で、子孫がpタグの要素を取得したい場合は
|
1 |
$(".test p") |
と書くと、idが「test」のpタグとidが「fuga」のpタグの要素を配列で取得できます。
まとめ：セレクタを使ってみよう！
以上がjQueryのセレクタについての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント