jquery之文档就绪处理程序

jquery之文档就绪处理程序

----------

传统上，window实例的onload处理程序是在整个页面完全加载之后执行语句。该语法通常类似于：

window.onload = function(){ $('table tr:nth-child(event)').addClass("even"); } 

 

这样就能在文档完整地加载之后，执行代码。不幸的是，浏览器延迟执行onload代码，不仅是在构建DOM树之后，也是在所有图像和其他外部资源完整地加载并且页面在浏览器窗口显示完毕之后。结果是访问者会经历从看到页面时刻到onload脚本执行时刻之间的延迟。更糟糕的是，如果图像或其他资源要花好一段时间去加载，访问者在页面丰富的行为变得可用之前，就不得不等待图像加载完毕。

更好的解决办法就是，只要等到文档结构被完整地解析，同时浏览器已经把HTML转换成DOM树形式的时候，就立刻执行脚本使丰富的行为生效。以跨浏览器方式来实现这一点稍显困难，然而juery提供了简单的方式：

一旦DOM树(而不是外部图像资源)加载完毕，就去激活代码的执行。定义这样的代码的正式语法如下：

$(document).ready(function(){ $('table tr:nth-child(even)').addClass("even"); }); 

 

首先，用$()即jquery()函数来包装文档实例，然后调用read()方法，给其传递一个函数。当文档为操作准备就绪的时候，就去执行该函数。

称之为正式语法是有理由的，因为用得频繁得多的简写方式，如下：

$(function(){ $('table tr:nth-child(even)').addClass("even"); }); 

通过传递函数给$()，我们命令浏览器在执行代码前必须等待，直到DOM加载完毕(但仅仅是DOM)。更好的是，可以在同一个HTML文档中多次使用此技巧，并且浏览器按照函数在页面中定义的先后顺序，一一执行指定的函数。与此不同window的onload机制只接受一个函数。