jquery表单选择器
jQuery表单选择器概述
jQuery提供了一系列专门用于表单元素的选择器，可以快速定位表单内的各类控件（如输入框、按钮、下拉框等）。这些选择器以:符号开头，通常与其他选择器组合使用。
常用表单选择器列表
基础选择器
-
:input
匹配所有input、textarea、select和button元素。
示例：$(":input")选中所有表单控件。 -
:text
匹配类型为text的input元素。
示例：$("input:text")选中所有文本输入框。 -
:password
匹配类型为password的input元素。 -
:radio
匹配所有单选按钮。 -
:checkbox
匹配所有复选框。 -
:submit
匹配提交按钮（包括input[type="submit"]和button[type="submit"]）。 -
:reset
匹配重置按钮。 -
:button
匹配所有按钮（包括button元素和input[type="button"]）。 -
:file
匹配文件上传控件。 -
:image
匹配图像类型的提交按钮。
状态过滤选择器
-
:checked
匹配被选中的复选框、单选按钮或下拉选项。
示例：$("input:checked")获取所有已选中的复选框或单选按钮。 -
:selected
匹配下拉列表中选中的<option>元素。
示例：$("select option:selected")获取当前选中的选项。 -
:disabled
匹配所有被禁用的表单元素。
示例：$("input:disabled")选中所有不可用的输入框。 -
:enabled
匹配所有可用的表单元素（未被禁用）。 -
:focus
匹配当前获得焦点的元素（需结合事件触发）。
组合使用示例
选中所有必填字段
若必填字段有required属性：
$(":input[required]")获取表单内所有用户输入的值
$("form :input").each(function() {
console.log($(this).val());
});验证单选按钮是否选中
if ($("#gender:checked").length > 0) {
// 至少有一个单选按钮被选中
}性能优化建议
-
避免全局使用
:input等选择器会扫描整个文档，推荐结合父元素缩小范围：$("#myForm :text") // 仅限myForm内的文本输入框 -
优先使用原生选择器
对于简单选择（如input[type="text"]），原生CSS选择器性能更优。 -
缓存选择结果
重复操作时保存jQuery对象：
const $inputs = $("form :input");
兼容性说明
- jQuery 3.0+ 移除了部分伪选择器（如
:hidden的复杂行为），但表单选择器保持稳定。 - 部分选择器（如
:file）可能无法在某些旧浏览器中正确匹配自定义样式的控件。
