简介
jquery-watch 是一个可以监听 DOM 元素内容变化的 npm 包，它基于 jQuery 和 MutationObserver 实现，可以帮助前端开发者很方便地监控 DOM 的变化，并做出相应的操作。
在本篇文章中，我们将详细介绍如何使用 jquery-watch 这个 npm 包，并且给出相关示例代码，希望能够对前端开发者有所帮助。
安装
首先需要通过 npm 安装 jquery-watch：
npm install jquery-watch --save
然后在你的项目中引入 jQuery 和 jquery-watch：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="./node_modules/jquery-watch/dist/jquery.watch.js"></script>
使用方法
基础用法
下面我们以一个简单的例子来说明如何使用 jquery-watch 监听 DOM 元素的变化并做出相应的操作。假设我们有一个按钮，点击它时我们希望弹出一个提示框：
<button id="myButton">Click Me!</button>
我们可以通过以下代码实现该功能：
$('#myButton').watch({
properties: 'attributes',
callback: function() {
alert('Button content changed!');
}
});上述代码中，我们使用了 jQuery 中的 $ 函数选取了 ID 为 myButton 的按钮，并使用 watch 函数对它进行了监听。其中，properties 参数指定了我们希望监听的属性类型（在这里是 attributes，即元素属性），callback 参数则是一个回调函数，当监听到变化时会执行该函数。
深度用法
除了基本用法外，jquery-watch 还支持一些高级特性，例如过滤器和选项，可以让你更精细地控制监听行为。
以下是一些常用的选项和过滤器：
选项
- useCapture：布尔值，用于指定事件是否在捕获阶段进行监听，默认为
false。 - once：布尔值，用于指定事件是否只触发一次监听后即停止监听，默认为
false。 - timeout：数字，用于指定监听器等待变化的时间（毫秒），如果在超时前没有检测到任何变化，则监听器将停止监听。
过滤器
- attributes：布尔值或字符串数组，用于指定要监听的属性名称。如果是布尔值，则表示监听所有属性；如果是字符串数组，则表示只监听指定属性。
- childList：布尔值，用于指定是否监听子节点的增加和删除操作。
- characterData：布尔值，用于指定是否监听文本节点的内容变化。
下面我们以一个例子来说明如何使用过滤器和选项。假设我们有一个元素，它包含了一个文本节点和一个子元素。我们希望在监听到文本节点内容变化时，弹出一个提示框；在监听到子元素增加或删除时，控制台输出相关信息。
<div id="myDiv"> <p>Hello, world!</p> <span>Child element</span> </div>
我们可以通过以下代码实现该功能：
-- -------------------- ---- -------
-------------------
----------- -------------- ---------------- -------------
----------- -----
----------- ----------
-------------- -----
---------- -----
--------- ------------------- -
------------------------------------ -
-- -------------- --- ------------- -
---------------------- - - ---------------------- - - ----------
- ---- -- -------------- --- ---------------- -
----------- ------- -----------
- ---- -- -------------- --- ------------ -
-------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------