5.4　更多的jQuery事件概念

由于事件是为Web页面增加交互性的至关重要的部分，因此jQuery包含了一些特殊的jQuery专用函数，它们使得编程更容易而页面也更具有响应性。

5.4.1　等待HTML载入

当页面载入的时候，Web浏览器立即尝试运行它所遇到的任何脚本。因此，在页面头部的脚本可能会在页面完全载入之前运行，在3.5节的一个简单测试教程中看到了这一点。遗憾的是，这种现象常常引发问题。由于很多JavaScript程序涉及操作Web页面的内容，例如，当单击一个特定链接的时候显示一条弹出消息、隐藏特定页面元素、为一个表格的行添加条纹等。如果程序试图操作页面中的还没有被浏览器载入和显示的那些元素，最终会得到JavaScript错误。

处理这一问题最常见的方式是：在执行任何JavaScript之前，load事件等待直到页面完全下载。遗憾的是，在运行JavaScript代码之前等待页面完全载入，这可能会产生一些真正奇怪的结果。只有在一个Web页面的所有内容都已经下载之后，这意味着所有的图像、电影、外部样式表等都已经下载之后，才触发load事件。因此，在带有很多图形的页面上，在运行任何JavaScript之前载入图像的时候，访问者可能真的要盯着页面几秒钟的时间。如果JavaScript对于页面做了很多改变，例如，样式化表格行，隐藏当前的可视化菜单，或者甚至控制页面的布局，访问者每次浏览页面会突然看到页面变化。

幸运的是，jQuery充当了救星。jQuery有一个名为ready（）的函数，它等待直到HTML已经载入浏览器之后才运行页面的脚本，而不是依赖load事件来触发一个JavaScript程序。通过这种方法，JavaScript可以立即操作Web页面，而不用等待图像或视频缓慢载入（这实际上是一个复杂而有用的功能，这也是使用JavaScript库的另一个原因）。

我们已经在本书的一些教程中使用了ready（）函数。ready（）函数的基本结构如下所示：

$（document）.ready（function（）{

//your code goes here

}）；

基本上，所有的程序代码都放入这个函数中。实际上，ready（）函数如此基础，我们可能在使用jQuery的每个页面上都包含它。只需要包含它一次，并且它通常是脚本的第一行和脚本的最后一行。必须将其放置在一对开始的和结束的＜script＞标签中（毕竟这是JavaScript程序），并且将其放置于将jQuery添加到页面的＜script＞标签之后。

因此，在一个完整的Web页面的环境中，该函数看上去如下所示：

＜！DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http：//www.w3.org/TR/

html4/strict.dtd"＞

＜html＞

＜head＞

＜meta http-equiv="Content-Type"content="text/html；charset=UTF-8"＞

＜title＞Page Title＜/title＞

＜script type="text/javascript"src="js/jquery.js"＞＜/script＞

＜script type="text/javascript"＞

$（document）.ready（function（）{

//all of your JavaScript goes in here.

}）；//end of ready（）function

＜/script＞

＜/head＞

＜body＞

The web page content……

＜/body＞

＜/html＞

提示：由于ready（）函数几乎在添加了jQuery的页面中会随时用到，有一种简写方式来表示它。可以删除$（document）.ready部分，只是写作：

$（function（）{

//do something on document ready

}）；