jquery通过input的name获取值

原创

mob64ca12d2a342 2023-11-12 11:17:58 ©著作权

文章标签 jQuery 属性值表单 文章分类 jQuery 前端开发

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

使用jQuery通过input的name获取值

在前端开发中，我们经常需要获取用户在表单中输入的值。而使用jQuery，可以方便地通过input元素的name属性来获取对应的值。本文将详细介绍如何使用jQuery通过input的name获取值，并提供相关的代码示例。

1. 理解input的name属性

在HTML中，input元素是用于接收用户输入的最常见的表单元素之一。每个input元素都可以有一个name属性，用于标识该输入字段的名称。name属性的值在表单提交时作为键，对应的用户输入值作为值。

例如，下面是一个简单的HTML表单，包含了两个input元素：

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

在这个表单中，第一个input元素的name属性值是"username"，第二个input元素的name属性值是"password"。

2. 使用jQuery获取input的值

为了获取input元素的值，我们可以使用jQuery的选择器来选中对应的元素，并使用.val()方法获取其值。

下面是一个使用jQuery获取input元素值的示例代码：

// 通过name属性获取input元素的值
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();

// 打印值到控制台
console.log('用户名:', username);
console.log('密码:', password);

在上面的代码中，$('input[name="username"]')使用了jQuery选择器来选中name属性值为"username"的input元素，然后使用.val()方法获取其值，并将其赋值给变量username。同样的方式，我们可以获取name属性值为"password"的input元素的值，并将其赋值给变量password。

3. 示例代码

为了更好地理解如何使用jQuery通过input的name获取值，下面提供一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>获取input的值</title>
  <script src="
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">提交</button>
  </form>

  <script>
    $(document).ready(function() {
      // 监听表单的提交事件
      $('#myForm').submit(function(event) {
        event.preventDefault(); // 阻止表单提交的默认行为

        // 通过name属性获取input元素的值
        var username = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();

        // 打印值到控制台
        console.log('用户名:', username);
        console.log('密码:', password);
      });
    });
  </script>
</body>
</html>

在上面的示例代码中，我们通过监听表单的提交事件$('#myForm').submit()来获取用户在input元素中输入的值。在表单提交事件中，通过选择器$('input[name="username"]')和$('input[name="password"]')来选中对应的input元素，并使用.val()方法获取其值。然后，我们可以根据需要对获取到的值进行处理，例如打印到控制台。