$(document).ready()和window.onload的区别

前言:JQuery用了好一段时间了,一直对$(document).ready()和window.onload的区别有点模糊,最近有时间就在网上查了查子类,做了个小例子;

网上给的解释比较通俗易懂:

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

1.执行时间 

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

2.编写个数不同 

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
$(document).ready()可以同时编写多个,并且都可以得到执行 

3.简化写法 

window.onload没有简化写法 
$(document).ready(function(){})可以简写成$(function(){});


下面是个测试例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
<title>测试JQuery</title>
    
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    
<script type="text/javascript">
        window.onload 
= function () {
            
var str = document.getElementById("lbtestJs").innerHTML + "<br />这个是Window.onload方法;";
            document.getElementById(
"lbtestJs").innerHTML = str;
        };

        $(
function () {
            $(
"#lbtestJs").html($("#lbtestJs").html() + "<br /> 这个是JQuery的$(document).ready();");
        });
    
</script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
    测试JQuery和JavaScript:
<br />
    
<label id="lbtestJs">sss</label>
    
</div>    
    
</form>
</body>

</html> 

结果

测试JQuery和JavaScript:

这个是Window.onload方法; 

posted @ 2011-03-02 15:28  阿 飞  阅读(680)  评论(0编辑  收藏  举报