加载页面前执行 jquery

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，开发者可以更方便地操作 DOM 元素，处理事件，以及实现复杂的页面效果。

类型

核心：提供基本的工具函数和选择器。
选择器：用于选择和过滤 HTML 元素。
属性操作：用于获取和设置元素的属性。
CSS 操作：用于获取和设置元素的样式。
DOM 操作：用于创建、修改和删除 DOM 元素。
事件处理：用于绑定和处理事件。
动画：用于创建动画效果。
Ajax：用于进行异步数据交互。

应用场景

页面加载前的初始化：在页面加载前执行一些初始化操作，如设置默认值、绑定事件等。
动态内容加载：通过 Ajax 加载动态内容，并将其插入到页面中。
表单验证：在用户提交表单前进行验证。
动画效果：为页面元素添加动画效果，提升用户体验。

加载页面前执行 jQuery

在页面加载前执行 jQuery 代码，可以通过以下几种方式实现：

1. 内联脚本

将 jQuery 代码放在 <head> 标签中的 <script> 标签内：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 在这里执行 jQuery 代码
            console.log("页面加载完成");
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. 外部脚本

将 jQuery 代码放在一个单独的 JavaScript 文件中，并在 <head> 标签中引入该文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="scripts.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

scripts.js 文件内容：

$(document).ready(function() {
    // 在这里执行 jQuery 代码
    console.log("页面加载完成");
});

3. 使用 `defer` 属性

将 defer 属性添加到 <script> 标签中，确保脚本在 DOM 解析完成后执行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
    <script src="scripts.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

遇到的问题及解决方法

问题：jQuery 代码未执行

原因：

jQuery 库未正确加载。
代码放在了错误的位置。
代码中有语法错误。

解决方法：

确保 jQuery 库已正确加载，可以通过浏览器的开发者工具检查。
将代码放在 $(document).ready() 函数中，确保在 DOM 加载完成后执行。
检查代码是否有语法错误，可以使用浏览器的开发者工具查看控制台输出。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 在这里执行 jQuery 代码
            console.log("页面加载完成");
            $("p").css("color", "red"); // 将所有段落文本颜色设置为红色
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>

通过以上方法，可以在页面加载前执行 jQuery 代码，并解决可能遇到的问题。