浏览器在页面加载完毕后,JS通常使用window.onload方法为DOM元素添加事件,而jQuery使用的是$(document).ready()方法。两者功能相似,但也有细微差异,下面简要对比一下两者之间的区别。

window.onload与$(document).ready()对比
  window.load $(document).ready()
执行时机 必须等待网页中所有内容加载完毕后才能执行(包括图片等) 只要网页中的DOM结构绘制完毕就执行(与DOM相关的文件此时可能还未下载完毕)
使用情况

1.不能同时执行多个,若编写多个函数只执行最后一个(前面的被覆盖)。

window.onload = function() test1{

  alert("function1");};

window.onload = function() test2{

  alert("function2");}

最终输出结果为"function2"。

2.如果想实现多个函数的调用,可以创建一个新的函数来包含它们。

window.onload = function(){

  test1();

  test2();

}

1.能够同时编写多个函数,按注册顺序执行。

$(document).ready(function(){

  test1();

});

$(document).ready(function(){

  test2();

})

两次都输出。

2.如果想实现window.onload一样的功能,调用load()方法。

$(window).load(function(){

  //代码

})

简化  无

以下两种形式与$(document).ready()等价,但更简洁。

1.$().ready(function(){  //代码 });

2.$(function(){ //代码 });

  

  全文完,欢迎各位前辈批评指正。

window.onload和$(document).ready()比较的更多相关文章

  1. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

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

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  3. js常见执行方法window.onload = function (){},$(document).ready()

    1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...

  4. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

  5. window.onload与$(document).ready()的区别

    对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...

  6. window.onload与$(document).ready()区别

    2013-12-08 17:11:34 window.onload一次只能执行一个程序,而$(document).ready()可以按照先后顺序执行多个程序. eg: function one(){ ...

  7. JS ——window.onload与$(document).ready()

    我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的ready()方法.那么 ...

  8. 【jQuery】window.onload 和 $(document).ready() 的区别

    ... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...

  9. 菜鸟学JS(五)——window.onload与$(document).ready()

    我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ...

随机推荐

  1. 深入理解Tomcat虚拟文件夹

        我们知道,Web站点中的内容(包含网页,图片,音频文件等)一般都存放在App的文件夹下.但随着站点内容的不断丰富,用户须要把不同层次的内容组织成站点的子文件夹. 我们通常的做法是在站点主文件夹 ...

  2. 使用pycharm手动搭建python语言django开发环境(三) 使用django的apps应用 添加应用静态文件

    1)在django 工程目录中使用cmd命令行 敲入"python manage.py startapp app名称(例子为blog)" 2)在django工程目录中应该生成了bl ...

  3. vue的计算属性

    在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...

  4. C++注释规范

      1 源文件头部注释 列出:版权.作者.编写日期和描述. /************************************************* Copyright:bupt Auth ...

  5. spring 第一篇(1-2):管理你的beans

    在基于spring的应用中,你的应用对象存活在spring container(容器中).容器创建,将它们装配到一起.还有配置和管理它们完整的生命周期(从生到死) 下一章节,你会看到如何配置Sprin ...

  6. 虚拟机设置bios第一启动为u盘

    虚拟机可以用u盘启动吗?虚拟机如何设置u盘启动?今天u启动小编亲自为大家编写u启动制作的u盘启动盘在虚拟机中的进入u盘启动的教程: 总共三步骤:安装创建虚拟机和准备u启动u盘 - 虚拟机添加u盘设备  ...

  7. Servlet 国际化

    在我们开始之前,先来看看三个重要术语: 国际化(i18n):这意味着一个网站提供了不同版本的翻译成访问者的语言或国籍的内容. 本地化(l10n):这意味着向网站添加资源,以使其适应特定的地理或文化区域 ...

  8. 用VS2010进行CMAKE的时候“LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”

    由于要编译LTP,LTP在MINGW下又不能编译,所以忍痛安装了VS2010+CMAKE. 由于VS在本科时候虐我千百遍,所以一直心存阴影... 转入正题,当cmake的时候, 它提示 “LINK : ...

  9. linux 分卷压缩命令

    linux 分卷压缩命令 1.使用tar分卷压缩 格式 tar cvzf - filedir | split -d -b 50m - filename 样例: tar cvzf - ./picture ...

  10. 使用神器MobaXterm连接远程mysql和redis

    https://mobaxterm.mobatek.net/download-home-edition.html mysql redis 连接测试 mysql 127.0.0.1 3307 密码使用线 ...