jquery 获取某个form的input标签

原创

mob64ca12d36217 2024-02-23 04:16:26 ©著作权

文章标签 jQuery 表单 html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d36217的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 获取某个 form 的 input 标签

在前端开发中，我们经常需要获取表单中的输入内容，以便进行各种操作，比如表单验证、提交数据等。使用 jQuery 可以方便地操作 DOM 元素，包括表单元素。本文将介绍如何使用 jQuery 获取某个 form 中的 input 标签，并对其进行操作。

获取 form 中的 input 标签

首先，我们需要一个简单的 HTML 表单，如下所示：

<form id="myForm">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
</form>

接着，我们可以使用 jQuery 来获取这些 input 标签：

$(document).ready(function() {
    // 获取 form 中所有的 input 标签
    var inputs = $('#myForm').find('input');

    // 遍历所有 input 标签
    inputs.each(function() {
        console.log($(this).attr('name') + ': ' + $(this).val());
    });
});

上述代码中，我们首先通过 $('#myForm') 获取到 ID 为 myForm 的 form 元素，然后使用 find('input') 方法找到其中的所有 input 标签。接着，我们使用 each 方法遍历所有的 input 标签，并输出它们的 name 属性和值。

示例演示

为了更好地演示，我们可以使用一个简单的页面来展示上述代码的效果：

<!DOCTYPE html>
<html>
<head>
    <title>获取 form 中的 input 标签</title>
    <script src="
</head>
<body>
    <form id="myForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </form>

    <script>
        $(document).ready(function() {
            var inputs = $('#myForm').find('input');

            inputs.each(function() {
                console.log($(this).attr('name') + ': ' + $(this).val());
            });
        });
    </script>
</body>
</html>

在浏览器中打开该页面，我们可以在控制台中看到输出的内容，即 input 标签的 name 属性和值。

类图

下面是一个简单的类图，展示了 form 和 input 的关系：

classDiagram
    class Form {
        - elements
        + findElements()
    }

    class Input {
        - name
        - value
        + getName()
        + getValue()
    }

    Form "1" -- "*" Input : contains

在类图中，Form 类表示表单，包含多个 Input 元素，而 Input 类表示表单中的输入元素，具有 name 和 value 属性。

关系图

下面是一个简单的关系图，展示了 form 和 input 的关系：

erDiagram
    FORM {
        int form_id
        varchar form_name
    }

    INPUT {
        int input_id
        varchar input_name
        varchar input_value
        int form_id
    }

    FORM ||--o{ INPUT : contains

在关系图中，FORM 表示表单，包含多个 INPUT 元素，两者通过 form_id 进行关联。