jquery 动态检测页面元素的变化

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。动态检测页面元素的变化是指在页面加载后，实时监控某个元素的状态或内容是否发生了变化。

类型

DOM 变化检测：监控 DOM 元素的结构、属性或内容的变化。
数据变化检测：监控绑定到元素的数据的变化。

应用场景

实时表单验证：在用户输入时实时检查表单数据的有效性。
动态内容更新：在页面加载后，实时监控某个元素的内容变化并做出响应。
交互式界面：在用户与页面交互时，实时更新页面元素的状态。

问题及解决方法

问题：如何使用 jQuery 动态检测页面元素的变化？

原因

jQuery 本身并没有提供直接检测 DOM 变化的 API，但可以通过 MutationObserver API 结合 jQuery 来实现。

解决方法

// 引入 jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    // 选择要监控的元素
    var targetNode = document.getElementById('targetElement');

    // 创建一个观察器实例并传入回调函数
    var observer = new MutationObserver(function(mutationsList, observer) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
            } else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    });

    // 配置观察选项
    var config = { attributes: true, childList: true, subtree: true };

    // 开始观察目标节点
    observer.observe(targetNode, config);

    // 之后，你可以选择停止观察
    // observer.disconnect();
});
</script>

<div id="targetElement">监控这个元素的变化</div>