jquery添加监听html内容变化

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。监听 HTML 内容变化通常涉及到 DOM（文档对象模型）的变化监听。

类型

监听 HTML 内容变化主要有以下几种方式：

事件监听：通过事件监听 DOM 的变化，如 change、input 等。
MutationObserver：这是一个现代的 API，可以监听 DOM 的任何变化，包括子节点的添加、删除、属性的变化等。

应用场景

表单验证：实时监听输入框的内容变化，进行实时的表单验证。
动态内容更新：监听某个元素的内容变化，当内容变化时，执行相应的操作。
数据绑定：实现视图和数据的绑定，当数据变化时，自动更新视图。

示例代码

使用事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 监听 HTML 内容变化</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="inputField">
    <p id="output"></p>

    <script>
        $(document).ready(function() {
            $('#inputField').on('input', function() {
                var inputValue = $(this).val();
                $('#output').text('输入的内容是：' + inputValue);
            });
        });
    </script>
</body>
</html>

使用 MutationObserver

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 监听 HTML 内容变化</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">初始内容</div>

    <script>
        $(document).ready(function() {
            var targetNode = document.getElementById('content');
            var config = { attributes: true, childList: true, subtree: true };

            var observer = new MutationObserver(function(mutationsList, observer) {
                for (var mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        console.log('子节点发生了变化');
                    } else if (mutation.type === 'attributes') {
                        console.log('属性发生了变化');
                    }
                }
            });

            observer.observe(targetNode, config);
        });
    </script>
</body>
</html>