jQuery セレクタとセレクタの一覧

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>
$(function() {

    $("#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>
$(function() {

  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の要素