Jquery给基本控件的取值、赋值示例

当使用 jQuery 时，我们可以使用 val() 方法来获取或设置表单元素的值。val() 方法适用于 input 元素（不包括 button），select 元素，和 textarea 元素。本文将详细介绍如何使用 jQuery 的 val() 方法来给基本控件取值和赋值。

基本语法

获取值：

$("selector").val();

设置值：

$("selector").val(value);

其中，selector 表示要操作的表单元素的选择器，value 表示要设置的值。

示例一：获取和设置 input 元素的值

<!-- HTML代码 -->
<input type="text" id="input" value="Hello World">
<button id="btn">Click me</button>

// jQuery 代码
$(document).ready(function () {
  // 获取 input 的值
  var inputValue = $("#input").val();
  console.log(inputValue); // 输出 "Hello World"

  // 设置 input 的值
  $("#input").val("Hello jQuery");

  $("#btn").click(function () {
    // 获取 input 的新值
    var newInputValue = $("#input").val();
    console.log(newInputValue); // 输出 "Hello jQuery"
  });
});

在上面的示例中，我们首先使用 val() 方法获取了 input 元素的值，并将其输出到控制台。然后，我们使用 val() 方法将 input 元素的值设置为 "Hello jQuery"。最后，当用户点击按钮时，我们再次获取 input 元素的值，并将其输出到控制台。

示例二：获取和设置 select 元素的值

<!-- HTML代码 -->
<select id="select">
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
</select>
<button id="btn">Click me</button>

// jQuery 代码
$(document).ready(function () {
  // 获取 select 的值
  var selectValue = $("#select").val();
  console.log(selectValue); // 输出 "1"

  // 设置 select 的值
  $("#select").val("2");

  $("#btn").click(function () {
    // 获取 select 的新值
    var newSelectValue = $("#select").val();
    console.log(newSelectValue); // 输出 "2"
  });
});

在上面的示例中，我们首先使用 val() 方法获取了 select 元素的值，并将其输出到控制台。然后，我们使用 val() 方法将 select 元素的值设置为 "2"。最后，当用户点击按钮时，我们再次获取 select 元素的值，并将其输出到控制台。

以上就是使用 jQuery 的 val() 方法来给基本控件取值和赋值的完整攻略，希望能对您有所帮助。