jquery页面加载后执行

基础概念

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

类型

jQuery 页面加载后执行的代码主要有以下几种类型：

$(document).ready()：这是最常用的方法，表示在 DOM 完全加载后执行代码。
$(function() { ... })：这是 $(document).ready() 的简写形式。
window.onload：这是原生 JavaScript 的方法，表示在页面完全加载后执行代码，包括所有资源（如图片）。

应用场景

初始化页面元素：例如，设置初始值、绑定事件等。
动态加载内容：例如，通过 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>
    <h1 id="welcome">Hello, World!</h1>

    <script>
        $(document).ready(function() {
            // 在 DOM 完全加载后执行
            $('#welcome').css('color', 'blue');
        });

        // 或者使用简写形式
        $(function() {
            $('#welcome').css('color', 'red');
        });
    </script>
</body>
</html>

遇到的问题及解决方法

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

原因：

jQuery 库未正确加载：确保 jQuery 库的路径正确，并且在使用 jQuery 代码之前已经加载。
代码位置错误：确保 jQuery 代码放在 HTML 文件的底部，或者在 $(document).ready() 中。

解决方法：

检查 jQuery 库的路径是否正确。
确保 jQuery 代码放在 $(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="welcome">Hello, World!</h1>

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

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