jquery 加载完成执行

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性之一是它的文档就绪（document ready）处理程序，它允许代码在 DOM（文档对象模型）完全加载并准备好后执行。

基础概念

当网页加载时，浏览器会首先加载 HTML 文档，然后解析并构建 DOM 树。在这个过程中，如果尝试访问或操作 DOM 元素，可能会因为 DOM 尚未完全加载而失败。jQuery 的 $(document).ready() 函数解决了这个问题，它确保了在执行任何 DOM 操作之前，DOM 已经完全加载。

优势

简化代码：jQuery 的语法简洁，可以减少编写和维护代码的时间。
跨浏览器兼容性：jQuery 处理了许多浏览器之间的差异，使得开发者可以编写一次代码，在多个浏览器中运行。
丰富的插件生态：jQuery 拥有庞大的插件生态系统，可以轻松地添加额外的功能。

类型

jQuery 的文档就绪执行主要有以下几种方式：

简写形式：
简写形式：
完整形式：
完整形式：

应用场景

DOM 操作：在页面加载完成后，初始化页面元素，如设置样式、绑定事件等。
数据获取：使用 Ajax 技术从服务器获取数据，并在页面上显示。
动画效果：在页面加载完成后，执行一些动画效果。

示例代码

假设我们有一个按钮，当页面加载完成后，我们希望改变它的背景颜色并绑定一个点击事件：

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

    <script>
        $(function() {
            // 改变按钮背景颜色
            $('#myButton').css('background-color', 'blue');

            // 绑定点击事件
            $('#myButton').click(function() {
                alert('Button clicked!');
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

jQuery 未加载：如果 jQuery 库未正确加载，$(document).ready() 将不会执行。确保 jQuery 库的路径正确，并且在调用 $(document).ready() 之前加载。
代码执行顺序：确保 $(document).ready() 中的代码在 DOM 完全加载后执行。如果代码在 DOM 加载之前执行，可能会导致错误。
多个 $(document).ready()：可以在一个页面中多次使用 $(document).ready()，它们会按照定义的顺序依次执行。

通过以上解释和示例代码，你应该能够理解 jQuery 加载完成执行的原理和应用场景，并能够解决常见的相关问题。