在Web开发中,我们经常需要对DOM进行操作。但是,如果我们直接在页面加载完后就开始操作DOM,可能会导致一些问题。例如,如果我们尝试选择一个尚未加载的元素,会导致运行时错误。因此,我们需要一种方式来确保DOM完全加载后再执行代码。

image.png

这就是jQuery的ready()函数的作用所在。ready()函数允许我们在DOM完全加载后执行指定的代码。这样,我们就可以避免在DOM未完全加载时进行操作所带来的问题。

首先,让我们来看一下ready()函数的基本用法。我们可以使用以下代码来确保DOM完全加载后再执行代码:

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

在上面的代码中,$(document).ready()是一个事件处理函数,它会在DOM完全加载后触发。在这个函数内部,我们可以编写需要在DOM完全加载后执行的代码。

ready()函数还有一个简写形式,如下所示:

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

使用简写形式可以使代码更加简洁。

现在,让我们来看一个具体的示例,展示如何使用ready()函数。在这个示例中,我们将实现一个简单的功能:当用户点击按钮时,弹出一个警告框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery的ready()函数示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        $(document).ready(function(){
            $('#myButton').click(function(){
                alert('按钮被点击了!');
            });
        });
    </script>

</body>
</html>

在上面的代码中,我们首先选取了id为myButton的按钮元素,并为其绑定了一个点击事件。然后,我们使用ready()函数确保DOM完全加载后再执行上述代码。这样,当用户点击按钮时,就会弹出一个警告框。

需要注意的是,虽然ready()函数可以确保DOM完全加载后再执行代码,但它并不能保证所有的脚本和资源都加载完成。如果我们需要等待所有的脚本和资源都加载完成,可以使用jQuery的complete()函数,如下所示:

$(document).ready(function(){
    $('#myButton').click(function(){
        alert('按钮被点击了!');
    });

    $(window).on('load', function(){
        alert('所有资源和脚本都加载完成了!');
    });
});

在上面的代码中,我们首先使用ready()函数确保DOM完全加载后再执行代码。然后,我们使用complete()函数等待所有的资源和脚本都加载完成。当所有资源和脚本加载完成后,会弹出一个警告框。

总之,jQuery的ready()函数是一个非常实用的功能,它可以确保DOM完全加载后再执行代码。在实际的Web开发中,我们经常需要使用ready()函数来确保正确的执行顺序,避免运行时错误。希望这篇教程对你有所帮助。