jQueryの独自セレクタのサンプル

nas

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

目次

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

指定した文字列を含む要素をセレクタにするサンプルです。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	$("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>
$(function() {
	$("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>
$(function() {
	$("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>
$(function() {
	$("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>
$(function() {
	$("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>
$(function() {
	$("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>
$(function() {
	$("input:eq(1)").css("background-color","yellow");
});
</script>

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

関連の記事

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

△上に戻る