$(document).ready() 什么时候触发

JS

$(document).ready() 是一个jQuery中的函数，用于在文档加载完毕后执行指定的代码。当网页的DOM结构已经完全加载并且可以被操作时，$(document).ready() 会被触发。

在使用 $(document).ready() 之前，需要先引入jQuery库，可以通过以下方式在HTML文档中引入：

html
<script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>

一旦引入了jQuery库，在页面中的任何位置都可以使用 $(document).ready() 函数来执行代码。

$(document).ready() 的主要作用是确保文档的DOM结构已经完全加载，以便在脚本中操作DOM元素，绑定事件等操作。这样可以避免在DOM尚未加载完毕时执行代码，导致出错或无法正常工作的情况。

下面是一个简单的案例代码，演示了 $(document).ready() 的使用：

html
<!DOCTYPE html>
<html>
<head>
    <title>使用 $(document).ready()</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
    <script>
        $(document).ready(function() {
            // 在这里编写需要在文档加载完毕后执行的代码
            console.log("文档加载完毕！");
            // 这里可以操作DOM元素，绑定事件等
            $("button").click(function() {
                alert("按钮被点击了！");
            });
        });
    </script>
</head>
<body>
    <h1>使用 $(document).ready()</h1>
    <button>点击我</button>
</body>
</html>

在上面的代码中，$(document).ready() 函数包含了一个匿名函数，在文档加载完毕后会自动执行该函数。在这个例子中，当文档加载完毕后，控制台会输出"文档加载完毕！"，并且页面中的按钮被点击时会弹出一个提示框。

使用 $(document).ready() 可以确保在操作DOM结构之前，文档已经完全加载完毕，从而保证代码的可靠性和正确性。