使用 jQuery 获取 DIV 中所有 Input 的值
在这篇文章中，我将向你详细解释如何使用 jQuery 从一个 DIV 中获取所有输入框的值。对于刚入行的小白开发者来说，掌握这个技能非常重要。在程序开发过程中，我们通常需要从用户输入的数据中获得信息，而获取这些输入框的值正是实现这一目标的基本步骤。
整体流程
以下是实现获取 DIV 中所有 input 值的基本流程：
| 步骤 | 描述 |
|---|---|
| 1 | 引入 jQuery 库 |
| 2 | 创建一个包含输入框的 HTML 结构 |
| 3 | 使用 jQuery 选择器选择输入框 |
| 4 | 遍历所有输入框并获取其值 |
| 5 | 显示或处理获取到的值 |
在我们开始每个步骤的具体实现之前，先来看看需要用到的代码以及对应的注释。
步骤详解
步骤 1：引入 jQuery 库
在任何使用 jQuery 的项目中，首先需要引入 jQuery 库。你可以在 HTML 文件的 <head> 中添加以下代码：
<head>
<title>获取 DIV 中输入框的值</title>
<!-- 从 CDN 引入 jQuery 库 -->
<script src="
</head>
说明：
- 此代码从 CDN 加载 jQuery，这是使用 jQuery 的第一步。
步骤 2：创建 HTML 结构
我们需要一个简单的 HTML 结构，包含一个 DIV 和几个输入框。可以参考以下代码：
<body>
<div id="inputContainer">
<input type="text" placeholder="输入值1" />
<input type="text" placeholder="输入值2" />
<input type="text" placeholder="输入值3" />
</div>
<button id="getValuesButton">获取输入值</button>
<script>
// 后续代码将在这里添加
</script>
</body>
说明：
- 此代码段创建了一个包含三个输入框的 DIV 以及一个按钮，当用户点击按钮时，将触发获取输入框值的逻辑。
步骤 3：使用 jQuery 选择器选择输入框
接下来，我们需要使用 jQuery 的选择器来选择 DIV 中的所有输入框。如下所示：
// 选择 ID 为 inputContainer 的 DIV 中的所有 input 元素
const inputs = $('#inputContainer input');
说明：
- 这段代码使用 jQuery 选择器
$('#inputContainer input')选择 DIV 中的所有 input 元素，并将它们存储在变量inputs中。
步骤 4：遍历所有输入框并获取其值
现在，我们对选择到的输入框进行遍历，以获取每个输入框的值：
// 创建一个数组，用于存储所有输入框的值
const values = [];
// 遍历所有输入框
inputs.each(function() {
// 获取当前输入框的值
const value = $(this).val();
// 将值添加到数组中
values.push(value);
});
说明：
inputs.each()方法遍历每个 input，$(this).val()获取当前 input 的值，然后将值存入values数组。
步骤 5：显示或处理获取到的值
最后，我们可以将获取到的值显示在控制台，或者进行其他处理。例如，可以如下实现：
// 点击按钮时获取输入值
$('#getValuesButton').on('click', function() {
console.log(values); // 在控制台输出获取到的值
});
说明：
- 这里我们为按钮添加了一个点击事件，当用户点击按钮时，输出
values数组中的所有值。
完整代码示例
将上述所有步骤整合在一起，你的 HTML 文件如下所示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>获取 DIV 中输入框的值</title>
<script src="
</head>
<body>
<div id="inputContainer">
<input type="text" placeholder="输入值1" />
<input type="text" placeholder="输入值2" />
<input type="text" placeholder="输入值3" />
</div>
<button id="getValuesButton">获取输入值</button>
<script>
// 选择 DIV 中的所有 input
const inputs = $('#inputContainer input');
// 点击按钮时获取输入值
$('#getValuesButton').on('click', function() {
// 创建一个数组，用于存储所有输入框的值
const values = [];
// 遍历所有输入框
inputs.each(function() {
// 获取当前 input 的值
const value = $(this).val();
// 将值添加到数组中
values.push(value);
});
// 在控制台输出获取到的值
console.log(values);
});
</script>
</body>
</html>
类图示例
以下展示了相关的类图示例：
classDiagram
class InputContainer {
+String[] inputs
+String getValues()
}
结语
通过以上步骤，你成功地实现了从一个 DIV 中获取所有 input 的值。掌握 jQuery 的基本用法，对于你未来的开发工作会有很大的帮助。希望这篇文章能够解答你的疑惑，并为你的学习提供必要的指导。如果你有其他疑问，随时欢迎提出！
