由于项目需要，使用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. SQLSERVER：Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached.

    背景: 在最近开发中遇到一个问题,对一个数据库进行操作时,我采用64个并行的任务每个任务保证一个数据库连接对象:但是每个任务内部均包含有24个文件需要读取,在读取文件之后,我们需要快速将这24个文件批 ...

  2. j2ee servlet listener

    JSP/Servlet 中的事件处理写过AWT或Swing程序的人一定对桌面程序的事件处理机制印象深刻:通过实现Listener接口的类可以在特定事件(Event)发生时,呼叫特定的方法来对事件进行响 ...

  3. topsort

    top排序每次入队的是限制情况为0的... 就可以直接记录了,每次出队的就也是为0的,出队结果对每个子节点或者被限制节点,的限制条件-1 然后再判断有没有后继有没有为0的,有就入队! 出入队一次,找后 ...

  4. .net 中 ref out params的区别

    C#中有三个关键字-ref,out ,params,虽然本人不喜欢这三个关键字,因为它们疑似破坏面向对象特性.但是既然m$把融入在c#体系中,那么我们就来认识一下参数修饰符ref,out ,param ...

  5. HDU 4834 JZP Set（数论+递推）（2014年百度之星程序设计大赛 - 初赛（第二轮））

    Problem Description 一个{1, ..., n}的子集S被称为JZP集,当且仅当对于任意S中的两个数x,y,若(x+y)/2为整数,那么(x+y)/2也属于S.例如,n=3,S={1 ...

  6. cluster集群

    http://zwfang09.blog.sohu.com/entry/ Cluster 集群 ,群集 --- 负载均衡 LB ,load-balance --- 高可用集群 HA ,High Ava ...

  7. PAT乙级 1018. 锤子剪刀布 (20)

    1018. 锤子剪刀布 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大家应该都会玩“锤子剪刀布”的游 ...

  8. linux设备驱动归纳总结（十一）：写个简单的看门狗驱动【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-112879.html linux设备驱动归纳总结(十一):写个简单的看门狗驱动 xxxxxxxxxxx ...

  9. inux设备驱动归纳总结（五）：2.操作硬件——IO内存【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-80627.html inux设备驱动归纳总结(五):2.操作硬件——IO内存 xxxxxxxxxxxx ...

  10. 【python cookbook】【字符串与文本】5.查找和替换文本

    问题:对字符串中的文本做查找和替换 解决方案: 1.对于简单模式:str.replace(old, new[, max]) 2.复杂模式:使用re模块中的re.sub(匹配的模式, newstring ...