$(document).ready() 函数详解
在深入了解 $(document).ready() 函数之前，我们先了解一下 HTML 和 JavaScript 的加载过程。当浏览器加载一个 HTML 页面时，它会逐行解析 HTML 代码并渲染页面。在解析过程中，如果遇到 <script> 标签，浏览器会立即下载并执行 JavaScript 代码，这可能会导致 JavaScript 代码在页面元素完全加载之前运行。这就会导致一些问题，例如尝试在页面上操作尚未加载的元素，或者尝试在元素尚不存在时绑定事件。
为了解决这些问题，jQuery 提供了 $(document).ready() 函数，它允许我们在文档完全加载后再执行 JavaScript 代码。下面我们详细分析一下这个函数。
1. $(document).ready() 函数是什么？
$(document).ready() 是 jQuery 提供的一个函数，用于在 DOM 加载完毕后执行 JavaScript 代码。它的作用是确保在文档完全加载后再执行代码，以便能够正确地操作页面元素。
2. 为什么要用 $(document).ready() 函数？
在开发 Web 应用时，我们经常需要在页面加载完成后执行一些 JavaScript 操作，例如操作 DOM 元素、绑定事件、执行动画等。如果我们直接将 JavaScript 代码放在 <script> 标签中，可能会导致代码在页面元素加载完成之前就执行，从而导致操作失败或产生意料之外的结果。
$(document).ready() 函数的出现就是为了解决这个问题。通过使用该函数，我们可以确保 JavaScript 代码在页面完全加载后再执行，避免了因为元素尚未加载完成而导致的问题。
3. 示例代码
下面是一个使用 $(document).ready() 函数的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using $(document).ready()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content">This is the content</div>
<script>
$(document).ready(function() {
// 在文档加载完成后修改内容
$('#content').text('Content has been changed');
});
</script>
</body>
</html>
在上面的示例中，我们使用 $(document).ready() 函数包裹了一个函数，在函数内部修改了 id 为 content 的元素的文本内容。这样，在页面加载完成后，jQuery 会自动执行这个函数，确保修改操作在页面元素完全加载后执行。
4. 总结
$(document).ready() 函数是 jQuery 提供的一个重要工具，用于确保 JavaScript 代码在页面完全加载后再执行。通过使用这个函数，我们可以避免因为页面元素尚未加载完成而导致的操作失败或意料之外的结果。在开发 Web 应用时，建议始终使用 $(document).ready() 函数来执行页面加载完成后的 JavaScript 操作，以确保代码的正确执行。
