由于项目需要，使用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 的各自优势！的更多相关文章
-
Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 win ...
-
JS的window.onload与JQuery的$(document).ready(function(){})的区别
前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...
-
$(document).ready() 、 $(&#39;#id&#39;).load() 、window.onload 的区别
今天做项目的时候遇到一个问题,结果死在了$(document).ready(). $('#id').load() .window.onload的区别上.然后,就整理一下,这三者的区别. 参考文章:ht ...
-
Jquery中";$(document).ready(function(){ })";函数的使用详解
Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...
-
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
-
(function($){...})(jQuery)和$(document).ready(function(){}) 的区别
(function($){...})(jQuery) 实际上是执行()(para)匿名函数,只不过是传递了jQuery对象. 立即执行函数:相当于先申明一个函数,声明完后直接调用: 用于存放开发 ...
-
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载
1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
-
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
-
jQuery中$(function(){})与（function($){})(jQuery)、$(document).ready(function(){})等的区别讲解
1.(function($){...})(jQuery); (1).原理: 这实际上是匿名函数,如下: function(arg){...} 这就定义了一个匿名函数,参数为arg:而调用函 ...
随机推荐
-
java基础总结——概述
一.java语言概述 来自* https://zh.wikipedia.org/wiki/Java Java是一种计算机编程语言,拥有跨平台.面向对象.泛型编程的特性,广泛应用于企业级Web ...
-
EntityFramework基础
好久没有学习新东西了,最近研究了下EntityFramework,将基础代码贴出来, Entity Framework 利用了抽象化数据结构的方式,将每个数据库对象都转换成应用程序对象 (entity ...
-
meta标签的用法
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...
-
C++ 构造函数放置默认转换explicit关键字（2）
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示: class String { String ( const char* p ); ...
-
Linux ext2文件系统
Linux最传统的磁盘文件系统(filesystem)使用的是ext2 1.ext2文件系统结构ext2文件系统划分为多个块组,每个块组拥有独立的inode/block,一个文件系统只有一个Super ...
-
Linux iostat监测IO状态
Linux iostat监测IO状态 http://www.orczhou.com/index.php/2010/03/iostat-detail/
-
vs2010经常使用快捷键
调试快捷键 F6: 生成解决方式 Ctrl+F6: 生成当前项目 F7: 查看代码 Shift+F7: 查看窗口设计器 F5: 启动调试 Ctrl+F5: 開始运行(不调试) Shift+F5: 停止 ...
-
asp.net中kindeditor配置
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>KindEditor< ...
-
数据泵导出报ORA-01555 ORA-22924
最近对某数据库执行数据泵导出操作时碰到如下错误:Processing object type DATABASE_EXPORT/SCHEMA/JOBProcessing object type DATA ...
-
Ext Js 6+ 动态切换皮肤
在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk) 1.创建空白项目 在命令行中输入sencha -sdk D:\Code\ext-6.2.1 gene ...