当前位置:Web前端 > javascript> 正文

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

时间:2013-12-24类别:Web前端

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

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

window.onload


当一个文档完全下载到浏览器中时,会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的,这种情况对编写功能性的代码非常有利,因为无需考虑加载的次序。

他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。



$(document).ready()


通过 $(document).ready() 注册的事件处理程序,则会在 DOM 完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,缺不意味着所有关联的文件都已经下载完毕。换句话说,当 HTML 下载完成并解析为 DOM 树之后,代码就可以运行。
 

他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

 

 

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

1.执行时间

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

2.编写个数不同

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

3.简化写法

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

 

测试例子

  •  
  • HTML 代码   复制
  • 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>测试JQuery</title>
            <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">
        <li>
        测试JQuery和JavaScript:<br />
        <label id="lbtestJs">sss</label>
        </li>    
        </form>
    </body>
    </html>
    
    		
  •  

    上一篇下一篇

    猜您喜欢

    热门推荐