jQuery セレクタのサンプル(変数/AND/OR)

jQueryのセレクタのサンプルです。

目次	jQueryのセレクタとは
	セレクタに変数を使用する
	複数のセレクタを使用する(OR) / 複数のセレクタを使用する(AND)
	$(function () {});とは / $(function () {});が2つの場合
	チェックボックス(属性)を指定する(:checkbox)
	指定の文字列を含む要素(:contains)
	表示されている要素(:visible)
	最初の要素(:first) / 最後の要素(:last)
	偶数番目の要素(:even) / 奇数番目の要素(:odd)
	数値の番目の位置の要素(:eq)

jQueryのセレクタとは

$(セレクタ).メソッド

セクレタは対象となる箇所を示します。
書き方は、ドルマーク($)とカッコでセレクタを括ります。
jQueryのセレクタは、CSSのセレクタとjQuery独自のセレクタを使用できます。

セレクタのサンプルです。

<p id="a1"></p>
<p class="b1"></p>

<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>");
</script>

6行目の#a1は、IDセレクタで1行目を指しています。IDは、html文書内で一意にします。
7行目の.b1は、クラスセレクタで2行目を指しています。クラスは、html文書内の複数の箇所にあっても良いです。

セレクタに変数を使用する

$(変数)

$(文字列 + 変数)

セレクタに変数を使用できます。変数と文字列の結合もできます。

<p class="a1">aaa</p>
<p class="b1">bbb</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  const test1 = ".a1";
  $(test1).css("background", "yellow"); // 1行目を指す

  const test2 = "b1";
  $("." + test2).css("background", "blue"); // 2行目を指す
</script>

7行目のようにセレクタに変数を指定できます。
10行目のように+演算子で文字列と変数を結合することも可能です。

複数のセレクタを使用する(OR)

$(セレクタ,セレクタ)

ORはセレクタをカンマで区切ります。

<p class="c1 c2">赤</p>
<p class="c3 c4">青</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

  $(".c1,.c3").css("background", "yellow"); // 1,2行目を指す
  
</script>

1,2行目の背景色が黄色になります。

複数のセレクタを使用する(AND)

$(セレクタセレクタ)

ANDはセレクタを区切りなしでつなげます。

<p class="c1 c2">赤</p>
<p class="c1 c3">青</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

  $(".c1.c2").css("background", "yellow"); // 1行目を指す

</script>

1行目の背景色が黄色になります。

$(function () {});とは

$(function () {});の箇所は、HTMLが読み込まれてから実行されます。

<p class="a1">aaa</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function () {
    const test1 = ".a1";
    $(test1).css("background", "yellow");
  });
</script>

以下の書き方も同じ意味です。

  $(document).ready(function () {
  });

$(function () {});が2つの場合

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function () {
    console.log("red"); // red
  });
  $(function () {
    console.log("blue"); // blue
  });
</script>

$(function ()が2つであってもエラーになりません。

チェックボックス(属性)を指定する(:checkbox)

<input type="checkbox"  value="1" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(":checkbox").prop("checked", true);
</script>

画面表示時にチェックが入ります。

:input	input要素
:button	ボタン
:checkbox	チェックボックス
:radio	ラジオボタン
:text	テキストボックス
:selected	セレクトボックスの選択

指定の文字列を含む要素(:contains)

<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("p:contains('かきくけこ')").css("color","red");

</script>

8行目は、文字「かきくけこ」を含むP要素の文字を赤にします。
2行目の文字が赤になります。

表示されている要素(:visible)

<p>あいうえお</p>
<p style="display:none;">かきくけこ</p>
<p>さしすせそ</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("p:visible").css("color","red");

</script>

8行目は、表示されているP要素の文字を赤にします。
1,3行目の文字が赤になります。

最初の要素(:first)

<p><input type="text" id="text1" value="a"></p>
<p><input type="text" id="text2" value="b"></p>
<p><input type="text" id="text3" value="c"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("input:first").css("background-color","yellow");

</script>

8行目は、最初のInput要素の背景色を黄色にします。
1行目のテキストボックスの入力欄が黄色にになります。

最後の要素(:last)

<p><input type="text" id="text1" value="a"></p>
<p><input type="text" id="text2" value="b"></p>
<p><input type="text" id="text3" value="c"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("input:last").css("background-color","yellow");

</script>

8行目は、最後のInput要素の背景色を黄色にします。
3行目のテキストボックスの入力欄が黄色にになります。

偶数番目の要素(:even)

<p><input type="text" id="text1" value="a"></p>
<p><input type="text" id="text2" value="b"></p>
<p><input type="text" id="text3" value="c"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("input:even").css("background-color","yellow");

</script>

8行目は、偶数番目のInput要素の背景色を黄色にします。
最初は、0から始まります。1行目は偶数です。
1,3行目のテキストボックスの入力欄が黄色にになります。

奇数番目の要素(:odd)

<p><input type="text" id="text1" value="a"></p>
<p><input type="text" id="text2" value="b"></p>
<p><input type="text" id="text3" value="c"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("input:odd").css("background-color","yellow");

</script>

8行目は、奇数番目のInput要素の背景色を黄色にします。
最初は、0から始まります。1行目は偶数です。
2行目のテキストボックスの入力欄が黄色になります。

数値の番目の位置の要素(:eq)

<p><input type="text" id="text1" value="a"></p>
<p><input type="text" id="text2" value="b"></p>
<p><input type="text" id="text3" value="c"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("input:eq(1)").css("background-color","yellow");

</script>

8行目は、Input要素の2番目の位置の背景色を黄色にします。
最初は、0から始まります。eq(0)が1行目で、eq(1)は2行目です。
2行目のテキストボックスの入力欄が黄色になります。