jQuery | change() 与示例

简介

jQuery库中的change()方法用于绑定HTML元素(一般是表单元素)的onChange事件，也就是当元素的值被修改时所触发的事件。该方法可以用于下拉框、单选框、复选框、文本框等输入框控件的值改变事件处理。

示例

HTML

下面是一个示例代码，包含了两个文本框和一个下拉框：

<label for="name">Name: </label>
<input type="text" name="name" id="name">

<label for="age">Age: </label>
<input type="text" name="age" id="age">

<label for="gender">Gender: </label>
<select name="gender" id="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
  <option value="other">Other</option>
</select>

JS

下面是一个关于change()方法的使用示例，当用户修改表单元素时，显示这些元素最新的值：

$(document).ready(function() {
  $('input[type="text"], select').change(function() {
    var field = $(this).attr('name');
    var value = $(this).val();
    console.log(field + ": " + value);
  });
});

在该示例代码中，我们使用change()方法绑定了input[type="text"]和select表单元素的onChange事件。当元素值被修改时，回调函数将获取该元素的name和值，然后输出到控制台。

总结

change()方法是绑定HTML元素的onChange事件的常用方法，它可以应用于下拉框、单选框、复选框、文本框等控件的值改变事件处理。该方法提供了非常方便的方式来获取表单元素的最新值并进行后续操作。