jquery加载完成执行

jQuery的$(document).ready()方法用于确保在DOM（文档对象模型）完全加载并解析完毕后执行特定的JavaScript代码。这样可以避免在DOM元素尚未准备好时尝试访问或操作它们，从而导致错误。

基础概念

DOM（文档对象模型）：DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
$(document).ready()：这是jQuery提供的一个事件处理器，用于在DOM加载完成后执行代码。

优势

提高性能：确保代码只在DOM加载完成后执行，避免不必要的资源浪费。
避免错误：防止在DOM元素尚未加载时尝试访问它们，从而减少运行时错误。
更好的用户体验：页面加载更快，用户交互更流畅。

类型

标准用法：$(document).ready(function() { ... });
简写形式：$(function() { ... });

应用场景

初始化插件：在DOM加载完成后初始化第三方插件。
绑定事件：为DOM元素绑定事件处理程序。
动态内容加载：在页面加载时动态插入内容。

示例代码

$(document).ready(function() {
    // DOM加载完成后执行的代码
    console.log("DOM is ready!");

    // 绑定点击事件
    $("#myButton").click(function() {
        alert("Button clicked!");
    });

    // 动态插入内容
    $("body").append("<p>Hello, World!</p>");
});

// 简写形式
$(function() {
    console.log("DOM is ready using shorthand!");
});

遇到的问题及解决方法

问题：代码在DOM加载完成前执行

原因：可能是因为代码放在了<head>标签内，或者是在外部脚本文件中过早地调用了jQuery函数。

解决方法：

将JavaScript代码放在<body>标签的底部。
使用$(document).ready()确保代码在DOM加载完成后执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                alert("Button clicked!");
            });
        });
    </script>
</body>
</html>

通过这种方式，可以确保所有DOM元素都已加载完毕，从而避免因元素未找到而导致的错误。