jQuery input赋值|极客教程

jQuery input赋值

前言

在Web开发中，我们经常需要通过JavaScript来操作页面元素。其中，操作input元素是一项非常常见的任务。使用jQuery库就可以简化这个过程，通过几行代码就能实现对input元素的赋值操作。

本文将详细说明如何使用jQuery来对input元素进行赋值操作。我们将讨论以下几个方面：
1. 引入jQuery库
2. 选择input元素
3. 赋值给input元素
4. 检索input元素的值
5. 示例代码及运行结果

希望通过本文的学习，您能够掌握使用jQuery对input元素进行赋值操作的方法。

引入jQuery库

首先，我们需要在HTML页面中引入jQuery库。可以通过以下CDN方式引入jQuery库：

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

也可以下载jQuery库，并在HTML页面中引入本地文件。

选择input元素

在jQuery中，可以使用选择器来选择HTML元素。对于input元素，可以使用以下方式进行选择：
1. 按照id选择元素：$("#input_id")
2. 按照class选择元素：$(".input_class")
3. 按照元素类型选择元素：$("input")

选择input元素的方式与选择其他HTML元素的方式类似，可以根据具体的需求选择合适的方式。

赋值给input元素

一旦选择了目标input元素，就可以使用.val()方法来对其进行赋值。.val()方法可以用于获取或设置元素的值。

示例代码：

// 选择id为input_id的input元素，并将其值设置为"Hello World!"
 $("#input_id").val("Hello World!"); // 选择class为input_class的所有input元素，并将它们的值都设置为"Hello!"$ (".input_class").val("Hello!");

// 选择所有input元素，并将它们的值都设置为空字符串
$("input").val("");

检索input元素的值

同样地，我们可以使用.val()方法来获取input元素的值。

示例代码：

// 选择id为input_id的input元素，并将其值打印出来
console.log( $("#input_id").val()); // 选择class为input_class的第一个input元素，并将其值打印出来 console.log($ (".input_class:first").val());

// 选择所有input元素，并将它们的值打印出来
 $("input").each(function() { console.log($ (this).val());
});

示例代码及运行结果

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery input赋值</title>
  </head>
  <body>
    <input type="text" id="input_id" value="">
    <input type="text" class="input_class" value="">
    <input type="text" class="input_class" value="">

    <button id="btn">赋值给input元素</button>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script>
      // 在页面加载完成后执行以下代码
       $(document).ready(function() { // 点击按钮时，将所有input元素的值都设置为"Hello!"$ ("#btn").click(function() {
          $(".input_class").val("Hello!");
        });
      });
    </script>
  </body>
</html>

运行结果：
1. 页面加载完成后，三个input元素的值都为空。
2. 点击”赋值给input元素”按钮后，两个class为input_class的input元素的值都变为”Hello!”。