jQueryのセレクタとセレクタの一覧です。
目次
説明 | jQueryのセレクタ |
セレクタに変数を使用する | |
一覧 | jQuery セレクタとセレクタの一覧 |
jQueryのセレクタ
$(セレクタ).メソッド |
- セクレタは場所を示します。(どの箇所を対象とするか)
- 書き方は、ドルマーク($)とカッコでセレクタを括ります。
- jQueryのセレクタは、CSSのセレクタとjQuery独自のセレクタがあります。
- 以下はjQueryサイトのセレクタのリンクです。
http://api.jquery.com/category/selectors/ - CSSの書き方/コメントとセレクタの一覧
セレクタのサンプルです。
<p id="a1"></p>
<p class="b1"></p>
<p class="b1"></p>
<input type="checkbox" id="chk1" value="1" >
<input type="checkbox" id="chk2" value="2" >
<input type="checkbox" id="chk3" value="3" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#a1").html("<b>あいうえお</b>");
$(".b1").html("<b>かきくけこ</b>");
$("input[type='checkbox']").prop('checked',true);
</script>
14行目の#a1は、IDセレクタです。1行目を指しています。IDは、html文書内で一意にします。
16行目の.b1は、クラスセレクタです。3,4行目を指しています。クラスは、html文書内の複数の箇所にあっても良いです。
18行目のセレクタは、属性セレクタです。inputとtypeがcheckboxである6~8行目を指します。
セレクタに変数を使用する
セレクタに変数を使用できます。
<p class="b1"></p>
<p class="b2"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const test1 = ".b1";
$(test1).html("<b>あいうえお</b>");
const test2 = "b2";
$("." + test2).html("<b>かきくけこ</b>");
</script>
9,13行目は、変数に値を設定しています。
11,15行目は、セレクタに変数をセットしています。
15行目のように+演算子で文字列と変数を結合することも可能です。
jQueryのセレクタの一覧
主なjQueryのセレクタです。書式欄に★がついているのはjQuery独自のセレクタです。
セレクタ名 | 書式 | 適用する対象 |
---|---|---|
ユニバーサルセレクタ | *(アスタリスク) | すべての要素 |
タイプセレクタ (要素セレクタ) |
要素名 | 指定した要素 |
IDセレクタ | #ID名 | ID名が指定されている要素 ※ID名は、html文書内で一意にします。 |
クラスセレクタ | .クラス名 | クラス名が指定されている要素 ※クラス名は、html文書内の複数の箇所にあっても良いです。 |
属性セレクタ | 要素名[属性名] | 指定した属性を持つ要素 |
要素名[属性名="値"] | 指定の属性の値がある要素 | |
要素名[属性名!="値"] ★ | 指定の属性の値ではない要素 | |
要素名[属性名~="値"] | 属性の値が複数ある場合で、指定の属性の値がどれかひとつに合致する要素 | |
要素名[属性名|="値"] | ハイフン(-)で区切られた属性の値が複数ある場合で、指定の属性の値で始まっている要素 | |
要素名[属性名^="値"] | 指定の属性の値で始まる要素 | |
要素名[属性名$="値"] | 指定の属性の値で終わる要素 | |
要素名[属性名*="値"] | 指定の属性の値が含まれている要素 | |
疑似クラス | 要素名:focus | フォーカスした時 |
要素名:target | 移動先の要素 | |
要素名:lang() | lang属性値が指定された言語コードで始まっている要素 | |
要素名:enabled | 有効な要素 | |
要素名:disabled | 無効な要素 | |
要素名:checked | ラジオボタンやチェックボックスが選択されたとき | |
要素名:root | ルート要素 | |
要素名:first-child | 最初の子要素 | |
要素名:last-child | 最後の子要素 | |
要素名:nth-child() | n番目の子要素 奇数の行にスタイルを適用 (:nth-child(2n+1)) 偶数の行にスタイルを適用 (:nth-child(2n)) 指定した行にスタイルを適用 (:nth-child (数値)) |
|
要素名:nth-last-child() | 後ろからn番目の子要素 | |
要素名:only-child | 唯一の子要素 | |
要素名:first-of-type | 最初の子要素 | |
要素名:last-of-type | 最後の子要素 | |
要素名:nth-of-type() | n番目の子要素 | |
要素名:nth-last-of-type() | 後ろからn番目の子要素 | |
要素名:only-of-type | 唯一の子要素 | |
要素名:empty | 子要素や要素内容を持たない要素 | |
要素名:not() | 指定の条件と一致しない要素 | |
要素名:contains() ★ | 指定した文字列を含む要素 | |
:visible ★ | 表示されている要素 | |
:hidden ★ | 表示されていない要素 | |
:header ★ | ヘッダーの要素(<h1>や<h2>) | |
:first ★ | 最初の要素 | |
:last ★ | 最後の要素 | |
:even ★ | 偶数番目の位置(最初は0から) | |
:odd ★ | 奇数番目の位置(最初は0から) | |
:eq(数値) ★ | 数値の番目の位置の要素 | |
:gt(数値) ★ | 数値の番目より大きい位置の要素 | |
:lt(数値) ★ | 数値の番目より小さい位置の要素 | |
:input ★ | input要素 | |
:button ★ | ボタン | |
:checkbox ★ | チェックボックス | |
:radio ★ | ラジオボタン | |
:file ★ | アップロードするファイル(input type="file") | |
:password ★ | パスワード | |
:text ★ | テキストボックス | |
:selected ★ | セレクトボックスの選択 | |
:submit ★ | 送信ボタン | |
:image ★ | 画像ボタン | |
:reset ★ | リセットボタン | |
:animated ★ | アニメーションしている要素 | |
:parent ★ | 子要素を持つ要素 | |
:has(セレクタ) ★ | セレクタの子孫要素を持つ要素 | |
子孫セレクタ | セレクタ1 セレクタ2 | セレクタ1の子孫のセレクタ2の要素 |
子セレクタ | セレクタ1 > セレクタ2 | セレクタ1の子のセレクタ2の要素 |
兄弟セレクタ | セレクタ1 + セレクタ2 | セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素 |
セレクタ1 ~ セレクタ2 | セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素 |
関連の記事
jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
Query 繰り返し処理を行うサンプル(each)
jQuery findメソッドで子孫要素を操作する
jQuery oneメソッドで一度だけ実行する
jQuery onで複数のイベントリスナを登録
jQuery Deferredオブジェクトのサンプル
jQuery 変数のデータ型を調べるサンプル(type)