介绍jQuery的表单选择器，包括各种表单元素选择器的用法，如:input、:text、:password、:radio、:checkbox等。
表单选择器专门用于选择表单元素。
$(":input") // 选择所有 input, textarea, select, button 元素
$(":text") // 选择所有 type="text" 的 input 元素
$(":password") // 选择所有 type="password" 的 input 元素
$(":radio") // 选择所有 type="radio" 的 input 元素
$(":checkbox") // 选择所有 type="checkbox" 的 input 元素
$(":submit") // 选择所有 type="submit" 的 input 元素
$(":reset") // 选择所有 type="reset" 的 input 元素
$(":button") // 选择所有 type="button" 的 input 元素和 button 元素
$(":image") // 选择所有 type="image" 的 input 元素
$(":file") // 选择所有 type="file" 的 input 元素
$(":enabled") // 选择所有启用的元素
$(":disabled") // 选择所有禁用的元素
$(":selected") // 选择所有被选中的 option 元素
$(":checked") // 选择所有被选中的 checkbox 或 radio 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器示例</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.demo-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: inline-block;
width: 100px;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.info-box {
padding: 15px;
margin-top: 15px;
background-color: white;
border-radius: 5px;
border: 2px solid #3498db;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 表单选择器</h1>
<div class="demo-section">
<h3>表单元素</h3>
<form>
<div class="form-group">
<label>文本输入：</label>
<input type="text" placeholder="请输入文本">
</div>
<div class="form-group">
<label>密码输入：</label>
<input type="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label>复选框：</label>
<input type="checkbox" id="check1">
<label for="check1" style="width: auto;">选项 1</label>
<input type="checkbox" id="check2">
<label for="check2" style="width: auto;">选项 2</label>
</div>
<div class="form-group">
<label>单选框：</label>
<input type="radio" name="radio" id="radio1">
<label for="radio1" style="width: auto;">选项 1</label>
<input type="radio" name="radio" id="radio2">
<label for="radio2" style="width: auto;">选项 2</label>
</div>
<div class="form-group">
<label>下拉框：</label>
<select>
<option value="1">选项 1</option>
<option value="2">选项 2</option>
<option value="3">选项 3</option>
</select>
</div>
<div class="form-group">
<label>文本域：</label>
<textarea rows="3" cols="30"></textarea>
</div>
<div class="form-group">
<label>文件上传：</label>
<input type="file">
</div>
<div class="form-group">
<label>禁用输入：</label>
<input type="text" disabled>
</div>
<div class="form-group">
<label>按钮：</label>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</div>
</form>
<div style="margin-top: 20px;">
<button onclick="testAllInputs()">:input</button>
<button onclick="testText()">:text</button>
<button onclick="testPassword()">:password</button>
<button onclick="testCheckbox()">:checkbox</button>
<button onclick="testRadio()">:radio</button>
<button onclick="testEnabled()">:enabled</button>
<button onclick="testDisabled()">:disabled</button>
<button onclick="testChecked()">:checked</button>
<button onclick="testSelected()">:selected</button>
</div>
<div id="result" class="info-box"></div>
</div>
</div>
<script>
function showMessage(msg) {
$("#result").text(msg);
}
function testAllInputs() {
var count = $(":input").length;
showMessage(":input 选择器：选择了 " + count + " 个表单元素");
$(":input").css("border", "2px solid #3498db");
}
function testText() {
var count = $(":text").length;
showMessage(":text 选择器：选择了 " + count + " 个文本输入框");
$(":text").css("background-color", "#e74c3c");
}
function testPassword() {
var count = $(":password").length;
showMessage(":password 选择器：选择了 " + count + " 个密码输入框");
$(":password").css("background-color", "#3498db");
}
function testCheckbox() {
var count = $(":checkbox").length;
showMessage(":checkbox 选择器：选择了 " + count + " 个复选框");
$(":checkbox").parent().css("background-color", "#f39c12");
}
function testRadio() {
var count = $(":radio").length;
showMessage(":radio 选择器：选择了 " + count + " 个单选框");
$(":radio").parent().css("background-color", "#9b59b6");
}
function testEnabled() {
var count = $(":enabled").length;
showMessage(":enabled 选择器：选择了 " + count + " 个启用的元素");
$(":enabled").css("border", "2px solid #2ecc71");
}
function testDisabled() {
var count = $(":disabled").length;
showMessage(":disabled 选择器：选择了 " + count + " 个禁用的元素");
$(":disabled").css("border", "2px solid #e67e22");
}
function testChecked() {
var count = $(":checked").length;
showMessage(":checked 选择器：选择了 " + count + " 个被选中的元素");
$(":checked").parent().css("background-color", "#1abc9c");
}
function testSelected() {
var count = $(":selected").length;
var value = $(":selected").val();
showMessage(":selected 选择器：选择了 " + count + " 个被选中的选项，值为：" + value);
$(":selected").css("background-color", "#e8f5e9");
}
</script>
</body>
</html>
表单选择器专门用于选择表单元素，包括各种输入类型和状态的选择器。