jQuery :input 选择器（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在前端开发中，表单元素的处理是开发者日常工作的核心场景之一。无论是验证用户输入、动态修改表单内容，还是收集数据提交，都需要精准选择和操作表单元素。jQuery :input 选择器作为 jQuery 框架中一个高效且易用的工具，能够帮助开发者快速定位页面中的所有表单相关元素，例如输入框、文本域、下拉框和按钮等。

本文将从基础概念、实际应用、进阶技巧等多个维度，结合具体代码示例，深入解析 jQuery :input 选择器 的功能与使用场景。通过循序渐进的讲解，即使是编程初学者也能快速掌握这一工具的核心逻辑，并将其灵活运用于实际项目中。

一、理解 :input 选择器的基础概念

1.1 什么是 :input 选择器？

:input 是 jQuery 提供的一个伪选择器，用于匹配页面中所有表单相关的元素。这些元素包括：

• <input> 标签（如文本框、复选框、单选按钮等）
• <textarea> 标签
• <select> 标签（下拉框）
• <button> 标签

与原生 JavaScript 的 querySelectorAll("input") 不同，:input 选择器的范围更广，它不仅包含 <input> 标签，还覆盖了其他表单相关元素。这种设计简化了开发者对表单元素的统一操作需求。

示例代码：基础选择

// 选择页面中所有表单元素  
$("input").each(function() {  
  console.log("元素类型：" + this.type);  
});  

注意：上述代码中的 "input" 是原生选择器，仅匹配 <input> 标签。而 :input 选择器 的写法应为：

// 使用 :input 选择器  
$(":input").each(function() {  
  console.log("元素类型：" + this.type);  
});  

1.2 :input 与 input 的区别

对于编程新手，容易混淆 :input 和 <input> 标签的选择器。以下是两者的核心区别：

比喻解释：
如果将表单元素比作“家庭成员”，:input 选择器就像“全家福合影”，而 <input> 选择器只是“某个特定成员的肖像”。

二、:input 选择器的典型应用场景

2.1 场景一：遍历所有表单元素

在需要操作表单中所有元素的场景（如数据收集或验证），使用 :input 可以避免逐个选择元素的繁琐操作。

示例：表单数据收集

<form>  
  <input type="text" name="username" placeholder="用户名">  
  <textarea name="message">留言内容</textarea>  
  <select name="country">  
    <option value="CN">中国</option>  
  </select>  
  <button type="button">提交</button>  
</form>  

<script>  
$(document).ready(function() {  
  $("button").click(function() {  
    var formData = {};  
    $(":input").each(function() {  
      if (this.name) { // 过滤无 name 属性的元素  
        formData[this.name] = $(this).val();  
      }  
    });  
    console.log("表单数据：", formData);  
  });  
});  
</script>  

解析：

• 通过 :input 选择器遍历所有表单元素，提取带有 name 属性的值。
• 生成一个包含所有字段值的对象 formData，方便后续提交或验证。

2.2 场景二：表单重置或清空

在需要一键清空表单内容时，$(":input").val("") 可以快速重置所有输入型元素的值。

示例：清空表单

// 点击按钮时清空所有输入型元素  
$("#reset-btn").click(function() {  
  $(":input")  
    .not(":button, :submit, :reset, :hidden") // 排除按钮和隐藏元素  
    .val("");  
});  

技巧：
使用 .not() 方法排除不需要操作的元素（如按钮），避免误操作。

2.3 场景三：动态表单元素操作

在动态生成或删除表单元素时，$(":input") 可以实时获取最新的元素集合。

示例：动态添加输入框

<div id="dynamic-form">  
  <input type="text" name="item1">  
</div>  
<button id="add-field">添加字段</button>  

<script>  
var fieldCount = 2;  
$("#add-field").click(function() {  
  $("<input>")  
    .attr("type", "text")  
    .attr("name", "item" + fieldCount)  
    .appendTo("#dynamic-form");  
  fieldCount++;  
});  

// 获取所有输入框的值  
$("#get-values").click(function() {  
  var values = [];  
  $(":input").each(function() {  
    values.push($(this).val());  
  });  
  console.log(values);  
});  
</script>  

优势：
无需关注动态添加的元素是否被原生选择器包含，$(":input") 会自动包含所有当前存在的表单元素。

三、进阶技巧与常见问题

3.1 结合其他选择器筛选元素

通过 jQuery 的链式语法，可以结合其他选择器进一步缩小范围。例如：

示例：选择所有选中的复选框

// 获取所有选中的复选框  
var selected = $(":input[type='checkbox']:checked");  

示例：排除按钮元素

// 清空除按钮外的所有表单元素  
$(":input").not(":button").val("");  

3.2 性能优化建议

尽管 :input 简化了代码，但在处理大量表单元素时仍需注意性能：

1. 缓存选择结果：

   var $inputs = $(":input");  
   // 后续操作直接使用 $inputs 变量  
   

2. 避免频繁查询：在循环或事件触发中，尽量减少重复调用 :input。

3.3 常见问题解答

Q：为什么使用 :input 后无法获取 <select> 的选中值？
A：需使用 .val() 方法而非 .text()，因为 <select> 的值存储在 value 属性中。

Q：如何选择特定类型的表单元素？
A：结合属性选择器，例如 $(":input[type='text']") 选择所有文本输入框。

四、总结与实践建议

通过本文的讲解，读者应能掌握 jQuery :input 选择器 的核心功能、使用场景及进阶技巧。以下是关键要点的总结：

• 核心功能：快速匹配所有表单元素，简化代码逻辑。
• 适用场景：表单数据收集、动态元素操作、批量清空或重置。
• 注意事项：结合其他选择器精确筛选，注意性能优化。

实践建议：

1. 在项目中尝试用 :input 替代多个独立选择器，观察代码简洁度提升。
2. 使用开发者工具的控制台，动态测试选择器的匹配结果。
3. 结合实际需求，探索与 .each()、.filter() 等方法的组合应用。

掌握这一工具后，开发者可以更高效地处理表单相关任务，为后续学习更复杂的前端交互逻辑打下基础。