浏览器在页面加载完毕后,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. linux-c 调试 gdb

    GDB(GNU Debugger) gcc -g –o testarg testarg.c //可执行文件中带上调试信息,用于后续的gdb调试 gdb testarg l; list //显示源程序 ...

  2. Spark学习(一) 基本操作

    先来一个简单的spark小程序,这是官网上的小样例,目的就是统计spark以下的README文档中包括字母a和字母b的个数,然后 打印,代码例如以下: object BasicStandaloneAp ...

  3. QT学习二:工具栏

    QT  的工具栏提供 Dock 功能.文字/图标显示排列的功能. void MainWindow::createToolBar(void) { QToolBar *toolBar = new QToo ...

  4. 一个页面弄懂 CSS 样式选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. mysql数据库记录

    ON DELETE restrict(约束):当在父表(即外键的来源表)中删除对应记录时,首先检查该记录是否有对应外键,如果有则不允许删除. no action:意思同restrict.即如果存在从数 ...

  6. 当synchronized关键字和this关键字

    package cn.itcast_01_mythread.thread.testThread; public class MyThreadWithImpliment_Synch_method imp ...

  7. 常用校验算法CRC、MD5、SHA_转

    1.算法概述 数据摘要算法是密码学算法中非常重要的一个分支,它通过对所有数据提取指纹信息以实现数据签名.数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密.数据摘要算法也被称为哈希(H ...

  8. CDH-5.12.2安装教程

    CDH是Cloudera公司提供的Hadoop发行版,它在原生开源的Apache Hadoop基础之上,针对特定版本的Hadoop以及Hadoop相关的软件,如Zookeeper.HBase.Flum ...

  9. 这是一篇markdown测试博客

    欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...

  10. 浅谈push推送的一点感受

    在手机已成为生活必不可分的一部分,push服务伴随而来.ios的apns,android随着谷歌退出中国市场,各家在android的推送不断展开.有厂商的推送,如小米.华为.魅族.oppo等,还有中间 ...