window.onload 和 .ready()

Jquery$(document).ready()是什么意思?和window.onload的区别? 还有其他什么写法或者替代方法?

$(document).ready()的意思:

在DOM加载完之后执行一个函数(这里面的DOM加载完不代表全部文件加载完,例如图片文件,虽然图的src的地址加载好了,但是图本身还没到);

  • 有时候JavaScript写在了最前面,要操作一个DOM,可是下面的DOM还未生成完毕,就会报错,因为找不到,加$(document).ready()就是卡在 DOM加载完毕 ,剩余资源还未加载完成这段时间内,进行所有其它事件绑定及运行其它 jQuery 代码;

window.onload的区别:

  • 1.执行时间
    window.onload是在DOM加载完成 + DOM相关的文件下载完成 之后再执行一个函数
    $(document).ready()是在DOM加载完之后执行一个函数
    $(document).ready()要比window.onload先执行;有时候页面还没有完全加载完毕而用户已经在操作页面,在技术上很多情况下,只要DOM已完全加载好了,JS就可以运行去操作DOM了,没必要等到全部加载完成,所以用$(document).ready()来提前,但是当使用的JS依赖 CSS 属性值时,或者需要在元素被加载之后才能使用时(例如,取得图片的大小需要在图片被加载完后才能知道),就需要将这样的JS放到load事件中,以免因为贪图快而带来麻烦。
  • 2.能够添加的数量
    window.onload不能同时编写多个,因为我查看W3C的时候,window.onload是一种原生的DOM的事件,决定了在window上只能添加一个,后续的会覆盖掉前面的。
    $(document).ready()可以同时编写多个,我查看jQuery中文档,他是这么介绍的.ready()方法只能被匹配当前文档的jQuery对象调用,也就是说他是jQuery的方法,本质是一个函数,就可以执行多次。
  • 3.能否简写
    $(document).ready()可以简写
    window.onload 不能简写
    下面是$(document).ready()的简写
$(document).ready(handler)
$(handler)
$().ready(handler) //这种被不推荐
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,899评论 0 3
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 11,014评论 0 106
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,278评论 0 2
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,846评论 18 503
  • 第93天/56次 2017、5、29 觉察日记 事实:今天一家人总算是齐刷刷地去田子坊,我们一家三口很难凑齐,女儿...
    瓯姐姐阅读 1,328评论 0 0

友情链接更多精彩内容