📌  相关文章
📜  如何将 jQuery 代码添加到 HTML 文件？(1)

📅  最后修改于: 2023-12-03 15:24:43.287000             🧑  作者: Mango

如何将 jQuery 代码添加到 HTML 文件？

当我们想在 HTML 文件中使用 jQuery 时，我们需要先将 jQuery 库添加到 HTML 文件中。这可以通过以下几种方法来实现：

1. 从官网下载并引入

首先，我们需要从 jQuery 的官方网站（[https://jquery.com/]）下载 jQuery 库文件。然后，我们将 jQuery 库文件保存在我们的项目文件夹中，并在 HTML 文件的头部添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <script src="path/to/jquery.js"></script>
</head>
<body>
    ...
</body>
</html>

在 script 标签中使用 src 属性指定 jQuery 库文件的路径即可。

2. 使用 CDN 加载

除了下载 jQuery 库文件之外，我们还可以通过 CDN（Content Delivery Network，内容分发网络）加载 jQuery 库。jQuery 有很多 CDN 供我们选择，例如 Google CDN。

在 HTML 文件的头部添加以下代码即可使用 Google CDN 提供的 jQuery 库文件：

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    ...
</body>
</html>
3. 使用 npm 安装

如果我们正在使用 npm（Node.js 的包管理器）管理我们的项目，我们可以使用以下命令来安装 jQuery：

npm install jquery

然后，在 HTML 文件中使用以下代码加载 jQuery 库：

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    ...
</body>
</html>

这里，我们使用了相对路径来找到我们安装的 jQuery 库文件。

结论

以上三种方法都可以将 jQuery 库添加到 HTML 文件中，只需根据自己的需要选择其中一种方法即可。最后，我们可以在 HTML 文件中使用 jQuery 的 API 来操作 HTML 元素，实现自己的功能。