JavaScript中的onload和jQuery中的ready()

JavaScript中的window.onload和jQuery中的$(documemt).ready()的区别

• 之前刚学JavaScript的时候，在<script>标签中的写法都是window.onload = function( ) { }。后来学习jQuery，接触到的写法基本就是$(document).ready(function( ) { })和$(function( ) { })。所以它们之间到底有什么区别呢？在这篇文章中进行一下总结

• 在jQuery中，我们经常会看到两种写法：$(document).ready(function( ) { })和$(function( ) { })。其实这两种写法的效果是一样的，都是在DOM文档树加载完成之后执行一个函数，要注意的一点是，其中的文档树加载完全并不代表全部的资源文件下载完毕

• 而window.onload则是在DOM文档以及所有资源文件加载完成后执行一个函数，也就是说，$(document).ready(function( ) { })会比window.onload先执行

• 因此总结下来，它们之间有以下几点区别：

  • 1、执行时间

    • window.onload必须等到页面内包括图片等其它资源的所有元素加载完毕后才能执行

    • $(document).ready(function( ) { })是DOM结构加载完毕后就可以执行，不必等到所有资源文件加载完毕

  • 2、编写个数

    • window.onload不能够同时写多个，如果有多个的话，则只会执行最后一个，它会把前面的覆盖掉

    • $(document).ready(function( ) { })可以编写多个，每一个都会执行

  • 3、简写方法

    • 在前面提到的$(function( ) { })其实就是$(document).ready(function( ) { })的简写，所以它们是等效的

    • window.onload没有简写形式