如何在jQuery中获取文本框的值

获取文本框的值是 jQuery 中非常常见的操作之一，下面是具体的攻略过程：

1. 确定文本框的选择器

首先需要确定要获取哪一个文本框的值，需要知道该文本框的选择器是什么。选择器可以是 HTML 元素 ID，class 名称或者其他属性等。

假设网页中的一个文本框的 ID 为 "myTextbox"，那么选择器可写成 #myTextbox。

2. 获取和设置文本框的值

有了选择器之后，可以使用 jQuery 的 .val() 方法来获取或设置文本框的值。该方法接受一个可选参数，用于设置文本框的值。

示例 1

以下是一个示例，演示如何通过 ID 选择器获取和设置文本框的值：

<input type="text" id="myTextbox" value="hello">
<button id="btnGetValue">Get Value</button>
<button id="btnSetValue">Set Value</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 获取文本框的值
  $('#btnGetValue').click(function() {
    var value = $('#myTextbox').val();
    alert(value);
  });

  // 设置文本框的值
  $('#btnSetValue').click(function() {
    $('#myTextbox').val('world');
  });
});
</script>

在该示例中，我们创建了一个文本框和两个按钮，分别用于获取和设置文本框的值。当用户点击“Get Value”按钮时，jQuery 会通过 ID 选择器获取文本框的值并弹出一个警告框显示该值。当用户点击“Set Value”按钮时，jQuery 会通过 ID 选择器设置文本框的值为 "world"。

示例 2

以下是另一个示例，展示如何通过 class 名称选择器获取和设置文本框的值：

<input type="text" class="myTextboxes" value="hello">
<input type="text" class="myTextboxes" value="world">
<button id="btnGetValue">Get Value</button>
<button id="btnSetValue">Set Value</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 获取文本框的值
  $('#btnGetValue').click(function() {
    $('.myTextboxes').each(function() {
      var value = $(this).val();
      alert(value);
    });
  });

  // 设置文本框的值
  $('#btnSetValue').click(function() {
    $('.myTextboxes').each(function() {
      $(this).val('Hello World');
    });
  });
});
</script>

在该示例中，我们创建了两个具有相同 class 名称的文本框和两个按钮，分别用于获取和设置文本框的值。当用户点击“Get Value”按钮时，jQuery 会通过 class 名称选择器获取所有文本框的值并弹出一个警告框显示这些值。当用户点击“Set Value”按钮时，jQuery 会通过 class 名称选择器设置所有文本框的值为 "Hello World"。需要注意的是，此处使用了 jQuery 的 .each() 方法来迭代遍历所有的文本框。