window.onload与$(document).ready()差异对比

2020-05-0814:18:53WEB前端开发Comments2,642 views字数 705阅读模式

一,执行时机
window.onload():在页面所有元素(包括图片,引用文件)加载完后执行。
$(document).ready():页面中所有HTML DOM,CSS DOM结构加载完之后就会执行,其他图片文件可能没有加载完。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

二,编写个数
window.onload(): 不能同时写多个,后面的将会覆盖前面的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

window.onload=function(){ 
    alert("A"); 
}
window.onload=function(){ 
    alert("B"); 
}

结果会执行“B”,如果想要顺序执行alert("A")和alert("B")需写成:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

window.onload=function(){
    alert("A");
    alert("B");
}

$(document).ready(): 可以同时写多个,以下代码正确执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

$(document).ready(function (){
   alert("Hello World!"); 
});
$(document).ready(function (){
   alert("Helllo World!"); 
});

三,简写方法
window.onload(): 无简写,但有相关写法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

$(window).load(function () {
});
// 等价于
window.onload = function () {
};

$(document).ready(): 有简写文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

$(document).ready(function(){
  //to do;
});

可写成文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

$().ready(function(){   //$()不带参数默认是document
  //to do;
});

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html

$(function(){
  //to do;
});
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18648.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/18648.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定