document.ready和onload的区别——JavaScript文档加载完成事件

页面加载完成有两种事件
一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
 
用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
 
 
1.window.onload方法
 
⑴执行时机:
在网页中所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript 此时可以访问网页中的所有元素。
window.onload=function(){  $(window).load(function(){
//编写代码 等价于  //编写代码
}  });
 
⑵多次使用:
JavaScript的onload事件一次只能保存对一个函数的引用,他会自动用最后面的函数覆盖前面的函数。

function one(){

alert("one");

}

function two(){

alert("two");

}

window.onload=one;

window.onload=two;

//运行代码后只有 two

2.$(document).ready()方法
 
⑴执行时机:在DOM完全就绪时就可以被调用。(这并不意味着这些元素关联的文件都已经下载完毕)
举个例子:$(document).ready()方法明知要DOM就绪就可以操作了,不需要等待所有图片下载完毕。
 
⑵多次使用:

function one(){

alert("one");

}

function two(){

alert("two");

}

$(document).ready(function(){

one();

});

$(document).ready(function(){

two();

});

随机推荐

  1. url重写技术

    URL 重写是截取传入 Web 请求并自动将请求重定向到其他 URL 的过程.比如浏览器发来请求 hostname/101.aspx ,服务器自动将这个请求中定向为http://hostname/li ...

  2. convert转化成特定日期格式

    CONVERT() 函数可以用不同的格式显示日期/时间数据. CONVERT(data_type(length),data_to_be_converted,style) 例子: CONVERT(VAR ...

  3. C# 控件不刷新问题

    /********************************************************************** * C# 控件不刷新问题 * 说明: * 当网络连接出问 ...

  4. java基础篇-jar打包

    以helloworld程序为例: 一:正常流程: 1.首先编写一个hello.java的程序: public class Hello { public static void main(String[ ...

  5. editplus 常用快捷键汇总 大小写代码折叠

    文本类 新建普通文本:Ctrl+N新建浏览器窗口:Ctrl+Shift+B新建HTML页:Ctrl+Shift+N打开:Ctrl+O打开一个现有的文档文件结尾:Ctrl+End选区扩展到文档结尾处:C ...

  6. BAPI 使用

    BAPI_ACC_DOCUMENT_POST *---BAPI_ACC_DOCUMENT_POST 所需要的参数  DATA: OBJ_TYPE LIKE BAPIACHE09-OBJ_TYPE,   ...

  7. sqlserver 索引

    什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的速度,汉语字(词)典一般都有按拼音. ...

  8. Java 23种设计模式全解析

    转自:http://blog.csdn.net/longyulu/article/details/9159589

  9. 《Linux与Qt程序设计》知识框架

    本文主要是通过一本书来大致了解Qt开发的框架,不对具体内容做详细分析. 1.首先弄清楚概念:定义->以自己的话理解是什么-> 实现的是什么功能->用在哪些地方 2.前面认识到的知识点 ...

  10. Python 基础语法(四)

    Python 基础语法(四) --------------------------------------------接 Python 基础语法(三)------------------------- ...