document.ready和onload的区别

本文详细解释了在网页开发中,DOM加载完成后的两种主要事件处理方式:window.onload与$(document).ready()的区别及应用场景。前者在页面所有元素及其关联文件加载完毕后触发,而后者仅需DOM完全就绪即可执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$(function(){ // });他等价于 $(document).ready(function(){ // })  
还有这样         
$().ready(function(){ // })
jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况页面响应加载的顺序是:域名解析-加载html-加载js和css---+(Dom Ready)+--加载图片等其他信息。
那么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();

});

//运行代码后

//先是:one

//先是:two

转载于:https://www.cnblogs.com/thomasbc/p/6607168.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值