目次
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文書内の複数の箇所にあっても良いです。
ドルマーク($)の代わりにjQueryも使用可能です。WordPressではドルマーク($)は使用できないので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>
jQuery("#a1").html("<b>あいうえお</b>");
jQuery(".b1").html("<b>かきくけこ</b>");
</script>
セレクタに変数を使用する
| $(変数) |
| $(文字列 + 変数) |
セレクタに変数を使用できます。変数と文字列の結合もできます。
<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行目のように+演算子で文字列と変数を結合することも可能です。
HTML読み込み後に実行 $(function () {}); - $(document).ready(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>
以下の書き方も同じ意味です。
<p class="a1">aaa</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
const test1 = ".a1";
$(test1).css("background", "yellow");
});
</script>
$(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つであってもエラーになりません。
複数のセレクタを使用する(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行目の背景色が黄色になります。
チェックボックス(属性)を指定する(: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行目のテキストボックスの入力欄が黄色になります。
関連の記事