前言
在开发 Web 应用程序时，我们经常会使用 jQuery 这个 JavaScript 库来处理文档操作和事件处理等任务。然而，在使用 jQuery 时，我们可以选择将脚本文件放置在页面顶部或底部，以及是否使用 document.ready 函数来确保 DOM 完全加载后执行代码。那么，如果我们将 jQuery 文件放在页面底部的外部 JS 中，是否需要使用 document.ready 函数呢？这是一个值得探讨的问题。
正文
页面加载与脚本执行的顺序
在了解为何要使用 document.ready 函数之前，我们需要先了解一下浏览器加载和执行页面资源的过程。
当浏览器请求一个页面时，它首先会下载 HTML 文件并开始构建 DOM 树。在此过程中，它还会发现其他资源，如 CSS、JavaScript 文件等，并开始下载它们。但是，请注意，只有在所有资源都下载完毕后，才会开始执行 JavaScript 代码。
因此，如果我们将 jQuery 文件放在页面底部的外部 JS 中，它将在 DOM 树构建完成后才会被下载，也就是说，它将在其他文件（如HTML、CSS、图像等）下载后才开始下载，然后才能开始执行。因此，如果我们在页面底部的外部 JS 中使用 jQuery，我们可以确保 DOM 元素已经存在，因为它们已经在文档中。但是，仍然需要注意的是，在脚本被执行之前，浏览器必须下载并解析完所有的 JS 文件，这可能会导致页面加载时间变长。
为什么要使用 document.ready 函数？
尽管页面底部的外部 JS 文件可以确保 DOM 元素已经存在，但是在处理 jQuery 代码时，我们仍然应该使用 document.ready 函数。这是因为当 jQuery 代码需要访问或修改 DOM 元素时，我们必须等待 DOM 完全加载完毕。如果没有等待，jQuery 将无法找到或修改 DOM 元素，从而导致代码出错。
因此，为了确保 jQuery 正常工作，我们应该将代码包装在 $(document).ready() 或 $().ready() 函数内。这些函数用于检查 DOM 是否已经准备好，并在 DOM 加载完成后运行代码。换句话说，当 DOM 元素可供使用时，document.ready 函数将执行我们的代码。
以下是一个示例，演示如何在页面底部的外部 JS 中使用 jQuery 和 document.ready 函数：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ---------- ------- ----------------------------------------------------------- ------- ------ ---- -------- --- ------- -------------------------- ------- -------
在该示例中，我们将 jQuery 文件放在 <head> 标签中，并将我们的主要 JavaScript 代码放置在 js/main.js 中。在 main.js 文件中，我们使用了 $(document).ready() 函数来确保 DOM 已经准备好后才运行代码：
$(document).ready(function() {
// 这里是我们的代码
console.log('DOM已经准备好，可以开始执行jQuery代码！');
});总结
虽然在页面底部的外部 JS 文件中使用 jQuery 不需要使用 document.ready 函数，但是当我们需要访问或修改 DOM 元素时，我们应该使用 $(document).ready() 或 $().ready() 函数。这些函数用于检查 DOM 是否已经准备好，并在 DOM 加载完成后运行我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11350
