jQuery里val方法用法详细解析

在jQuery中，val()方法是一个非常实用且常用的方法，它主要用于获取或设置表单元素的值。下面我们来详细解析一下它的用法。

获取表单元素的值

当我们需要获取表单元素（如input、textarea、select等）的值时，可以使用val()方法。例如，对于一个文本输入框：

<input type="text" id="myInput" value="Hello World">

在JavaScript代码中，我们可以这样获取它的值：

$(document).ready(function() {
  var inputValue = $('#myInput').val();
  console.log(inputValue); 
});

在上述代码中，$('#myInput')选中了id为myInput的输入框，然后调用val()方法获取其值，并将值赋给变量inputValue。

设置表单元素的值

val()方法不仅可以获取值，还可以用于设置表单元素的值。例如：

$(document).ready(function() {
  $('#myInput').val('New Value');
});

上述代码将id为myInput的输入框的值设置为New Value。对于select下拉列表，我们可以通过传递选项的值来设置选中项：

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

$(document).ready(function() {
  $('#mySelect').val('option2');
});

这段代码将select下拉列表中值为option2的选项设置为选中状态。

批量操作

val()方法还可以对多个表单元素进行批量操作。例如，我们有多个具有相同类名的输入框：

<input type="text" class="myInputs" value="Value 1">
<input type="text" class="myInputs" value="Value 2">

可以使用以下代码获取所有输入框的值：

$(document).ready(function() {
  var values = $('.myInputs').map(function() {
    return $(this).val();
  }).get();
  console.log(values);
});

jQuery中的val()方法为我们操作表单元素的值提供了便捷的方式，无论是获取还是设置值，都能让我们的代码更加简洁高效。掌握好这个方法，能在前端开发中提升不少效率。