博客

如何使用jQuery获取输入文本框中的值

  • Post category:jquery

获取输入文本框中的值是Web开发中常见的操作。jQuery是一个非常流行的JavaScript库，提供了快捷便利的方法来操作DOM元素，包括获取输入文本框中的值。

以下是使用jQuery获取输入文本框中的值的攻略：

步骤一：选择文本框

使用jQuery选择器来选择需要获取值的文本框。

示例1：选择ID为“username”的文本框

var username = $('#username').val();

示例2：选择class为“email”的文本框

var email = $('.email').val();

步骤二：获取文本框的值

使用jQuery的val()方法来获取文本框的值。

示例1：获取ID为“username”的文本框的值

var username = $('#username').val();

示例2：获取class为“email”的文本框的值

var email = $('.email').val();

完整示例：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery获取文本框中的值</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <label for="username">用户名:</label>
  <input type="text" id="username">

  <br>

  <label for="email">电子邮件:</label>
  <input type="text" class="email">

  <br>

  <button id="submit" type="button">提交</button>

  <script>
    $(document).ready(function() {
      $('#submit').click(function() {
        var username = $('#username').val();
        var email = $('.email').val();

        alert('用户名: ' + username + '\n电子邮件: ' + email);
      });
    });
  </script>
</body>
</html>

以上示例中，我们选择ID为“username”的文本框和类为“email”的文本框，然后在按钮点击事件中获取它们的值，并使用alert()函数将值输出到弹框中。

希望对你有所帮助！

Tags: