浏览器加载完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. 关于Spring @RequestBody 自动映射模型原理

    关于Spring @RequestBody 自动映射模型 2016年10月18日 22:17:12 稻子丶 阅读数:5049   在很多时候,Spring的注解为我们提供了很多方便,但只知道其用法,不 ...

  2. 03.Spring IoC 容器 - 初始化

    基本概念 Spring IoC 容器的初始化过程在监听器 ContextLoaderListener 类中定义. 具体由该类的的 configureAndRefreshWebApplicationCo ...

  3. 033 Search in Rotated Sorted Array 搜索旋转排序数组

    假设按照升序排序的数组在预先未知的某个关键点上旋转.(即 0 1 2 4 5 6 7 将变成 4 5 6 7 0 1 2).给你一个目标值来搜索,如果数组中存在这个数则返回它的索引,否则返回 -1.你 ...

  4. ElasticSearch 全文检索— ElasticSearch 核心概念

    ElasticSearch核心概念-Cluster 1)代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的.es的一个概念就是去中心化,字 ...

  5. vs2017通过模块文件添加自定义注释

    有时我们在VS里建立类和接口时,需要添加比较规范的注释信息,而每次都要复制粘贴比较麻烦,所以需要我们的IDE做一些支持,比较修改VS里自定义的注释模式,以添加自己公司需要的信息格式. 注释比较规范,是 ...

  6. java 多线程 Callable中的futrue模式

    java实现Callable接口中用到了future模式,所以实现了这个接口就看到了有返回值,那它的基本原理是什么鬼,往下看. 何为future模式? future模式有点类似于商品订单.在网上购物时 ...

  7. 合理设置apache httpd的最大连接数--linux

    手头有一个网站在线人数增多,访问时很慢.初步认为是服务器资源不足了,但经反复测试,一旦连接上,不断点击同一个页面上不同的链接,都能迅速打开,这种现象就是说明apache最大连接数已经满了,新的访客只能 ...

  8. SQLServer数据库语句大全汇总

    目录清单CONTEXT LIST1.数据库DataBase 1.1数据库建立/删除create/drop database 1.2数据库备份与恢复backup/restore database2.数据 ...

  9. java CountDownLatch 等待多线程完成

    CountDownLatch允许一个或多个线程等待其他线程完成操作. package com.test; import java.util.concurrent.CountDownLatch; pub ...

  10. IE6、7下块级元素设置display:inline-block不换行的解决办法

    使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和 ...