zoukankan      html  css  js  c++  java
  • window.onload和$(document).ready()的区别

    首先概念上分清楚这二者:其实从名称上就能很好的区分

    (1)window对象是javascript的BOM对象(表示浏览器窗口,通俗的讲就是你当前访问的这个网页),所以window.onload表示的就是当前浏览器窗口(包括当前html网页上的所有资源:dom树、图片等)加载完成后,接下来才会执行里面写的js代码;

    (2)document对象是javascript的DOM对象(表示文档对象模型,通俗的讲就是你当前访问的这个网页的整个dom树结构),所以$(document).ready()表示的就是当前html网页上的dom树加载完成后,接下来才会执行里面的js代码。

    <script type="text/javascript">
        //javascript源生js代码的入口函数的写法
        window.onload = function(){
            alert(1);
        }
        //jquery的js代码入口函数的写法($符号其实表示的就是jQuery这个对象,可以理解为给jQuery对象起了个别名,
        //像我们调用的$.post()、$.ajax()…等方法其实都是jQuery对象的方法)
        $(document).ready(function(){
            alert(2);
        })
    </script>

    所以上面两个哪个先执行,也就不言而喻了。虽然alert(2)是写在alert(1)后面的,但是dom树加载完成肯定是先于整个网页加载完成的。

    下面再列下面试时谈这两个的区别时的几个小细节

    (1)执行时机不同

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

    (2)可以写的个数不同

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

    (3)简化写法

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

    最后再说下可能会遇到的一种情况,当我们在页面中使用了$(document).ready(function(){}),当页面dom树加载完成后,function中的代码就会被执行,一般来说大部分情况都是没有问题的。

    但是若有些时候,必须要等所有的元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者其他什么还没有加载好,这个时候,点击某些按钮,会导致页面出现某些意料之外的

    情况,load方法应该可以解决这个问题,不过没什么例子,以后有机会再补充。

  • 相关阅读:
    括号匹配问题:判断括号式子是否匹配。如{[()]}是匹配的,而{[[])}是不匹配的。
    回文判断的两种方法
    将A链表中的奇数元素与偶数元素拆成两个链表A和B,A中是奇数元素,B是偶数元素。要求拆除后保持链表元素原来的相对位置
    修改kail linux的IP地址等网络信息
    VXDIAG SUBARU SSM III错误许可解决方案
    Mini ACDP更新CAS3数据提示和指南
    thinkphp框架中find()和select()的区别
    PHP中=>和->以及::的用法
    Golang 开发规范(JD )
    JD MySQL数据库开发规范(绝密,企业级开发中Mysql规范)
  • 原文地址:https://www.cnblogs.com/gongchengshixiaobai/p/7891681.html
Copyright © 2011-2022 走看看