突变观测器检测容器中 DOM变化 waitforChild.js

  • 源码大小:10.91KB
  • 所需积分:1积分
  • 源码编号:19JP-3400
  • 浏览次数:578次
  • 最后更新:2023年06月09日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

MutationObserver网络API是跟踪DOM更改的强大工具。它内置于浏览器中,我们也可以将它与jQuery一起使用

js是一个很小的jQuery插件,它使用Mutation Observer API监视特定容器上的DOM更改。当它检测到一个新子项的附加时,它就会触发一个事件。

参见:

  • 观察文档中节点和属性的变化-jQuery突变观察

如何使用它:

1.下载插件并在jquery之后包含jquery.waitforChild.js脚本。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/jquery.waitforChild.js"></script>

2.现在让我们将一些元素附加到指定的容器中。

  1. <ul id="example">
  2. <li>Item 1</li>
  3. <li>Item 2</li>
  4. <li>Item 3</li>
  5. </ul>

3.现在让我们将一些元素附加到指定的容器中。

  1. $('#example').append('<li class="fouth">Item 4</li>');
  2. $('#example').append('<li class="fifth">Item 5</li>');
  3. $('#example').append('<li class="sixth">Item 6</li>');
  4. ...

4.调用函数,然后查找所有新添加的元素。

  1. $('#example').waitforChild({
  2. onFound: function(child) {
  3. // do something
  4. },
  5. });

5.确定是否仅在第一个匹配的子级上应用onFound函数。默认值:false。

  1. $('#example').waitforChild({
  2. onFound: function(child) {
  3. // do something
  4. },
  5. once: true,
  6. });

6.或者只对特定元素应用onFound函数。

  1. $('#example').waitforChild({
  2. onFound: function(child) {
  3. // do something
  4. },
  5. querySelector: 'li.fouth',
  6. });

预览截图