jquery 全部加载完成

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性可以让你更简洁地编写 JavaScript 代码。

基础概念

jQuery 的 $(document).ready() 方法用于在文档完全加载完毕后执行函数。这意味着 DOM 树已经完全生成，并且可以安全地进行 DOM 操作。

类型

jQuery 的加载完成事件主要有两种类型：

$(document).ready()：在 DOM 完全加载后执行。
$(window).load()：在所有资源（包括图片、CSS 文件等）完全加载后执行。

应用场景

DOM 操作：在页面加载完成后，动态修改页面内容。
事件绑定：在页面加载完成后，绑定事件处理函数。
动画效果：在页面加载完成后，执行一些初始化的动画效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ready Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="welcome">Welcome to jQuery!</h1>

    <script>
        $(document).ready(function() {
            // DOM 已经加载完毕，可以安全地进行操作
            $('#welcome').css('color', 'blue');
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：jQuery 代码没有在页面加载完成后执行

原因：

jQuery 库没有正确加载。
$(document).ready() 方法写错了。
代码放在了 HTML 文件的底部，而 jQuery 库在它之后加载。

解决方法：

确保 jQuery 库已经正确加载，可以通过浏览器的开发者工具检查。
检查 $(document).ready() 方法是否正确书写。
将 jQuery 库放在 HTML 文件的顶部，确保它在其他脚本之前加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ready Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#welcome').css('color', 'blue');
        });
    </script>
</head>
<body>
    <h1 id="welcome">Welcome to jQuery!</h1>
</body>
</html>

通过以上方法，可以确保 jQuery 代码在页面加载完成后正确执行。