首页
/ 正文

jQuery val() 方法（建议收藏）

更新时间: 2025-04-06 18:36:07

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 val() 方法？

在现代 Web 开发中，表单数据的获取与设置是前端交互的核心场景。无论是验证用户输入、动态更新页面内容，还是与后端进行数据交互，开发者都需要频繁操作表单元素的值。此时，jQuery val() 方法就像一位高效的快递员，能快速完成表单元素与 JavaScript 之间的数据传递。

对于编程初学者来说，掌握这个方法不仅能提升开发效率，还能为理解更复杂的 DOM 操作打下基础。中级开发者则可以通过进阶用法，探索其在表单验证、动态交互等场景中的深度应用。本文将从基础概念逐步深入，结合实例代码，带您全面掌握这一核心工具。

基础用法：获取与设置表单元素的值

1. 基本语法与核心功能

val() 方法是 jQuery 提供的表单操作方法，其核心功能是获取或设置被选元素的值。其语法结构如下：

// 获取值
var value = $(selector).val();

// 设置值
$(selector).val("new value");

比喻理解：快递员的角色

可以把 val() 方法想象成一位快递员：

获取值时，它从表单元素（如输入框）中取出包裹（数据值），交给 JavaScript 处理。
设置值时，它接收 JavaScript 的新包裹（新数据），并放入目标元素中。

2. 支持的 HTML 元素

val() 方法主要适用于以下表单元素：

<input>（文本框、单选框、复选框等）
<textarea>
<select>（下拉框）

示例 1：获取文本框的值

<input type="text" id="username" value="初始值">
<script>
  // 获取文本框的当前值
  var currentValue = $("#username").val();
  console.log(currentValue); // 输出：初始值
</script>

示例 2：动态设置下拉框的选中项

<select id="city">
  <option value="BJ">北京</option>
  <option value="SH">上海</option>
</select>
<script>
  // 设置选中上海
  $("#city").val("SH");
</script>

进阶用法：表单交互的深度实践

3. 处理复选框与单选框

对于复选框（<input type="checkbox">）和单选框（<input type="radio">），val() 方法的行为需要特别注意：

复选框的值获取

<input type="checkbox" name="interest" value="coding" checked>
<script>
  // 获取复选框是否被选中
  var isChecked = $("#interest").is(":checked"); // 返回布尔值
  console.log(isChecked); // true
</script>

单选框组的值获取

<input type="radio" name="gender" value="male" checked>
<input type="radio" name="gender" value="female">
<script>
  // 获取选中的单选框值
  var selectedGender = $("input[name='gender']:checked").val();
  console.log(selectedGender); // male
</script>

4. 结合表单验证的典型场景

在用户提交表单前，验证输入内容的合法性是常见需求。val() 方法可与条件判断结合使用：

示例：验证邮箱格式

<form>
  <input type="email" id="email" placeholder="请输入邮箱">
  <button type="button" onclick="validate()">提交</button>
</form>
<script>
  function validate() {
    const email = $("#email").val().trim();
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!regex.test(email)) {
      alert("邮箱格式不正确");
    } else {
      alert("验证通过");
    }
  }
</script>

动态交互：与事件的联动应用

5. 实时监听输入变化

通过结合 input 或 keyup 事件，val() 可实现实时数据更新：

示例：密码强度提示

<input type="password" id="password">
<div id="strength"></div>
<script>
  $("#password").on("input", function() {
    const value = $(this).val();
    const strength = value.length >= 8 ? "强" : "弱";
    $("#strength").text("密码强度：" + strength);
  });
</script>

6. 动态生成表单元素

在创建新元素时，可通过 val() 初始化默认值：

// 动态添加带有默认值的文本框
$("body").append(
  $("<input>")
    .attr("type", "text")
    .val("动态生成的输入框")
);

常见问题与解决方案

7. 多选下拉框的值处理

当 <select> 元素的 multiple 属性启用时，val() 会返回一个数组：

<select id="hobbies" multiple>
  <option value="reading" selected>阅读</option>
  <option value="travel">旅行</option>
  <option value="music">音乐</option>
</select>
<script>
  const hobbies = $("#hobbies").val();
  console.log(hobbies); // ["reading"]
</script>

8. 空值与默认值的判断

当元素值为空时，val() 返回空字符串而非 null。需通过条件判断处理：

const inputValue = $("#input").val().trim();
if (inputValue === "") {
  alert("请输入内容");
}

性能优化与最佳实践

9. 避免频繁操作 DOM

若需多次获取同一元素的值，建议先缓存 jQuery 对象：

// 不佳写法（多次查询 DOM）
var val1 = $("#input").val();
// ...其他代码...
var val2 = $("#input").val();

// 优化写法（缓存对象）
const $input = $("#input");
var val1 = $input.val();
// ...其他代码...
var val2 = $input.val();

10. 与原生 JavaScript 的对比

与原生 element.value 对比，val() 的优势在于：

支持链式调用
自动处理复选框/单选框的集合
兼容旧版浏览器

// 原生 vs jQuery
const nativeValue = document.getElementById("input").value;
const jqueryValue = $("#input").val();

实战案例：构建动态计价表单

案例需求

开发一个商品选购页面，用户选择数量和规格后，自动计算总价：

<div>
  <label>数量：</label>
  <input type="number" id="quantity" value="1">
</div>
<div>
  <label>规格：</label>
  <select id="spec">
    <option value="S" price="50">小号</option>
    <option value="M" price="80">中号</option>
    <option value="L" price="120">大号</option>
  </select>
</div>
<div>总价：¥<span id="total"></span></div>

实现步骤

监听数量和规格的变化
通过 val() 获取当前值
计算总价并更新页面

function calculateTotal() {
  const quantity = parseInt($("#quantity").val(), 10);
  const spec = $("#spec").val();
  const price = parseFloat($("#spec option:selected").attr("price"));
  
  const total = quantity * price;
  $("#total").text(total.toFixed(2));
}

// 初始化时计算
calculateTotal();

// 监听输入变化
$("#quantity, #spec").on("input change", calculateTotal);

结论：掌握 val() 方法的深层价值

通过本文的讲解，我们深入理解了 jQuery val() 方法在表单数据操作中的核心作用。从基础的值获取与设置，到结合事件与验证的实战案例，这一方法帮助开发者高效实现了用户交互逻辑。对于编程初学者，建议通过代码示例逐步练习，理解其与 DOM 的交互机制；中级开发者可探索其在复杂表单、动态组件等场景中的进阶应用。

掌握 val() 方法不仅是掌握一个工具，更是理解前端数据流控制的关键一步。随着实践的深入，您会发现它在简化代码、提升开发效率方面带来的显著价值。现在，不妨打开代码编辑器，尝试将本文中的案例改造成您项目中的实际功能吧！