返回值:jQuerychange(handler(eventObject))

为 JavaScript 的 "change" 事件绑定一个处理函数，或者触发元素上的该事件。

带有参数的该方法是 .bind('change', handler) 的快捷方式，不带参数的该方法是 .trigger('change') 的快捷方式。

当值改变的时候，就会触发 change 事件。该事件只能用于 <input> 元素，<textarea> 和 <select> 元素。对于 select，checkbox 和 radio 按钮而言，当用户选择某一项目时，就会立刻触发该事件，但是对于 input 的其它元素而言，只有当元素失去焦点时，才会触发该事件。

举例来说，请看下面的HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

该事件可以绑定在文本框和选择列表上：

$('.target').change(function() {
  alert('Handler for .change() called.');
});

现在，如果从下拉列表中选择了第二项的话，就是显示出一个提示框。当你改变了文本框的内容并将焦点移走后，同样会显示提示框。虽然文本框失去了焦点，但是内容没有改变的话，是不会触发该事件的。若要手动触发该事件，请调用不带参数的 .change(): 

$('#other').click(function() {
  $('.target').change();
});

在代码执行后，如果你点击 Trigger the handler 将同样会弹出上面的消息。并且消息会显示两次，因为绑定 change 事件的表单元素有两个。

从 jQuery 1.4 开始，change 事件可以在 IE 中进行事件冒泡。在主流的浏览器中，保持了其行为的一致性。

示例:

为 select 元素添加 change 事件，将选中的项目显示在 div 中。

<!DOCTYPE html>
<html>
<head>
<style>

  div { color:red; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>

    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>

  </select>
  <div></div>

<script>


    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();


</script>
</body>
</html>

演示:

示例:

为所有文本框添加有效性验证：

jQuery 代码:
$("input[type='text']").change( function() {
  // check input ($(this).val()) for validity here
});