jQuery - 加载页面 window.onload / $(document).ready(fn) / $().ready(fn) / $(fn)

在浏览器中加载页面后，会立即出发window对象的load事件，通常可以在window对象的load事件处理程序中完成一系列初始化操作，例如绑定其他DOM对象的事件处理程序等。

 

javascript可以使用以下3种方式来创建window对象的load时间处理程序。

// 基本事件模型，适用于各种浏览器，但只能绑定一个时间处理程序

window.onload = fnHandler;   

// IE事件模型，可以对同一事件绑定多个事件处理程序，但仅用于IE

window.attachEvent("onload",fnHandler); 

// DOM事件模型，可以对同一事件绑定多个事件处理程序，但不适用于IE

window.addEventlistener("load",fnHandler,true); 

 

为解决上述事件绑定方式存在的问题，jQuery提供了一个ready的事件处理方法，可以作为window.load事件注册事件处理程序的一种替代方法，即用来响应window对象的load事件并执行各种任务。 ready不仅具有浏览器兼容性，而且可以注册多个事件处理程序，并在加载页面后立即执行任务

 

.ready()方法用来注册一个函数，该函数在DOM加载就绪可以查询和处理时即可执行。

这里的DOM加载就绪，指HTML下载完毕并解析成DOM文档树，并不意味着所有相关文件都已经下载完毕

该方法有多重语法格式，常用格式如下         $(document).ready(fn)         - $(document): 表示基于document对象创建的一个jQuery对象，工厂函数$()中的参数也可以是window对象、其他DOM对象或jQuery选择器         - 参数fn: 是要在DOM完全就绪是执行的函数，可以是命名函数或匿名函数。         - ready()返回值：是一个jQuery对象。

$(document).ready( function(){   //这里是代码 })

也可以省略哦你过长函数$中的document参数，简写为以下形式 $( ).ready( function(){   //这里是代码 })

还可以将方法名称ready也省略掉，而直接将一个函数作为工厂函数$() 的参数。这种情况下，jQuery会在内部隐式的调用一次ready()方法。 $( function(){   //这里是代码 })

 

注意事项：

1. 如果在HTML代码的body元素的onload属性设置了事件处理程序，或者在jvascript脚本中window.onload设置了事件处理程序，则用$(document).ready()设置的事件处理程序将优先执行

2. 如果在页面中同时设置了body元素的onload属性和window对象的onload属性，则后者不会执行。

3. 应当在调用ready()脚本前包含所有的CSS样式表，以保证在执行jQuery代码前所有的元素属性都能被正确定义