使用jQuery监听DOM元素大小变化(jquery监听span内容的变化)

编辑：rootadmin

推荐整理分享使用jQuery监听DOM元素大小变化(jquery监听span内容的变化)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery监听span内容的变化,jquery监听窗口大小,jquery监听div属性变化,jquery监听数据变化,jquery监听数据变化,jquery监听div属性变化,jquery 监听,jquery监听div属性变化,内容如对您有帮助，希望把文章链接给更多的朋友！

起因

今天写页面的时候突然有这么个需求，由于父元素（一个DIV）的height是由javascript计算出来的固定的值，而在其中增加了一个多说插件，在用户评论后，子元素（DIV）的height属性增加，导致子元素溢出。但是又不知道如何为多说的评论按钮增加回调函数，于是乎就想到了根据子元素的大小变化来重新计算父元素的height。

onresize&#;

平常，都是在整个浏览器窗口变化时触发一个修改布局的回调函数。使用的是window对象的resize事件，利用：

来绑定。但根据resize事件的target是defaultView (window)，这里详见MDN的resize文档，也就是说只有window对象有resize事件，于是乎就想到使用jQuery自己的事件机制来模拟一个普通元素上的resize事件

使用JQUERY事件的实现思路

可以想到一种比较简单的方式：

1. 在元素绑定resize对象时，记录元素的width和height2. 使用requestAnimationFrame、setTimeout、setInterval，每隔一段时间查询其width和height，如果和记录的width和height不一样，运行回调函数并更新记录中的width为height

JQUERY插件

这个功能Ben Alman编写了一个jQuery插件，传送门该插件的代码（核心部分），详细代码请查看Ben Alman博客的内容：

jQuery为jQuery插件的开发者提供了添加自定义事件的接口，详细可以参考jQuery官方文档，这里就是典型的jQuery自定义事件添加方式，其中有三个钩子：

1. setup：The setup hook is called the first time an event of a particular type is attached to an element.首次绑定时执行，如果返回 false，使用默认方式绑定事件2. teardown：The teardown hook is called when the final event of a particular type is removed from an element.若指定该方法，其在移除事件处理程序(removeEventListener)前执行，如果返回 false，移除默认绑定事件3. add：Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook.每一次给元素绑定事件，都会执行这个方法

setup、teardown和add三个钩子，每个钩子最先做的事都是检测是否该对象为window对象，然后根据window对象特殊处理，因为window对象本身有resize事件

从setup钩子可以看到，在初始化整个事件处理时，创建一个元素队列，队列中的每隔元素都把width和height放在data中，然后每隔ms启动loopy函数，在loopy函数中判断是否变化，如果有变，触发回调函数并更新data中的width和height

从teardown钩子可以看到，在元素移除事件时，只需要将元素从元素队列移除，并清除元素中的data数据。如果是元素队列中的最后一个元素，则不再继续执行loopy

add钩子中，对回调函数进行了包装

由此可以看到一个简单的jQuery自定义函数的实现机制

JQuery EasyUI的使用 jQueryEasyUI是一个基于jQuery的框架，集成了各种用户界面插件。EasyUI简介easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应

jQuery+formdata实现上传进度特效遇到的问题总结我做HTML5文件上传插件遇到的技术问题先贴上源码：fileupload-html5.js（PS:公司使用seajs框架）问题列表1.JQUERY.AJAX没有监听上传进度的ONPROGRESS事件。2.XM

浅析jQuery Ajax请求参数和返回数据的处理刚接触学会用jQueryajax的时候，觉得真东西好神奇，这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上，一颗赛艇。之前很早接触

标签: jquery监听span内容的变化

本文链接地址:https://www.jiuchutong.com/biancheng/382995.html 转载请保留说明！

上一篇：jQuery中判断对象是否存在的方法汇总(jquery判断对象是否存在)

下一篇：JQuery EasyUI的使用(jquery easy ui)