码迷,mamicode.com
首页 > 编程语言 > 详细

jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

时间:2016-05-07 13:14:41      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

body中的onload()window.onload以及$(document).ready()的区别:

1、前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中都兼容,而$(document).ready()表示的是JQuery中的一个方法因而只有在支持jQuery的浏览器中才适用,同时该方法是在当页面的dom节点加载完毕后就执行,无需等待页面中的图片等加载完成。

2、当代码中同时存在body中的onload()window.onload()要注意的 :

  a、当JS代码在head中时且window.onload()中方法是匿名时:将会跳过window中的方法。

      <html>   

      <head>   

       <script type="text/javascript"> alert(‘a‘);  

       window.onload=function () {  

       alert(‘b‘);  

         } ;

      alert(‘c‘);

      </script>   

    </head>   

   <body onload="alert(‘d‘);">  

   </body>   

   </html>  

 上面的代码中执行的结果是:a,c,d

 

  b、当JS代码在head中同时window.onload()中方法不是匿名时,这时会对浏览器的不同有差异,在IE8以及IE8以下的版本中会顺序执行JS代码到window.onload()但其后面的将不会被执行(除了定义的方法在其他地方被调用的外),而在IE8以上以及chrome等浏览器中都将会被执行。

      <html>   

      <head>   

      <script type="text/javascript"> alert(‘a‘);  

      window.onload=fn();

      function fn() {  

      alert(‘b‘);  

      } ;

     alert(‘c‘);  

     </script>   

   </head>  

   <body onload="alert(‘d‘);">  

   </body>   

  </html>  

 由上知当在IE8以及以下的版本中的执行结果为:abd,在其他浏览器中的执行结果为:

a,b,c,d

 

 

   c、当JS代码在body中时同时window.onload()中的方法不是匿名的时:

       <html>   

      <head>   

      </head>     

      <body onload="alert(‘a‘);">  

      <script type="text/javascript"> alert(‘b‘);  

     window.onload=fn();

     function fn () {  

    alert(‘c‘);  

    } ;

    alert(‘d‘);  

    </script>  

   </body>   

   </html>

  上述代码在IE8以及以下版本中的执行结果为:b,c,a在其他浏览器中的执行结果为:b,c,d

 

  d、当JS代码中body中同时window,onload()中的方法是匿名函数时:

        <html>   

      <head>   

      </head>   

     <body onload="alert(‘a‘);">  

     <script type="text/javascript"> alert(‘b‘);  

    window.onload=function  () {  

    alert(‘c‘);  

     } ;

    alert(‘d‘);  

    </script>  

   </body>   

  </html>  

   上述代码的执行结果为:b,c,d

JS代码放在body和放在head中的结果不一样这是和文档的加载顺序相关的。

jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

标签:

原文地址:http://www.cnblogs.com/heshan1992/p/5467988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!