30、jQuery 与 DOM 操作全解析

jQuery 与 DOM 操作全解析

1. 使用 $(document).ready() 智能启动脚本

在创建网页时，有时我们希望 JavaScript 根据从服务器接收的数据，或者基于用户浏览器或屏幕的某些特性来操作页面。我们期望这些操作在浏览器读取完页面的 HTML 后立即执行，这意味着 DOM 已加载到浏览器中，这样就不会尝试去更改浏览器还未识别的元素。

W3C DOM 提供了 DOMContentLoaded 事件来实现这一功能，但旧版本的 Internet Explorer 直到版本 9 才支持该事件。因此，jQuery 提供了 $(document).ready() 方法，它能让我们在文档/DOM “就绪” 时立即运行代码。

例如，将之前的示例改写为使用 $(document).ready() 的形式如下（ch11_eg04.js）：

$(document).ready( function() {
  $( "#greeting" ).text( "It's time to learn about jQuery" );
});

这里的关键区别在于，我们要运行的代码被包裹在一个匿名函数中。这意味着我们想要执行的任何语句都被封装在这个匿名函数里，它们将在 $(document).ready() 事件触发时执行。如果不这样做，而是像下面这样直接将 jQuery 语句放在 $(document).ready()