JQ的ready()方法与window.onload()的区别与联系
JQ的ready()与window.onload（）方法都是在文档加载完毕之后才会被触发的方法，但它们之间的区别也是很明显的。
1.区别与联系：
| $(document).ready() | window.onload() | |
| 加载时机 | 网页DOM结构加载完毕即可执行 | 网页内容全部加载完毕（包括图片、表格）才可执行 |
| 执行次数 | 多次，N次都不会被覆盖 | 只能执行一次，如果多次，前面的会被覆盖 |
| 举例 |
以下代码正确执行： $(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>
