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. 通过snmp监控linux

    一.linux snmpd安装 yum install -y net-snmp net-snmp-utils 二.snmp的配置(vim /etc/snmp/snmpd.conf) com2sec n ...

  2. ajax+servlet 简易时间效果

    <!DOCTYPE html> <html> <head> <title>index.html</title> <meta name= ...

  3. Fix: The account is not authorized to log in from this station

    If you have more the one computers running Windows, then its possible to connect them using HomeGrou ...

  4. spring aop博客记录

    1.spring aop和事务失效 解决办法: http://blog.csdn.net/z2007130205/article/details/41284381 http://blog.csdn.n ...

  5. strlen头文件

    #include <string.h> 函数strlen strsep 等等

  6. btrfs的介绍与使用

    源文献:http://www.ibm.com/developerworks/cn/linux/l-cn-btrfs/index.html#ibm-pcon 简单看了一下这篇文章,对其中一些机制的实现还 ...

  7. PHP中PSR

    PSR 是 PHP Standard Recommendations 的简写,由 PHP FIG 组织制定的 PHP 规范,是 PHP 开发的实践标准. 文档整理 PSR-0: Autoloading ...

  8. RedisHelper in C#

    自己写了一个RedisHelper,现贴出来,希望各位大神能够指正和优化. using System; using StackExchange.Redis; using System.Configur ...

  9. C# 释放资源的规范写法

    static class CSharp_3 { /* ---------------------------------------- * 以下学习资源的释放:IDispose和析构函数 * 1.ID ...

  10. 洛谷P4149 [IOI2011]Race（点分治）

    题目描述 给一棵树,每条边有权.求一条简单路径,权值和等于 KK ,且边的数量最小. 输入输出格式 输入格式:   第一行:两个整数 n,kn,k . 第二至 nn 行:每行三个整数,表示一条无向边的 ...