13-讨论

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

1.2.3　讨论

jQuery用 ready() 事件处理程序方法来代替JavaScript核心的 window.onload 事件。可以根据需要多次使用它。使用这个定制事件时，建议将它放在样式表声明和包含文件之后，这样能够确保 ready() 事件执行任何jQuery或JavaScript代码之前，所有元素属性都已经正确定义。

此外，jQuery函数本身提供使用jQuery定制的 ready 事件的快捷方式。使用这个快捷方式，下面的 alert() 示例可以改写为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
　　jQuery(function(){ //DOM未加载,必须使用就绪事件
　　　　alert(jQuery('p').text());
　　});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

这个定制的jQuery事件只有在JavaScript必须嵌入到页面顶端的文档流并封装在 <head> 元素里时才有必要。我只需将所有JavaScript文件包含和内联代码放在 <body> 结束元素之前，就能避免使用 ready() 事件，这么做有两个原因。

首先，现代优化技术已经断言，当JavaScript放在页面解析的最后由浏览器加载时，页面的加载就会变得更快。换句话说，如果你将JavaScript放在网页的最后，浏览器将先加载之前的所有内容，然后才加载JavaScript，这是一件好事，因为大部分浏览器通常会暂停其他加载活动，等待JavaScipt引擎编译网页中包含的JavaScipt。从某种程度上说，将JavaScript放在网页文档的开头会形成瓶颈。我知道某些情况下将JavaScript放在 <head> 元素中更加简单，但坦诚说，我从未发现绝对必须这么做的情况。我在开发中因为将JavaScript放在页面最后而造成的所有困难都很容易克服，比起得到的优化效果，这些努力也都是值得的。

其次，如果提高网页的速度是我们的目标，为什么要为简单地将代码放到页面最后就能解决的问题而加入更多的功能呢？如果让我在较多代码和较少代码之间做出选择，我选择使用较少的代码。不使用 ready() 事件减少了代码量，而代码越少，网页运行得总是越快。

基于这些理由，在下面这个例子中， alert() 代码没有使用 ready() 事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>The DOM is ready!</p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
　　　alert(jQuery('p').text());//提示DOM已经加载
</script>
</body>
</html>

注意，我已经将所有的JavaScript放在 <body> 结束元素之前。HTML文档中的任何其他标记应该都在JavaScript之前。

Previous 上一篇本节目录 Next 下一篇

13-讨论

1.2.3 讨论

1.2.3　讨论