JavaScript jQuery

JavaScript - 探索 jQuery

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档的遍历和操作、事件处理以及网页开发的动画效果。虽然现代 JavaScript (ES6+) 提供了许多与 jQuery 功能重叠的原生能力，但了解 jQuery 对于处理遗留项目或特定的插件仍然有用。

引入 jQuery

您可以通过下载 jQuery 并自行托管，或通过使用内容分发网络 (CDN) 来在您的网页中引入它。对于快速测试，使用 CDN 通常更简单。

以下是如何从 CDN 引入最新版本的 jQuery：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <!-- 你的 HTML 内容放在这里 -->
    <h1 id="greeting">Hello World!</h1>

    <script>
        <!-- 你的 jQuery 代码将放在这里 -->
    </script>
</body>
</html>

jQuery 语法基础

jQuery 的核心是 $ 函数，它是 jQuery 的别名。它用于“选择”HTML 元素，然后对它们执行操作。

选择器： jQuery 使用 CSS 风格的选择器来查找 HTML 元素。例如，$("#myId") 选择 id="myId" 的元素，$(".myClass") 选择所有 class="myClass" 的元素。

文档就绪： 为了确保您的 jQuery 代码只在 HTML 文档完全加载和解析后运行，您需要将其包裹在文档就绪处理函数中：

$(document).ready(function() {
    // 与 DOM 交互的 jQuery 代码放在这里
});

// 简写版本（非常常用）：
$(function() {
    // jQuery 代码放在这里
});

示例：更改 HTML 内容和样式

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 选择 id 为 "greeting" 的 h1 元素
            // 更改其 HTML 内容
            $("#greeting").html("Hello jQuery!");

            // 更改其 CSS 颜色
            $("#greeting").css("color", "blue");
        });
    </script>
</head>
<body>
    <h1 id="greeting">Hello World!</h1>
</body>
</html>

链式调用： jQuery 允许“链式调用”，可以在一个语句中对同一选择的元素执行多个操作：

$(function() {
    $("#greeting")
        .html("Hello Chained jQuery!")
        .css("color", "green")
        .fadeOut(1000)
        .fadeIn(1000);
});

jQuery vs. 现代原生 JavaScript

现代 JavaScript (ES6 及更高版本) 已经采纳了许多使直接 DOM 操作更容易的特性，从而减少了新项目对 jQuery 的依赖。以下是常见任务的比较：

为什么使用原生 JS？

无外部依赖：减少页面加载时间和潜在的故障点。
更好的性能：直接 DOM 操作通常更快。
标准化：技能具有可迁移性，并与现代 Web 标准一致。

什么时候可能仍然考虑使用 jQuery？

遗留项目：许多现有的网站和应用程序使用 jQuery。
特定的 jQuery 插件：一些有用的插件可能没有直接的原生 JS 等效项。
简化的 AJAX：历史上，jQuery 的 $.ajax、$.get、$.post 方法比原生的 XMLHttpRequest 更简单，尽管现代的 fetch API 在很大程度上解决了这个问题。

对于新项目，通常建议从原生 JavaScript 和现代框架/库开始，除非有非常充分的理由需要引入 jQuery。

进一步学习

jQuery 拥有庞大的 API，涵盖事件处理、效果和动画、AJAX 交互等。如果您需要使用 jQuery，api.jquery.com 上的官方文档是一个极好的资源。