【jQuery】セレクタについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 jQueryでのセレクタについて解説します。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10
jQueryのバージョン 3.6.0

セレクタとは

セレクタとは、対象のHTMLから特定の要素を取得する機能です。
書き方は

となります。

セレクタに選択できるものと書き方のパターンが多いので、次章からサンプルプログラムをまじえながら解説します。

基本のセレクタ

この章では、基本のセレクタの書き方である

  • 全要素を選択するセレクタの書き方
  • タグで指定するセレクタの書き方
  • idで指定するセレクタの書き方
  • クラスで指定するセレクタの書き方

を解説します。

全要素を選択するセレクタの書き方

全要素を選択するセレクタは

と書きます。

タグで指定するセレクタの書き方

タグで指定するセレクタは

と書き、対象のHTMLから指定したタグすべての要素を取得します。

というHTMLからdivタグの要素を取得したい場合は

と書くと、idが「test」、「hogehoge」のdivタグの要素を配列で取得できます。

idで指定するセレクタの書き方

idで指定するセレクタは

と書き、対象HTMLから指定したidの要素を取得します。

というHTMLからidが「test」の要素を取得したい場合は

と書くと、idが「test」のdivタグの要素が取得できます。

クラスで指定するセレクタの書き方

クラスで指定するセレクタは

と書き、対象HTMLから指定したクラスの要素を取得します。

というHTMLからクラスが「test」の要素を取得したい場合は

と書くと、idが「test」のdivタグとidが「piyo」のpタグの要素を配列で取得できます。

階層関係で指定するセレクタ

この章では、階層関係で指定するセレクタを

  • 親子関係で指定するセレクタの書き方
  • 先祖・祖先関係で指定するセレクタの書き方

を解説します。

親子関係で指定するセレクタの書き方

親子関係で指定するセレクタは

と書き、対象HTMLから指定した条件に合致する親子関係の子の要素を取得します。

というHTMLから親がdivタグで、子供のクラスが「hogehoge」の要素を取得したい場合は

と書くと、idが「hogehoge」のpタグの要素が取得できます。

先祖・祖先関係で指定するセレクタの書き方

先祖・祖先関係で指定するセレクタは

と書き、対象HTMLから指定した条件に合致する先祖と子孫の関係の子孫の要素を取得します。

というHTMLから先祖のクラスが「test」で、子孫がpタグの要素を取得したい場合は

と書くと、idが「test」のpタグとidが「fuga」のpタグの要素を配列で取得できます。

まとめ:セレクタを使ってみよう!

以上がjQueryのセレクタについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました