jquery 给form表单增加值

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 Web 开发中，jQuery 经常用于简化 DOM 操作。

类型

jQuery 可以用于多种类型的前端开发任务，包括但不限于：

DOM 操作
事件处理
动画效果
Ajax 交互

应用场景

jQuery 广泛应用于各种 Web 开发场景，例如：

表单验证
动态内容加载
图片轮播
滚动效果

示例代码：给 form 表单增加值

假设我们有一个简单的 HTML 表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Form Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="quantity">Quantity:</label>
        <input type="number" id="quantity" name="quantity" value="0">
        <button type="button" id="increment">Increment</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#increment').click(function() {
                var currentQuantity = parseInt($('#quantity').val());
                $('#quantity').val(currentQuantity + 1);
            });
        });
    </script>
</body>
</html>

解释

引入 jQuery：在 <head> 标签中引入了 jQuery 库。
HTML 表单：创建了一个包含输入框和按钮的简单表单。
jQuery 代码：
- $(document).ready(function() { ... });：确保 DOM 完全加载后再执行 jQuery 代码。
- $('#increment').click(function() { ... });：绑定按钮的点击事件。
- var currentQuantity = parseInt($('#quantity').val());：获取当前输入框的值并转换为整数。
- $('#quantity').val(currentQuantity + 1);：将输入框的值增加 1。