你真的了解jQuery的ready函数吗？当 DOM（文档对象模型） 已经加载，就执行ready里的代码。DOM何时加载完毕？jQuery对html局部操作，DOM为什么不重新加载？

你真的了解jQuery的ready函数吗？



当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生
ready 事件。

那么什么时候DOM加载完成呢？

答案是：

浏览器相应完某个http url请求得到所有f12的最终html代码，并展现给用户。

即算有的html代码都展现完毕的时候，DOM对象就算加载完毕了。

证据如下：

DOM对象，代表整个 HTML 文档，用来访问页面中的所有元素。

如果f12的html代码加载不完，DOM怎么能访问页面中的所有元

素？

因此，DOM对象就算加载完毕，意思就是f12的html代码都加载完毕。





--------------个人总结：

这样就解释了，j2ee的web项目的展示界面的结构有很多种，无论你使用哪种方式打开一个新的界面（可能是add、可能是view、可能是显示datatable列表、也可能是系统首页，任何一个新的界面），你使用的前端框架如amazeui、miniui等，都会在页面加载完成后，对页面进行初始化。

因为你任何一个界面，都会让DOM重新加载一次，而框架就是在此时，对页面实现初始化，即在Ready函数中（页面加载完毕后执行Ready函数）添加各种离开焦点事件即blur事件。如框架对输入框的校验（如最大值、最小值、整数、电话号码格式等）都是在Ready中添加的事件（一般是离开焦点事件，即blur事件），这样一旦输入格式不正确，页面上就会提示错误信息。

即页面的布局（左上角是系统信息，右上角是登录信息和退出，左边是菜单，右边是展示的主页面）、新增是弹出新的标签页，还是openwin一个页面其他地方变灰不可点击，还是弹出一个页面其他地方依然可以点击等，无论使用哪一种，只要有html代码需要展现到f12的最终html中（①http url请求的response大部分即前后端不分离的使用jsp技术的是直接将html代码放在http的响应报文中传递给浏览器。②而前后端分离的一般直接就链接弹出一个html页面，这个页面就来自于前端，不需要从来自于后台的获取响应报文中的html代码，响应报文中一般是json字符串，只用来传递参数值。），DOM就会重新加载一次。原因上面已经说过了，DOM是整个html文档，可以访问任何一个html元素，如果DOM不重新加载，后来载入的html代码DOM不就获取不到了吗？

但是又出现了一个问题，如果我有个button标签，点击就会对整个html页面即DOM对象中的某些元素进行操作（增加html代码、删除html代码、修改html代码等），为什么不会使DOM重新加载？html页面的确是变化了啊，整个html页面的代码某些肯定变化了，为什么DOM不重新加载？如果这种情况，amazeui的openWin弹出的页面，整个页面应该也无法实现校验，因为校验的离开焦点事件即blur，都是在ready函数（即DOM加载完毕后）才填上去的。莫非，openWin中有代码强制DOM进行重新加载？最有可能的就是

 $("#XXX").modal({{ }});//整个代码，实现页面的重绘，重绘是不是就让DOM重新加载呢？

不是的。

奥妙在，openwin中，有一个loadjs的函数，执行如下代码：

var href = contextPath + "/" + $n1.attr("src");

$.getScript(href, function(){ 

 });

是这个代码在执行ready函数，而不是DOM重新加载触动的ready函数，所以DOM并没有重新加载。

--------------------------因此，现在好多前端框架如amazeui，都不会使用原生的ready函数（即DOM加载完毕后就执行的ready函数）了，而是通过$.getScript，动态的加载。

也就是说，你在研发中的某个html页面（不是一个标准的页面，可能是一个html代码片段，没有head、body、css、JavaScript等标准形式）中看到的引入的某个js文件（在html的引入方式也是框架自行自定义的，如<span javascript src="js/auth/test.js" />，正常的应该是诸如<script src="//chrome.izfei.com/check.js"></script>。因此不是符合html页面规范的，即不能直接拿来用的js文件，需要框架解析html中引入的js文件）中的jQuery的ready函数，有时候会让你密码，我明明是用jQuery的方式对html页面进行的增加、修噶（添加、修改页面的html代码），此时浏览器并没有重新加载DOM，为什么ready的函数还是执行了？那不是自动执行的，而是框架通过$.getScript调用执行的。

即如下图最下部引入的js，并没不是标准得js引入，因此其中的JavaScript函数，并不能被html页面中的onclick（）函数直接调用，需要等onclick函数响应完毕后，框架再次对onclick函数中的函数进行响应，并调用$.getScript函数，执行从html页面中引入的js中的函数。



关于$.getScript（）函数，参考我的：http://blog.csdn.net/ideality_hunter/article/details/73015132

--------总结：

因此对jQuery的ready函数理解，是没有问题的，即在浏览器中发起一个普通http url（而不是ajax的http url请求，ajax请求和普通的http url请求的包头是有区别的），等所有html页面加载完毕，就执行ready函数。而一旦所有html页面加载完毕之后，再进行的任何对页面DOM的操作，都不会对DOM重新加载。

这里的核心在于：

普通的http url请求会导致DOM加载（表现为页面有刷新动作，即整个页面会闪一下，即整个页面 都 刷新了）；

而ajax的http url请求会不会导致DOM加载（表现为页面不刷新，是局部的变化，即整个页面
不  刷新）；