📅 最后修改于: 2023-12-03 15:22:13.464000 🧑 作者: Mango
在开发 Web 应用程序时，表单是最常用的元素之一。表单通常用来输入和提交数据。当用户完成表单填写并提交数据后，通常需要清空表单以便下次填写。
jQuery 能够很方便地清空表单。本篇文章将介绍如何使用 jQuery 清除表单中的输入数据。
假设我们有一个简单的表单：
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name">
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
在 jQuery 中，val() 方法可以设置或获取元素的值。当 val() 方法不带参数时，它将返回元素的值。当带有参数时，它将设置元素的值。
我们可以使用 val() 方法来清空表单输入。以下是使用 jQuery 清除表单输入的代码片段：
$('form').find('input, textarea').val('');
使用 $('form') 选择表单元素，然后使用 find() 方法选择所有的输入框和文本区域。最后，调用 val() 方法将它们的值都设置为空字符串。
以下是完整的 HTML 和 JavaScript 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用 jQuery 清除表单</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('form').submit(function(e) {
e.preventDefault(); // 防止表单提交
// 清空表单输入
$(this).find('input, textarea').val('');
// 在这里添加逻辑以提交数据
});
});
</script>
</head>
<body>
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name">
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
</body>
</html>
在这个例子中，我们使用了 jQuery 的 submit() 方法来防止表单的默认行为（即提交表单并刷新页面）。然后，在表单提交之前，我们使用 val() 方法清空表单输入。
在本篇文章中，我们介绍了如何使用 jQuery 清除 HTML 表单中的输入。我们使用了 val() 方法来设置输入的值为空字符串。另外，我们还介绍了如何使用 jQuery 的 submit() 方法来防止表单默认行为。