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

1.区别与联系：

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

以下代码正确执行：

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

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

结果两次都输出

以下代码无法正确执行：  

window.onload = function()  { alert(“text1”);}; 

window.onload = function()  { alert(“text2”);}; 

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

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

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

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

<head>

<meta charset="UTF-8">

<title>window.onload</title>

<style type="text/css">

    #box{

        width: 200px;

        height: 200px;

        background-color: red;

        }

</style>

<script type="text/javascript">

	//window.onload=function(){

		document.getElementById("btn").onclick=function(){

			document.getElementById("box").style.width="400px";

			document.getElementById("box").style.height="400px";

		}

	//}

</script>

</head>

<body>

    <input type="button" name="btn" id="btn" value="确认">

    <div id="box"></div>

	<p>一般情况下，页面从上往下、从左到右执行。运行到document.getElementById("btn")时

	发现没有“btn”元素，报null错误</p>

</body>

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

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

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

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

<head>

<meta charset="UTF-8">

<title>window.onload</title>

<style type="text/css">

    #box{

        width: 200px;

        height: 200px;

        background-color: red;

        }

</style> 

</head>

<body>

    <input type="button" name="btn" id="btn" value="确认">

    <div id="box"></div>

	<p>一般情况下，页面从上往下、从左到右执行。运行到document.getElementById("btn")时

	发现没有“btn”元素，报null错误</p>

    <script type="text/javascript">

		document.getElementById("btn").onclick=function(){

			document.getElementById("box").style.width="400px";

			document.getElementById("box").style.height="400px";

		}

</script>

</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. 二、SQL的生命周期

    MySQL的sql语句由客户端发出,经过连接和权限验证后,最终达到服务器端,由服务器分配thread线程处理,之后就是要介绍的具体服务器端的thread线程是怎么处理每条sql语句的.[ 了解thre ...

  2. Openssl rand命令

    一.简介 rand命令用来产生伪随机字节,随机数字产生器需要一个seed,在没有/dev/srandom系统下的解决方法是自己做一个~/.rnd文件 二.语法 openssl rand [-out f ...

  3. dll详解

    [转]http://www.cnblogs.com/xuemaxiongfeng/articles/2461632.html 不解为什么要用WINAPI宏定义,查了后发现下面的定义.于是乎需要区别 _ ...

  4. code1316 文化之旅

    文化之旅的本质是最短路问题,只不过添加了一个文化排斥,仅需要做最短路时判断一下是否排斥即可 因为数据较小,采用了Floyd算法,以下是代码,关键部分附注释: #include<iostream& ...

  5. linux环境下搭建osm_web服务器四（对万国语的地名进行翻译和检索）：

    对万国语的地名进行翻译和检索 经过 前三篇的调试,已经有了一个完整的Map可以浏览,我们痛苦的世界范围数据下载.导入过程也结束了.要提醒一下的是,鉴于网速,不要下载 planetosm.lastest ...

  6. js改变触发

    onchange="doEmpty($(this))"

  7. gitlab centos 安装配置运维笔记

    写在前面 如果你需要一个git服务器,为企业或自己的团队托管代码而又不希望将代码仓库存储到第三方.你可以在自己的服务器上搭建一个gitlab. 本文为我在最初安装配置gitlab服务器的时候留存的笔记 ...

  8. HaXe以及OpenFL部署

    HaXe以及OpenFL部署 Haxe是一种跨平台的编程语言,本文并未HAXE的教程,只是针对OPENFL以及HAXE的部署教程.HAXE的语法非常类似AS3,由于国内部署HAXE艰难,经常下载到一半 ...

  9. Web实践—Rec 1

    累计完成任务情况: 阶段内容 参与人 开会学习作业要求,取得共识 全体 注: 1."阶段内容"划斜线表示完成.2.采用倒序. 具体情况: 正式开展实践作业之前的说明: 按照之前达成 ...

  10. 2 Python之编程语言介绍及变量

    一: 编程语言介绍 1.机器语言 直接用二进制编程,直接控制硬件,需要掌握硬件的操作细节 优点:执行效率高 缺点:开发效率低 2 汇编语言: 用英文标签取代二级制指令去编写程序,直接控制硬件,需要掌握 ...