jQuery 入门

在本教程中，您将学习如何制作一个基于 jQuery 的网页。

下载 jQuery

要开始使用，首先下载 jQuery 的副本并将其包含在您的文档中。有两个版本的 jQuery 可供下载 — 压缩的和未压缩的。

未压缩的文件适合开发或调试环境；同时，建议将压缩后的文件用于生产环境，因为它节省了宝贵的带宽，并且由于文件较小而提高了性能。

你可以从这里下载 jQuery：https://jquery.com/download/

一旦你下载了 jQuery 文件，你可以看到它有 .js 扩展名，因为 jQuery 只是一个 JavaScript 库，因此你可以在 HTML 文档中包含 jQuery 文件和 <script> 元素，就像您包括普通的 JavaScript 文件。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

始终在自定义脚本之前包含 jQuery 文件；否则，当您的 jQuery 代码尝试访问它时，jQuery API 将不可用。

提示： 如您所见，我们在上面的示例中跳过了 <script> 标记内的属性 type="text/javascript"。因为这在 HTML5 中不是必需的。 JavaScript 是 HTML5 和所有现代浏览器中的默认脚本语言。

包含来自 CDN 的 jQuery

或者，如果您不想自己下载和托管 jQuery，您可以通过免费提供的 CDN（内容交付网络）链接在文档中包含 jQuery。

CDN 可以通过减少加载时间来提供性能优势，因为它们在遍布全球的多台服务器上托管 jQuery，并且当用户请求文件时，它将从离他们最近的服务器提供服务。

这也提供了一个优势，如果您网页的访问者在访问其他站点时已经从同一个 CDN 下载了 jQuery 的副本，则不必重新下载它，因为它已经在浏览器的缓存中。

StackPath 提供的 jQuery 的 CDN

您还可以通过 Google 和 Microsoft CDN 包含 jQuery。

创建您的第一个 jQuery 支持的网页

到目前为止，您已经了解了 jQuery 库的用途以及如何将其包含在文档中，现在是时候将 jQuery 投入实际使用了。

在本节中，我们将通过将标题文本的颜色从默认的黑色更改为红色来执行一个简单的 jQuery 操作。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My First jQuery Powered Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，我们执行了一个简单的 jQuery 操作，通过更改标题的颜色，即使用 jQuery 元素选择器的 <h1> 元素和当文档准备好时的 css() 方法，这称为文档就绪事件。我们将在接下来的章节中学习 jQuery 选择器、事件和方法。