jQuery - フォームフィルター
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
フォームフィルターで要素を指定します。
基本的には inputタグが対象になります。
divタグに type="text" とつけても、$(":text") の対象にはなりません。
:enabled、:disabled などは、inputタグや option タグが対象となります。
基本的には inputタグが対象になります。
divタグに type="text" とつけても、$(":text") の対象にはなりません。
:enabled、:disabled などは、inputタグや option タグが対象となります。
$(":button") //<input type="button"> <button />
$(":checkbox") //<input type="checkbox">
$(":text") //<input type="text">
$(":disabled") //<input type="text" disabled="disabled" />
$(":enabled") //<input type="text" />
$(":password") //<input type="password" />
$(":radio") //<input type="radio" />
$(":checked") //<input type="checkbox" />
$(":reset") //<input type="reset" />
$(":submit") //<input type="submit" />
$(":selected") //<option selected="selected">
$(":image") //<input type="image" />
$(":file") //<input type="file" />
2. サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<input type="button" value="ボタン1" /> <button>ボタン2</button><br />
<br />
<input type="checkbox" value="1" checked="checked">apple
<input type="checkbox" value="1">orange<br />
<br />
<input type="text" value="banana" />
<input type="text" value="strawberry" disabled="disabled" /><br />
<br />
<input type="password" value="11111" /><br />
<br />
<input type="radio" name="test" value="0">OFF
<input type="radio" name="test" value="1" checked="checked">ON<br />
<br />
<input type="reset" value="クリア">
<input type="submit" value="登録" />
<br />
<select>
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
</select>
<br />
<textarea>Hello</textarea>
<!-- Script -->
<script>
$(function(){
$("input:button").css("color", "red");
$("input:checkbox").css({
"width":"28px",
"height":"28px"});
$("input:text").css("color", "blue");
$("input:disabled").css("background-color", "pink");
$("input:enabled").css("background-color", "skyblue");
$("input:password").css("background-color", "lightgreen");
$("input:radio").css({
"width":"28px",
"height":"28px"});
$("input:checked").css({
"width":"48px",
"height":"48px"});
$("input:reset").css("background-color", "yellow");
$("input:submit").css("background-color", "green");
$("select").css("background-color", "lightblue");
$("select option:selected").css("background-color", "blue");
});
</script>
</body></html>
実行結果：画面
