浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法。

在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。

1.执行时机 
      window.onload :必须在页面所有元素(包括图片,引用文件)加载完后执行。。 
      $(document).ready() :是页面中所有HTML DOM,CSS DOM结构加载完之后就会执行,其他图片可能没有加载完。

如果想要网页所有内容(包括图片等)加载完毕,再注册事件,使用$(window).load(function);等价于window.onload()。

2.编写个数不同

window.onload :不能同时写多个,后面的将会覆盖前面的。

$(document).ready() :可以同时编写多个,并且都可以得到执行。

3.简化写法

window.onload :无。

$(document).ready() :

$(document).ready(function(){
  //to do;
}); $().ready(function(){ //$()不带参数默认是document
  //to do;
}); $(function(){
  //to do;
});

最后附上一段在所有DOM元素加载之前执行的jQuery代码

<script type="text/javascript">
(function() {
alert("DOM还没加载哦!");
})(jQuery)
</script>

window.onload和$(docunment).ready的区别的更多相关文章

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

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

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

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

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

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

  4. 浏览器加载模式:window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

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

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

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

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

  7. window.onload与document.ready的区别

    1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...

  8. window.onload与$(document).ready()之区别

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

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

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

随机推荐

  1. CodeForces - 589B

    题目链接:https://vjudge.net/contest/242578#problem/B Dasha decided to bake a big and tasty layer cake. I ...

  2. GCD Guessing Game Gym - 100085G 猜数字 gcd

    http://codeforces.com/gym/100085/attachments 因为那个数字是一个质数,这样的猜的次数是最多的,所以至少是质数次. 但是如果需要猜2.3,那么可以直接猜6,也 ...

  3. 一次Zookeeper 扩展之殇

    一.背景 基于公司发展硬性需求,生产VM服务器要统一迁移到ZStack 虚拟化服务器.检查自己项目使用的服务器,其中zookeeper集群中招,所以需要进行迁移. 二.迁移计划 为了使迁移不对业务产生 ...

  4. mysql连接error,Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection .....

    完整error Establishing SSL connection without server's identity verification is not recommended. Accor ...

  5. js清除缓存以及jsp缓存[部分常用]

    参考: http://bbs.csdn.net/topics/330028896  浏览器缓存机制 http://www.docin.com/p-591569918.html  浏览器缓存的一些问题的 ...

  6. [转]ubuntu16.04安装teamviewer12依赖包解决

    安装teamviewer下载地址:http://www.teamviewer.com/en/download/linux/ 下载的是:teamviewer_12.0.76279_i386.deb   ...

  7. RxJava2 中多种取消订阅 dispose 的方法梳理( 源码分析 )

    Github 相关代码: Github地址 一直感觉 RxJava2 的取消订阅有点混乱, 这样也能取消, 那样也能取消, 没能系统起来的感觉就像掉进了盘丝洞, 迷乱… 下面说说这几种情况 几种取消的 ...

  8. 创建一个自己的GitHub,创建自己的开源项目

    作者是一个大学在读学生,自己在平时的学习中,GitHub上的开源项目给自己提供了很大的帮助.GitHub是目前使用最广泛的分布式项目管理软件,GitHub上面托管了许多非常优秀的开源项目.我觉得每一个 ...

  9. spring的struts简单介绍

    之前一段时间学习了springmvc+mybatis+spring框架,突然对之前的struts东西有点陌生, 所以这里简单记录下温故而知新的东西吧. 1.  首先建立一个Dynamic Web Pr ...

  10. Masonry 等间隔或等宽高排列多个控件

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...