📌  相关文章
📜  document.on chenage jquer - Javascript (1)

📅  最后修改于: 2023-12-03 15:00:31.294000             🧑  作者: Mango

监听文档变化并使用 jQuery 进行操作

当我们需要对文档中的某些元素进行操作，而在操作之前需要先监听文档是否发生了变化，这就需要用到 document.onchange 事件。同时使用 jQuery 可以更加方便地对文档中的元素进行操作。

监听 document 变化

我们可以使用以下代码来监听文档变化：

$(document).on('change', function() {
  console.log('Document has been changed');
});

此时，当文档中任意一个元素的值被改变时，就会触发 document.onchange 事件，并输出 'Document has been changed' 消息到控制台。

对元素进行操作

对于文档中的元素，我们可以使用 jQuery 提供的方法非常方便地进行操作。例如，如果我们需要对一个输入框的值进行获取和设置，可以使用以下代码：

// 获取输入框的值
var val = $('#my-input').val();

// 设置输入框的值
$('#my-input').val('new value');

如果我们需要对一个元素的属性进行操作，也可以使用以下代码：

// 获取元素的属性值
var attrVal = $('#my-element').attr('attr-name');

// 设置元素的属性值
$('#my-element').attr('attr-name', 'new-value');
示例代码

以下代码实现了在文档中添加一个输入框和一个按钮，并在按钮被点击时获取输入框的值并输出到控制台：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Document Change Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).on('change', function() {
        console.log('Document has been changed');
      });

      $(function() {
        $('#my-button').on('click', function() {
          var val = $('#my-input').val();
          console.log(val);
        });
      });
    </script>
  </head>
  <body>
    <input type="text" id="my-input">
    <button id="my-button">Get Value</button>
  </body>
</html>

注意：在以上代码中，我们给输入框和按钮分别设置了 id 属性值，以便方便地获取元素并进行操作。