jquery页面加载完执行

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，页面加载完成后执行代码是一个常见的需求，通常使用 $(document).ready() 或其简写形式 $(function() {}) 来实现。

基础概念

DOM（文档对象模型）：HTML 文档被解析后形成的树状结构，允许 JavaScript 修改内容和结构。
jQuery 的 $(document).ready()：这是一个事件处理器，当 DOM 完全加载并准备好时触发。

类型

简写形式：$(function() { /* 代码 */ });
完整形式：$(document).ready(function() { /* 代码 */ });

应用场景

初始化页面元素：例如设置元素的初始状态或绑定事件处理器。
动态加载内容：在页面加载后，通过 Ajax 请求获取数据并更新页面内容。
执行动画效果：在页面加载完成后，对元素执行动画效果。

示例代码

// 简写形式
$(function() {
    console.log('页面加载完成！');
    // 绑定事件处理器
    $('#myButton').click(function() {
        alert('按钮被点击！');
    });
});

// 完整形式
$(document).ready(function() {
    console.log('页面加载完成！');
    // 绑定事件处理器
    $('#myButton').click(function() {
        alert('按钮被点击！');
    });
});

遇到的问题及解决方法

问题：为什么我的 jQuery 代码没有在页面加载完成后执行？

原因：
- jQuery 库未正确引入。
- 代码放在了 HTML 文档的底部，而此时 DOM 可能还未完全加载。
- 其他 JavaScript 错误阻止了代码的执行。
解决方法：
- 确保 jQuery 库已正确引入，可以通过浏览器的开发者工具检查。
- 将 jQuery 代码放在 <head> 标签内或使用 $(document).ready() 确保 DOM 完全加载后再执行代码。
- 检查控制台是否有其他 JavaScript 错误，并修复它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            console.log('页面加载完成！');
        });
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

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