jqueryready方法(jquery ready onload)
怎样用原生JS实现jQuery的ready方法
function?ready(fn){
????if(document.addEventListener)?{
????????document.addEventListener('DOMContentLoaded',?function()?{
????????????//注销事件,?避免反复触发
????????????document.removeEventListener('DOMContentLoaded',arguments.callee,?false);
????????????fn();????????????//执行函数
????????},?false);
????}else?if(document.attachEvent)?{????????//IE
????????document.attachEvent('onreadystatechange',?function()?{
????????????if(document.readyState?==?'complete')?{
????????????????document.detachEvent('onreadystatechange',?arguments.callee);
????????????????fn();????????//函数执行
????????????}
????????});
????}
};
相关知识
浏览器加载页面的顺序：
解析HTML结构
加载外部脚本和样式表文件
解析并执行脚本代码
构造HTML DOM模型==ready()
加载图片等组件
页面加载完毕==onload()
ready事件是在DOM模型构造完毕时触发
load事件是在页面加载完毕后触发
jQuery事件详解之$(document).ready()
在页面加载结束后，浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload 方法;在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。
那么它和window.onload有何不同呢？
window.onload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。
而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用，此时对于jQuery来说都是可以被访问的（关联的资源可能并没有被加载完毕）。
举个例子来说，在$(document).ready()中定义了图片的宽高，但由于此时图片还没有被加载完毕，此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。
load()方法会在元素的onload事件中绑定一个处理函数，如果该处理函数绑定给window对象，则会在所有资源加载完毕后触发，如果load绑定在元素上则会在该元素加载完毕后触发。
既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢？
window.onload事件 每次只能保存对一个函数的引用 ，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要window.onload方法就导致编码复杂。
使用$(document).ready()方法能够很好地解决这种问题，每次调用$document.ready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。
jQuery中的事件在ready()方法里面和外面的区别
有区别.
ready()方法意思是等整个页面的DOM树解析完毕执行.
而直接绑定方法是页面流从上往下解析到当前位置时执行. 这个时候不一定DOM加载完毕, 所以很可能出错.
而放在ready方法里面,就不会出错!
参考：