JQuery 监听元素变化

在前端开发中，我们经常需要监听元素的变化来实现一些交互效果，比如当 input 输入框输入内容时，自动显示和隐藏某些元素。在 JQuery 中，我们可以使用 on 方法来监听元素变化。

监听 input 输入框内容变化

$(document).on('input', 'input', function() {
  console.log($(this).val());
});

上面的代码监听了整个文档上的所有 input 元素的 input 事件，并输出输入框中的值。

我们也可以使用 change 事件来监听 input 输入框内容的变化，但是 change 事件只有在输入框失去焦点时才会触发。

$(document).on('change', 'input', function() {
  console.log($(this).val());
});

监听 select 下拉框选项变化

$(document).on('change', 'select', function() {
  console.log($(this).val());
});

上述代码监听了整个文档上的所有 select 元素的 change 事件，并输出选中的选项的值。

监听复选框和单选框状态变化

$(document).on('change', 'input[type=checkbox]', function() {
  console.log($(this).is(':checked'));
});

$(document).on('change', 'input[type=radio]', function() {
  console.log($(this).val());
});

上述代码监听了整个文档上的所有复选框和单选框的 change 事件，并输出选中状态或选中的值。

总结

使用 on 方法可以方便地监听文档中元素的变化。需要注意的是，在监听元素变化时尽量不要监听整个文档，而是应该在指定的元素上进行监听，这样可以提高性能。