jQuery【 セレクタ 】動作の対象となる要素を特定する

jQuery は、セレクタで対象となる要素を特定した上で 命令等を記述する という書き方をするため、セレクタの使い方がとても重要です。
今回は、jQuery のセレクタについて、解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. jQuery のセレクタ

　
jQuery は、基本的に次のような形で書きます。

$( セレクタ ). イベント( function() {
　　$( セレクタ ). 命令
});

この中の「 セレクタ 」が jQuery を使用する上でとても重要です。

セレクタ（ selector ）とは、HTML要素をセレクトするもので、HTML要素を特定します。
HTML要素の名前の他、id名、class名など、色々な種類を対象に指定することができます。

▲目次へ戻る

　

2. 基本のセレクタ

　
jQuery の基本的なセレクタの書き方は、次の通りです。
「 $(“内容”) 」のような形で記述します。

$(“*”)
全要素を選択 他のセレクタと組み合わせて特定の範囲内の要素全てを選択する時などに利用することが多い
$(“要素名”)
指定した要素を選択
$(“#id名”)
指定したid名の要素を選択
$(“.class名”)
指定したclass名の要素を選択
$(“セレクタ　セレクタ”)
指定した複数のセレクタ（要素名、#id名、.class名、etc.）の全てにマッチする要素を選択
$(“セレクタ , セレクタ”)
指定した複数のセレクタ（要素名、#id名、.class名、etc.）のいずれかにマッチする要素を選択

▲目次へ戻る

　

3. 階層や前後のセレクタ

　
階層や前後関係に関連するセレクタは、次のように記述して要素を指定します。

$(“親要素　子要素”)
親要素内にある任意の要素を選択 「 親要素 > 子要素 」とは異なり、直下の要素である必要はない
$(“親要素 > 子要素”)
親要素内にある任意の要素を選択 「 親要素 子要素 」とは異なり、直下の要素のみを選択する
$(“要素A + 要素B”)
要素Aの直後に現れる要素Bを選択 直後の要素を 1 つだけ選択する 複数選択したい場合は「 要素A ~ 要素B 」を使用する
$(“要素A ~ 要素B”)
要素Aの後ろにある要素B全てを選択

▲目次へ戻る

　

4. 属性を使用するセレクタ

　
属性によって要素を選択するセレクタもあります。
属性を使用するセレクタは、次のように記述して要素を指定します。

$(“[ 属性 ]”)
任意の属性を持つ要素を選択
$(“[ 属性 = ‘値’ ]”)
任意の属性が 指定した値を持つ要素を選択
$(“[ 属性 != ‘値’ ]”)
任意の属性が 指定した値以外の値を持つ要素を選択
$(“[ 属性 ^= ‘値’ ]”)
任意の属性が 指定した値から始まる要素を選択
$(“[ 属性 $= ‘値’ ]”)
任意の属性が 指定した値で終わる要素を選択
$(“[ 属性 *= ‘値’ ]”)
任意の属性が 指定した値を含む要素を選択
$(“[ 属性 ~= ‘値’ ]”)
任意の属性が 指定した値を単語として持つ要素を選択
$(“[ 属性 |= ‘値’ ]”)
任意の属性が 指定した値と一致 又は ハイフンを付けて派生した 要素を選択
$(“[属性セレクタ][属性セレクタ]…”)
複数の属性セレクタ全てにマッチする要素を選択

▲目次へ戻る

　

5. 基本のフィルタ

　
フィルタ

　
　
よく使用されるフィルタは、次の通りです。
コロン（ : ）を忘れずに記述します。

$(“:root”)
最上位の要素（ html要素 ）を選択
$(“:header”)
見出し要素を選択
$(“:lang()”)
引数で指定した lang 属性の要素を選択
$(“:target”)
リンク先の要素を選択
$(“:animated”)
アニメーション中の要素を選択
$(“:first”)
最初の要素を選択
$(“:last”)
最後の要素を選択
$(“:even”)
偶数番目の要素を選択
$(“:odd”)
奇数番目の要素を選択
$(“:eq()”)
引数で指定したインデックス番号の要素を選択
$(“:gt()”)
引数で指定したインデックス番号より大きい要素を選択
$(“:lt()”)
引数で指定したインデックス番号より小さい要素を選択
$(“:not()”)
引数で指定したセレクタ以外の要素を選択

▲目次へ戻る

　

6. 子要素のフィルタ

　
子要素の選択に使用されるフィルタは、次の通りです。

$(“セレクタ:first-child”)
最初の子要素を選択 最初の子要素が セレクタで指定した要素でない場合は 選択されない
$(“セレクタ:first-of-type”)
セレクタで指定された最初の子要素を選択 「 :first-child 」と異なり、指定したセレクタが最初の子要素である必要はない
$(“セレクタ:last-child”)
最後の子要素を選択 最後の子要素が セレクタで指定した要素がでない場合は 選択されない
$(“セレクタ:last-of-type”)
セレクタで指定された最後の子要素を選択 「 :last-child 」と異なり、指定したセレクタが最後の子要素である必要はない
$(“セレクタ:only-child”)
子要素が 1 つしかない場合、その子要素を選択
$(“セレクタ:only-of-type”)
セレクタで指定された子要素が単独の場合に選択 「 :only-child 」と異なり、指定したセレクタが単独であれば他に要素があってもOK
$(“セレクタ:nth-child()”)
設定した引数によって 親要素内の様々な要素を選択 引数にはインデックス番号、even/odd、数式 等を設定する
$(“セレクタ:nth-of-type()”)
セレクタと引数で指定した子要素を選択 引数にはインデックス番号、even/odd、数式 等を設定する 「 nth-child 」と異なり、セレクタで指定した要素しかカウントしない
$(“セレクタ:nth-last-child()”)
設定した引数によって 親要素内の様々な要素を選択（ nth-child() の後から数えたフィルタ ） 引数にはインデックス番号、even/odd、数式 等を設定する 「 nth-last-child 」と異なり、セレクタで指定した要素しかカウントしない

▲目次へ戻る

　

7. 表示 / 非表示フィルタ

　
表示 又は 非表示 に関するフィルタは、次の通りです。

$(“:hidden”)
css で非表示に設定されている要素（display:none、width:0px 等）や フォームの hidden 要素を選択
$(“:visible”)
表示されている要素を選択

▲目次へ戻る

　

8. 内容に関するフィルタ

　
要素の内容に関するフィルタは、次の通りです。
div タグ等 エリアを設定する要素の場合は、開始タグから終了タグの間がフィルタの対象になります。

$(“:contains()”)
引数で指定した文字列を含む要素を選択
$(“セレクタA:has(セレクタB)”)
セレクタBを子孫要素に持つセレクタAの要素を選択
$(“:empty”)
何も持っていない要素を選択
$(“:parent”)
子要素 又は テキストを持っている要素を選択 「 :empty 」と逆の意味を持つフィルタ

▲目次へ戻る

　

9. フォームに関するフィルタ

　
フォームに関するフィルタは、次の通りです。

$(“:checked”)
チェックボックスやラジオボタンで チェックされた要素を選択
$(“:selected”)
選択されているセレクト要素を選択
$(“:disabled”)
無効になっている要素を選択
$(“:enabled”)
有効になっている要素を選択
$(“:focus”)
フォーカスされている要素を選択
$(“:button”)
ボタン（ button要素、type属性がbuttonの要素 ）を選択
$(“:checkbox”)
チェックボックス（ type属性がcheckboxの要素 ）を選択
$(“:file”)
ファイル選択ボタン（ type属性がfileの要素 ）を選択
$(“:image”)
画像を利用したフォームボタン（ type属性がimageの要素 ）を選択
$(“:input”)
input要素を選択
$(“:password”)
type属性が password の要素を選択
$(“:radio”)
ラジオボタン（ type属性がradioの要素 ）を選択
$(“:reset”)
リセットボタン（ type属性がresetの要素 ）を選択
$(“:submit”)
送信ボタン（ type属性がsubmitの要素 ）を選択 type属性を設定していないbutton要素も、デフォルト値が submit のため選択される
$(“:text”)
type属性が text の要素を選択

▲目次へ戻る

10. まとめ

jQuery のセレクタについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る