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

      负责后台的同事反馈过来一个问题,他添加的一个js效果在我做的模板上出不了效果。我过去看了他添加的js,代码中有段window.onload方法,而模板中js也是用window.onload执行的,我猜想可能是两个方法有冲突。经过测试确实是二者冲突,于是把其中一个改为$(document).ready()方法执行,于是问题解决。

      但是对于window.onload和$(document).ready()二者的异同,一直不是很清楚,今天查资料认真看了下,把它记录在此。

      window.onload和$(document).ready()主要有两点区别:

      1、执行时机
      window.onload方法是在网页中的所有的元素(包括元素的所有关联文件)都完全加载到浏览器之后才执行。而通过jQuery中 的$(document).ready()方法注册的事件处理程序,只要在DOM完全就绪时,就可以调用了,比如一张图片只要<img>标签 完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等。

      ——其实从二者的英文字母可以大概理解上面的话,onload即加载完成,ready即DOM准备就绪。

      2、注册事件 

      $(document).ready()方法可以多次使用而注册不同的事件处理程序,而window.onload一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。

      例如:

      先看window.onload方法在一个页面保存两次对函数的引用

    function one(){
        alert("one");
    }
    function two(){
        alert("two");
    }
    window.onload = two ;
    window.onload = one ;

      运行代码后,弹出“one”,说明第一个函数的引用被第二个函数引用覆盖。

      再看看$(document).ready()方法注册两个事件处理程序  

    function one(){
        alert("one");
    }
    function two(){
        alert("two");
    }
    $(document).ready(function(){
        one();
    });
    $(document).ready(function(){
        two();
    });

      运行代码,先弹出“one”,再弹出“two”,两个事件处理程序按顺序执行

  • 相关阅读:
    ESFramework介绍之(32)―― Tcp客户端核心组件关系图
    Java -- 在Eclipse上使用XFire开发WebService
    DTS开发记录(1)--系统总体结构
    ESFramewor使用技巧(3) -- 在插件中使用Spring.net
    DTS开发记录(序)
    给关注ESFramework的朋友们 2006.06.25
    ESFramework介绍之(34)―― ITcpServerAgent和IUdpServerAgent组件关系图
    Java -- 在Eclipse上使用Hibernate
    【C#2.0】点滴(不断补充中......)
    Java -- 在Eclipse上使用Spring
  • 原文地址:https://www.cnblogs.com/cuixi/p/3351329.html
Copyright © 2011-2022 走看看