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. 《MORE EFFECTIVE C++》条款20 条款21

    条款20 协助编译器实现返回值优化 当重载运算符的时候,比如+ - * / 这类运算符,该函数返回的值一定是个右值(即不能是引用),那么执行一次运算的开销可能会在临时对象上调用多次构造函数和析构函数, ...

  2. C++ QUICK REFERENCE

    C++ string 用法详解 字符串分割(C++)  C++ QUICK REFERENCE Matt Mahoney, mmahoney@cs.fit.edu DECLARATIONS enum ...

  3. jbrowse 的配置与使用gff, vcf, fa, bed, bam

    1,jbrowse 是什么东西 ? JBrowse is a genome browser with a fully dynamic AJAX interface, being developed a ...

  4. (实用篇)php处理单文件、多文件上传代码分享

    php处理  单文件.多文件上传实例代码,供大家参考,具体内容如下 后台处理文件submit_form_process.php <?php /************************** ...

  5. 如何让Visual Studio 清除最近打开项目 关闭上次未关闭的标签窗口

    删除最近打开的文件: 打开HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\9.0\FileMRUList 删除最近打开的项目: 打开HKEY_CUR ...

  6. css ul li 水平布局问题

    可以有俩种方法,暂时只用float:left:   找到每一个li进行水平浮动 #hd_nav li{ border-right: 1px solid rgba(255,255,255,0.2); f ...

  7. bootStrap-2

    全局样式: 1.移除Body的margin声明: 2.设置Body的背景色为白色: 3.为排版设置了基本的字体,字号和行高: 4.设置全局连接颜色,且当连接处于悬浮:hover状态时,才会显示下划线样 ...

  8. 《C标准库》——之<ctype.h>

    在没读<ctype.h>的源码之前,我一直以为我们平时用的isalnum.isdigit.isalpha等这些函数,是靠判断写出来的. 比如: int isdigit(int c){ re ...

  9. sgu259 Printed PR    贪心

    link:http://acm.sgu.ru/problem.php?contest=0&problem=259 思路就是贪心. 首先要读懂题目,输入的方式,把样例读懂. 第一,打印的总时间一 ...

  10. 重学OpenGL(一)----工具篇

    最近想开发一个小工具,需要用到3D,果断上OpenGL,借这个过程把OpenGL重学一遍. 工欲善其事,必先利其器,先把工具都搞好. [开发语言] 果断C+OpenGL,不解释. [开发环境] Min ...