jquery页面加载完成后

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

基础概念： jQuery 的 $(document).ready() 或简写为 $(function() {}) 方法用于在 DOM（文档对象模型）完全加载并准备好后执行代码。这意味着在 DOM 树构建完成后，但在所有外部资源（如图片、样式表等）加载完成之前，就可以运行这些代码。

优势：

简化选择器：jQuery 提供了简洁的选择器语法，使得选取页面元素变得更加容易。
跨浏览器兼容性：jQuery 处理了许多浏览器之间的差异，使得开发者可以编写更少的兼容性代码。
丰富的插件生态：jQuery 拥有庞大的插件生态系统，可以轻松实现各种功能，如轮播图、日期选择器等。
链式调用：jQuery 允许链式调用，使得代码更加简洁和易读。

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

$(document).ready()：当 DOM 完全加载并准备好后触发。
$(window).load()：当整个页面及所有依赖资源（如图片、样式表等）完全加载后触发。

应用场景：

初始化页面元素的状态或样式。
绑定事件处理器到 DOM 元素。
执行需要在 DOM 加载完成后立即运行的脚本。

遇到的问题及解决方法：问题：为什么我的 jQuery 代码在页面加载完成后没有执行？原因：

jQuery 库未正确引入。
代码放置位置不正确，可能在 </body> 标签之后。
选择器错误，未能正确选取目标元素。
代码中存在语法错误。

解决方法：

确保 jQuery 库已正确引入，可以通过浏览器的开发者工具检查。
确保 jQuery 库已正确引入，可以通过浏览器的开发者工具检查。
将 jQuery 代码放置在 </body> 标签之前，或者在 $(document).ready() 中执行。
将 jQuery 代码放置在 </body> 标签之前，或者在 $(document).ready() 中执行。
检查选择器是否正确，确保能够选取到目标元素。
检查选择器是否正确，确保能够选取到目标元素。
检查代码中是否存在语法错误，并使用浏览器的开发者工具进行调试。

示例代码：

<!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>
    <h1 id="myHeading">Hello, jQuery!</h1>

    <script>
        $(document).ready(function() {
            $('#myHeading').css('color', 'blue');
        });
    </script>
</body>
</html>

在这个示例中，当页面加载完成后，jQuery 会将 #myHeading 元素的文本颜色设置为蓝色。