由于项目需要，使用JQuery也有相当一段时间了。由于经常要处理DOM节点加载、图片显示以及动态资源请求，所以对$(document).ready(function(){})理解也越来越深了，所有在此分享我的一些体会：

1. $(document).ready(function(){...}) 此方法是JQuery版本的window.onload = function(){...}。

　　1.1 $(document).ready(function(){...})的其他两种缩写形式： $().ready(function(){...})【这种写法官方文档上说不建议使用】 和 $(function(){...})。

　　1.2 $(document).ready(function(){...})与window.load执行顺序：$(document).ready(...)是在页面加载完所有DOM节点文档结构后开始执行，window.onload则是在页面加载所有资源后才开始执行。也就是说window.onload要等到所有图片，外链资源都加载完后才开始执行，也因此window.onload只允许定义一个（实际是可以定义多个，但只有最后一个有效，相当于前面会被覆盖掉），而$(function(){...})可以允许定义多个，并且按照定义的先后顺序先后执行。对于大部分应用情况下，$(function(){...})可以说完胜window.onload，因此其执行时间早，用户体验就更好。但是在一些特定情况下，情况不一定，在下面第2节会举例说明。

2. $(document).ready(function(){...})不好使或者说不如window.onload的情况：

　　2.1 因为$(document).ready(function(){...})是在一旦DOM节点加载完后就开始执行，但是如何页面中引用的其他的JS脚本，并且修改了一些DOM节点结构，那么这个时候$(document).ready(function(){..})就有可能无法检测到实际的节点。例如：

 <html>

 <head>

 <script src="/Scripts/MyJS.js?v=1.0.0>" type="text/javascript"></script>

 <script type="text/javascript"> $(function(){...}); </script>

 </head>

 <body>

 ...

 <div>

 9     ....

10 </div>

 ....

 </body>

 </html>

　　在MyJs.js中有对应的代码将上述代码中的绿色DIV加上class = “title2"属性。这个时候可能由于MyJs.js比较大，在执行$(function(){....})时，MyJs.js还没加载完，我如果在$(function(){...}中就无法使用$("div.title2")等来进行选择节点。当然，你可以在执行$("div.title2")代码之前加上定时器进行解决这种情况，但是由于不知道要等多长时间才能获取得到div.title2，因此这种方法也不能完全解决（你可能已经想到另一种解决方法了，那就是可以采用setInternal来解决这个问题了，实际上也确实可以，我自己也使用过此方法解决过实际问题，尤其是一些图片显示的）。此时如果你用window.onload就不会有这个烦恼了！

　　2.2 另一种情况就是有一些页面中可以会嵌入一些web service，这个情况下，使用$(function(){...})也可能无法获取到web service请求后的对应的DOM节点，其原因与2.1类似，不再赘述。

　　这是我自己在运用JQuery解决实际一些问题时的一些体会，如果有不对之处，欢迎大家指出加入改正，分享！

JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！的更多相关文章

  1. Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间 win ...

  2. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  3. $(document).ready() 、 $('#id').load() 、window.onload 的区别

    今天做项目的时候遇到一个问题,结果死在了$(document).ready(). $('#id').load() .window.onload的区别上.然后,就整理一下,这三者的区别. 参考文章:ht ...

  4. Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...

  5. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  6. (function($){...})(jQuery)和$(document).ready(function(){}) 的区别

    (function($){...})(jQuery)  实际上是执行()(para)匿名函数,只不过是传递了jQuery对象.   立即执行函数:相当于先申明一个函数,声明完后直接调用: 用于存放开发 ...

  7. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  8. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  9. jQuery中$(function(){})与（function($){})(jQuery)、$(document).ready(function(){})等的区别讲解

    1.(function($){...})(jQuery); (1).原理:       这实际上是匿名函数,如下: function(arg){...} 这就定义了一个匿名函数,参数为arg:而调用函 ...

随机推荐

  1. C#： 获取当前应用程序所在路径

    ref: http://www.cnblogs.com/netlyf/archive/2011/06/22/2086718.html 一.获取当前文件的路径 string str1=Process.G ...

  2. 怎么在eclipse里调试WebDriver的源代码（转）

    当你看完WebDriver的工作原理这篇博客以后,是不是也跃跃欲试想印证文章里的理论是不是正确,想自己也看下webdriver的源代码,并且调试下,通过代码来更深入的了解WebDriver的工作原理. ...

  3. 安装Git

    因为我的开发环境是Windows,那么在windows下安装Git就简单很多了.首先在,从http://msysgit.github.io/下载Git的安装程序,然后按默认选项安装即可. 安装成功之后 ...

  4. 数据库中is null(is not null)与=null(!=null)的区别

    在标准SQL语言(ANIS SQL)SQL-92规定的Null值的比较取值结果都为False,既Null=Null取值也是False.NULL在这里是一种未知值,千变万化的变量,不是“空”这一个定值! ...

  5. POJ 3243 Clever Y（离散对数-拓展小步大步算法）

    Description Little Y finds there is a very interesting formula in mathematics: XY mod Z = K Given X, ...

  6. 查看Linux服务器各种信息方法

    有的时候需要搜集服务器的各种信息,比如cpu信息,内存信息,linux版本信息,安装的各种软件信息等等.下面总结几种主要指标的查看方法. 1. 查看Linux发行版信息 [root@pcmweb ~] ...

  7. 17---Net基础加强

    更新中,敬请期待............ 复习 将xml显示到treeview 修改增加 删除 foreach原理 深拷贝与浅拷贝 模拟数据库及登陆 复习总结

  8. 解决Android SDK Manager更新下载速度慢

    1.在Host文件加上 203.208.46.146 www.google.com 74.125.113.121 developer.android.com 203.208.46.146 dl.goo ...

  9. 如何在图像处理工具包ImagXpress中对图像进行捕捉、复制和粘贴

    如何在在ImagXpress中进行图像的捕捉. 复制和粘贴呢?下面详细来看一下,在多种情况下,图和实现这些操作. 捕捉屏幕图像 捕捉通过ImageXView窗口绑定的屏幕范围,以及保存到一个Image ...

  10. linux 文件删除原理

    文件删除: i_link 文件的硬连接数 i_count 引用计数(有一个程序使用i_count加1) 文件删除的条件: i_link=0 and i_count=0 被进程占用的文件可以删除