JQ的ready()与window.onload（）方法都是在文档加载完毕之后才会被触发的方法，但它们之间的区别也是很明显的。

1.区别与联系：

  $(document).ready() window.onload()
加载时机 网页DOM结构加载完毕即可执行 网页内容全部加载完毕（包括图片、表格）才可执行
执行次数 多次，N次都不会被覆盖 只能执行一次，如果多次，前面的会被覆盖
举例

以下代码正确执行：

  1. $(document).ready(function(){alert(“Hello”)}); 
  2. $(document).ready(function(){alert(“Hello”)});

结果两次都输出

以下代码无法正确执行：  

  1. window.onload = function()  { alert(“text1”);}; 
  2.  
  3. window.onload = function()  { alert(“text2”);}; 

结果只输出第二个
简写 $(function(){}); 无

由于window.onload()是在文档内容全部加载完毕之后才执行，这包括图片与表格。如果页面存在较多的图片或者大的表格，加载需要大量时间，造成页面无响应，用户体验差。而jq的ready方法无需页面内容全部加载完毕，只需DOM节点加载完成即可。比如，知道页面某处有图片而无需等待它显示出来就可以为图片绑定点击事件。因此，不建议使用window.onload()。

2.ready()与window.onload()的使用：

这2个方法都会在页面加载完毕就会被触发，那么，什么情况下需要使用这些方法呢？下面以代码说明。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>window.onload</title>
  4. <style type="text/css">
  5.     #box{
  6.         width: 200px;
  7.         height: 200px;
  8.         background-color: red;
  9.         }
  10. </style>
  11. <script type="text/javascript">
  12. 	//window.onload=function(){
  13. 		document.getElementById("btn").onclick=function(){
  14. 			document.getElementById("box").style.width="400px";
  15. 			document.getElementById("box").style.height="400px";
  16. 		}
  17. 	//}
  18. </script>
  19. </head>
  20. <body>
  21.     <input type="button" name="btn" id="btn" value="确认">
  22.     <div id="box"></div>
  23. 	<p>一般情况下，页面从上往下、从左到右执行。运行到document.getElementById("btn")时
  24. 	发现没有“btn”元素，报null错误</p>
  25. </body>

上面的代码分别加上注释、去掉注释点击按钮运行2次，就可以看到结果。

这是因为一般情况下，页面从上往下、从左到右执行。运行到document.getElementById("btn")时， 发现没有“btn”元素，报null错误。

如果我们加上window.onload()，页面就会在加载完元素之后才会执行js绑定，不会报错。

当然，还有一种另外一种解决方法（通常建议这样做），就是将js代码放在最后，这样也就无需加上window.onload()方法。但这样代码结构稍显混乱。如下所示：

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>window.onload</title>
  4. <style type="text/css">
  5.     #box{
  6.         width: 200px;
  7.         height: 200px;
  8.         background-color: red;
  9.         }
  10. </style> 
  11.  
  12. </head>
  13. <body>
  14.     <input type="button" name="btn" id="btn" value="确认">
  15.     <div id="box"></div>
  16. 	<p>一般情况下，页面从上往下、从左到右执行。运行到document.getElementById("btn")时
  17. 	发现没有“btn”元素，报null错误</p>
  18.     <script type="text/javascript">
  19. 		document.getElementById("btn").onclick=function(){
  20. 			document.getElementById("box").style.width="400px";
  21. 			document.getElementById("box").style.height="400px";
  22. 		}
  23. </script>
  24. </body>

JQ的ready()方法与window.onload()的区别与联系的更多相关文章

  1. $(document).ready(function(){}) 与 window.onload = function(){} 区别

    $(document).ready(fucntion(){ //在页面dom结构加载完毕后执行代码, }) window.onload = function(){ //页面所有内容加载完毕后,执行代码 ...

  2. $(document).ready()方法和window.onload()方法

    $(document).ready()方法和window.onload()方法 $(document).ready()方法是JQuery中的方法,他在DOM完全就需时就可以被调用,不必等待这些元素关联 ...

  3. jQuery中$(document).ready()和window.onload的区别？

    document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...

  4. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  5. jQuery $(document).ready() 与window.onload的区别

    ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...

  6. $(document).ready()方法和window.onload区别

    事件: javascript 和 HTML之间的交互式通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化和操作时,浏览器会自动生成一个事件:例如:当用户单击某个按钮时,也 ...

  7. [Javascript]jquery $(document).ready() 与window.onload的区别

    引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...

  8. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

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

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

随机推荐

  1. 对max_allowed_packet这个参数的误解

    之前一篇文章知识对,这个参数一个泛泛的概念,但是并没有理解这个参数的真正意义,现在差不多有那么点儿感觉了,主要的意思是每一条记录是一个包,不可拆分,而且包括blob,text等大字段.

  2. TF Boys (TensorFlow Boys ) 养成记（四）：TensorFlow 简易 CIFAR10 分类网络

    前面基本上把 TensorFlow 的在图像处理上的基础知识介绍完了,下面我们就用 TensorFlow 来搭建一个分类 cifar10 的神经网络. 首先准备数据: cifar10 的数据集共有 6 ...

  3. Python基于VS2013 开发环境搭建 Hello World 10分钟搞定

    1.先下载Python 安装 Next ->安装完成 2.以前安装过VS2013 打开VS2013 文件->新建项目 (此时如果没有Python Application,请点击里面的安装插 ...

  4. kalilinux-权限提升

    meterpeter: 可以在 Meterpreter 使用 incognito 来开始模拟过程: use incognito 展示 incognito 的帮助文档,通过输入 help 命令: hel ...

  5. kalilinux系统设置

    echo LANG="zh_CN.UTF-8" > /etc/default/locale

  6. 说说JVM中的操作码

    JVM操作码 加载与存储操作码 load --从局部变量加载值到栈上 ldc --从池中加载常量到栈上 store --把值从栈中移走,存到局部变量中 dup --复制栈顶的值 getField -- ...

  7. js对象 1字符串对象2时间日期对象3数字对象

    1字符串对象  直接对字符操作 var str = "这,是,不,是,字,符,串";        //字符串转数组  字符串.split(分隔符)        var arr ...

  8. WCF 学习笔记

    Windows Communication Foundation (WCF) 是用于构建面向服务的应用程序的框架.借助 WCF,可以将数据作为异步消息从一个服务终结点发送至另一个服务终结点.服务终结点 ...

  9. struts2使用验证文件实现校验

    原创 struts2框架提供了一种基于验证文件的输入验证方式,将验证规则保存在特定的验证文件中. 验证文件的命名规则 一般情况下,验证文件的命名规则是:Action类名-validation.xml. ...

  10. hdu2653之BFS

    Waiting ten thousand years for Love Time Limit: 10000/2000 MS (Java/Others)    Memory Limit: 32768/3 ...