由于项目需要,使用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. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  2. Eclipse插件CheckStyle的安装和使用

    转载自:http://www.cnblogs.com/lanxuezaipiao/p/3202169.html CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员 ...

  3. 转:NodeJS、NPM安装配置步骤

    1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到下载页面.  2.下载完 ...

  4. zoj The 12th Zhejiang Provincial Collegiate Programming Contest May Day Holiday

    http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5500 The 12th Zhejiang Provincial ...

  5. ofbiz进击 第三节。 各个关键文件的说明与作用

    1.  entityengine.xml   数据引擎文件 用于配置数据库链接设置 <group-map group-name="org.ofbiz" datasource- ...

  6. PHP浮点数的一个常见问题的解答 (转载 http://www.laruence.com/2013/03/26/2884.html)

    不过, 我当时遗漏了一点, 也就是对于如下的这个常见问题的回答: <?php $f = 0.58; var_dump(intval($f * 100)); //为啥输出57 ?> 为啥输出 ...

  7. 手把手教你用动软.NET代码生成器实例教程

    动软实战攻略 手把手教你用动软 文档编号:20110421 版权所有 © 2004-2011 动软 在线帮助:http://help.maticsoft.com 目录   一.        产品介绍 ...

  8. sql存储过程传入ID集合,和临时表的使用

    方式1: Declare @SQL NVarChar(max) set @SQL='select *from Loanee as a  ApplicationID in ('+@Application ...

  9. logstash的性能测试

    logstash有简单的批量生成插件.generator.详情见官网:https://www.elastic.co/guide/en/logstash/current/plugins-inputs-g ...

  10. 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台获取当前栏目和顶级栏目

    我们现在要实现的是取出网站当前栏目名称和顶级分类名称,如下所示: 列表页的和单页的不能总是写死的吧?? 我能就要想办法去让他变活的才可以解决问题噢,我们已经有了他的cate_id ,然后我们就可以通过 ...