js中window.onload和jq中read函数区别

一、JS中的window.onload

1.使用

该方法用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法。通常用于元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

2.语法

//当只有一个要执行的函数时window.onload=fn//页面加载完毕后fn方法会被调用

//有多个要执行的函数时window.onload=function(){fn1()fn2()fn3()}//页面加载完毕后依次执行fn1、fn2、fn3

3.为什么要使用window.onload

JavaScript中的函数方法需要在HTML文档渲染完毕之后才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样在调用一些JavaScript代码时就可能报“undefined”错误。

例如：

            #bg{    width:120px;    height:120px;    border:4px solid blue;}document.getElementById("bg").style.backgroundColor="#F00";    
//代码会抛出错误：Uncaught TypeError:Cannot read property 'style' of null//代码是顺序执行的，当执行到js里的语句时，还没有加载div对象//使用window.onload就可以正常运行

window.onload事件绑定事件处理函数，绑定的是一个匿名函数，也可以是一个具名函数。

二、jQuery 中的$(document).ready()

1.使用

        当DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生ready事件。
由于该事件在文档就绪后发生，因此把所有其他的jQuery事件和函数置于该事件中是非常好的做法。
ready()函数规定当ready事件发生时执行的代码。
ready()函数仅能用于当前文档，因此无需选择器。

2.语法

//允许一下三种语法 function 是必需的，规定当文档加载后要运行的函数$(document).ready(function(){})$().ready(function(){})$(function)

三、区别

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。
$(documrnt).ready()可以同时编写多个，并且都可以得到执行。

3.多个的执行结果
window.onload不能同时写多个，但是有多个时会执行，只是后执行的会将前一次执行的结果覆盖。
$(doucment).ready()可以有多个，并且执行后不会被覆盖。

4.简化写法
window.onload没有简化写法
$ (document).ready(function(){})可以简写成$ (function(){})
 

四、注意

1.ready()函数不应与一起使用。
2.$ (function(){})在window.onload执行前执行的，$(function(){})类似于原生 js 中的DOMContentLoaded事件。

五、DOM文档加载步骤

1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

热点资讯