jQueryの独自セレクタのサンプルです。
目次
- 指定した文字列を含む要素(:contains)
- 表示されている要素(:visible)
- 最初の要素(:first)
- 最後の要素(:last)
- 偶数番目の要素(:even)
- 奇数番目の要素(:odd)
- 数値の番目の位置の要素(:eq)
指定した文字列を含む要素(: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行目のテキストボックスの入力欄が黄色になります。
関連の記事