学习中,遇到了两个方法,在此学习区分一下。
结论:
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
window.onload
load事件通常用于检测文档内容或者图片是否加载完毕。
网页中某些JavaScript脚本代码往往需要在文档加载完成之后才能够去执行,否则可能导致无法获取对象的情况,为了避免类似情况的发生,可以使用以下两种方式:
(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。
(2).通过window.onload来执行脚本代码。
window.onload是一个事件,当文档内容完全加载完成会触发该事件。
可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。
为window.onload事件绑定事件处理函数。
绑定匿名函数
window.onload=function(){
document.getElementById("bg").style.backgroundColor="#F90";
}
绑定具名函数
window.onload=function myalert(){
alert("绑定成功!");
}
注意:不能绑定多个事件处理函数,最后一个会覆盖所有函数。
window.onload=function a(){}
window.onload=function b(){}
document.ready
在文档加载后激活函数
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
定义和用法:当DOM已经加载,并且页面(包括图像)已经完全呈现时会发生ready事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档,因此无需选择器。
允许使用以下三种语法:
语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
不同点:
1、执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2、编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
window.onload = function(){
alert("text1");
};
window.onload= fuction(){
alert("text2");
};
结果只能输出第二个,不能输出第一个,第一个被第二个覆盖。
$(document).ready(function(){
alert("text1");
};
$(document).readyfuction(){
alert("text2");
};
两个都能正确输出。