页面加载完成后执行jquery

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性之一是它的选择器引擎，它允许开发者使用 CSS 选择器来查找 DOM 元素。

类型

选择器：用于选择 DOM 元素。
事件处理：用于绑定和处理 DOM 元素的事件。
动画效果：用于创建各种动画效果。
Ajax：用于进行异步数据交互。

应用场景

网页交互：通过 jQuery 可以轻松实现复杂的网页交互效果。
数据动态加载：使用 jQuery 的 Ajax 方法可以动态加载数据，提升用户体验。
表单验证：jQuery 可以方便地进行表单验证。

页面加载完成后执行 jQuery

在页面加载完成后执行 jQuery 代码，可以使用 $(document).ready() 或简写形式 $(function() {})。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>

    <script>
        $(document).ready(function() {
            // 页面加载完成后执行的代码
            $('h1').css('color', 'blue');
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：jQuery 代码未执行

原因：

jQuery 库未正确引入。
代码位置不正确，可能在 jQuery 库加载之前执行。
语法错误。

解决方法：

确保 jQuery 库已正确引入，可以通过浏览器控制台检查是否有错误。
将 jQuery 代码放在 $(document).ready() 或 $(function() {}) 中，确保在 DOM 加载完成后执行。
检查代码是否有语法错误。

示例代码（错误的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>

    <script>
        // 错误示例：代码在 jQuery 库加载之前执行
        $('h1').css('color', 'blue');
    </script>
</body>
</html>

示例代码（正确的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>

    <script>
        $(document).ready(function() {
            // 正确示例：代码在 jQuery 库加载并 DOM 加载完成后执行
            $('h1').css('color', 'blue');
        });
    </script>
</body>
</html>

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