页面加载完之后执行的方法——jQuery中的ready事件

在网页开发中，有时候我们需要确保在页面的DOM（文档对象模型）完全加载完成后再执行一些操作，比如绑定事件、修改DOM元素等。而jQuery提供了一个非常方便的方法来实现这个功能，那就是ready事件。

ready事件是jQuery中的一个特殊事件，它会在整个页面的DOM加载完成后触发，而不需要等待其他资源的加载（比如图片、样式表等）。这意味着我们可以在页面加载完成后立即执行一些JavaScript代码。

ready事件的基本用法

在jQuery中，我们可以通过以下两种方式来绑定ready事件：

方式一：使用ready方法

$(document).ready(function() {
    // 在这里编写需要在页面加载完后执行的代码
});

上面的代码中，我们使用了$(document).ready()方法来绑定ready事件的处理程序。当页面的DOM加载完成后，传入的匿名函数就会被执行。

方式二：使用简化的语法

$(function() {
    // 在这里编写需要在页面加载完后执行的代码
});

这种方式是上面方式的简化写法，同样可以实现在页面加载完成后执行代码的效果。

无论是哪种方式，我们都可以在匿名函数中编写需要在页面加载完成后执行的代码。比如，我们可以修改页面中某个元素的内容：

$(function() {
    $("#myElement").text("页面加载完成！");
});

上面的代码中，我们使用了jQuery的选择器语法来选择id为myElement的元素，并使用text()方法将其内容修改为"页面加载完成！"。

ready事件的执行时机

ready事件在页面加载完成后触发，但它并不等价于页面的onload事件。ready事件在以下两种情况下会触发：

  1. 当整个页面的DOM结构加载完后；
  2. 当使用jQuery的$.ajax()或$.getScript()等异步加载数据的方法加载完成后。

在上述两种情况下，ready事件都会在页面的onload事件之前触发。这意味着，在ready事件中执行的代码会比onload事件更早执行。

ready事件的优点

使用ready事件有以下几个优点：

1. 立即执行

ready事件会在页面的DOM加载完成后立即触发，而不需要等待其他资源的加载。这样可以确保我们的代码在需要的时候立即执行，而不需要等待整个页面加载完毕。

2. 可以多次绑定

我们可以在页面中的任意位置多次绑定ready事件，而不会覆盖之前的绑定。这样我们就可以将代码分散在不同的文件或位置中，提高代码的可维护性和可读性。

3. 兼容性良好

ready事件的兼容性非常好，几乎支持所有主流的浏览器。不需要考虑浏览器兼容性是使用ready事件的一个重要原因。

案例分析：改变页面背景颜色

为了进一步说明ready事件的用法和优点，我们来看一个简单的案例：在页面加载完成后，改变页面的背景颜色。

<!DOCTYPE html>
<html>
<head>
    <title>页面加载完之后执行</title>
    <style>
        body {
            background-color: #fff;
        }
    </style>
    <script src="
    <script>
        $(function() {
            $("body").css("background-color", "#f1f1f1");
        });
    </script>
</head>
<body>
    页面加载完之后执行
    <p>页面加载中...</p>
</body>
</html>

上述代码中，我们通过<style>标签设置了body元素的背景颜色为白色。在页面加载完成后，我们使用ready事件将背景颜色修改为灰色。

在上述代码中，我们首先引入了jQuery库，然后在<script>标