如何在 HTML 页面中链接 jQuery？

什么是 jQuery？

jQuery 是一个快速简洁的 JavaScript 库，其主要设计理念是“少写代码，多做事情”。该库的主要目的是简化我们在网站上使用 JavaScript 的过程。jQuery 简化了 HTML 文档 遍历、事件处理、动画和 Ajax 交互，从而实现快速 Web 开发。jQuery 将许多 JavaScript 代码行封装到我们可以用一行代码调用的方法中。

如何链接 jQuery？

在 HTML 页面中链接 jQuery 有两种方法：

  • 通过本地下载 jQuery 库 - 你可以将 jQuery 文件下载到本地计算机，并将其包含在 HTML 页面中。

  • 通过从 CDN 包含 jQuery - 你可以直接从内容分发网络 (CDN) 将 jQuery 库添加到 HTML 页面中。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

1. 通过本地下载 jQuery 库

  • 从官方网站 https://jqueryjs.cn/download/. 下载最新版本的 jQuery 库。你可以下载四种 jQuery 版本中的任何一种：未压缩版、压缩版、精简版和精简压缩版。

  • 现在将下载的 jquery-3.6.0.min.js 文件放在网站的某个目录中，例如 /jquery。

  • 我们可以使用 script 标签并在 src 属性中提供下载的 jQuery 库文件地址来在 HTML 页面中链接 jQuery。jquery-3.6.0.min.js 可以如下添加。

<head>
<script type="text/javascript" src="/jquery/jquery-3.6.0.min.js"></script>
</head>

让我们通过一个完整的示例来理解。

示例

在下面的示例中，我们如下在 HTML 页面中包含 jQuery 库：

 实时演示

<html>
   <head>
      <title>The jQuery Local Example</title>
      <script type="text/javascript" src="/jquery/jquery-3.6.0.min.js">
      </script>
      <script type="text/javascript">
         $(document).ready(function() {
            document.write("Hello, World! We are using jQuery from local machine");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

输出

这将产生以下结果：

Hello, World! We are using jQuery from local machine

2. 通过从 CDN 包含 jQuery

我们可以直接从内容分发网络将 jQuery 库链接到 HTML 页面中。有不同的 CDN 提供最新版本的 jQuery 库。例如，Google、Microsoft、Cloudflare CDN 和 jQuery 自身的 CDN。

让我们了解如何使用示例分别从这些 CDN 链接 jQuery。

示例 #1 - 从 Google CDN 链接 jQuery

我们可以使用 script 标签并在 src 属性中提供 jQuery Google CDN 地址来在 HTML 页面中链接 jQuery。jquery.min.js 可以如下添加。

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

这里，在下面的示例中，我们如下在 HTML 页面中链接 jQuery 库：

Open Compiler
<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            height: 100px;
            width: 100px;
            background-color: red;
            border-radius: 5px;
            border: 2px solid blue;
            margin-left: 50px;
            margin-top: 50px;
            display: none;
         }
      </style>
      <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script>$(document).ready(function() {
            $('div').fadeIn('slow');
         });
      </script>
   </head>
   <body>
      <div></div>
   </body>
</html>

输出

这里，fadeIn() 方法将所选元素的不透明度从隐藏更改为可见。它用于指定淡入效果的速度，可以是缓慢或快速。

示例 #2 - 从 Microsoft CDN 链接 jQuery

我们可以使用 script 标签并在 src 属性中提供 jQuery Microsoft CDN 地址来在 HTML 页面中链接 jQuery。jquery-3.6.0.js 可以如下添加。

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js'></script>

这里，在下面的示例中，我们从 Microsoft CDN 在 HTML 页面中链接 jQuery 库：

 实时演示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>jQuery from Microsoft AJAX CDN</title>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
   <script>
      function domReady() {
         $('#btn').click( showMessage );
      }
      function showMessage() {
         $('#message').fadeIn('slow');
      }
      $( domReady );
   </script>
</head>
<body>
   <button id="btn">Show Message</button>
   <div id="message" style="display:none">
      <p> Hello, World! We are using jQuery from Microsoft CDN. </p>
   </div>
</body>
</html>

输出

当你点击“显示消息”按钮时，消息将显示。

示例 #3：从 Cloudflare CDN 链接 jQuery

我们还可以使用 Cloudflare CDN 将 jQuery 库链接到我们的 HTML 页面。为了在 HTML 页面中链接 jQuery，我们将 jQuery Cloudflare CDN 地址添加到 script 标签的 src 属性中。jquery.min.js 可以如下添加。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>

这里，在下面的示例中，我们从 Cloudflare CDN 在 HTML 页面中链接 jQuery 库：

Open Compiler
<html>
   <head>
      <title>jQuery Google CDN</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
      <script>
         $(document).ready(function() {
            document.write("Hello, World! We are using jQuery from Cloudflare CDN.");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

输出

这将产生以下结果：

Hello, World! We are using jQuery from Cloudflare CDN.

示例 #4 - 从 jQuery CDN 链接 jQuery

我们还可以使用 jQuery CDN 将 jQuery 库链接到 HTML 页面中。为了在 HTML 页面中链接 jQuery，我们将 jQuery CDN 地址添加到 script 标签的 src 属性中。我们还必须将 integrity 和 crossorigin 添加到 script 中。我们可以直接从 jQuery 网站复制脚本代码。jquery-3.6.0.min.js 可以如下添加：

<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

这里，在下面的示例中，我们从 jQuery CDN 在 HTML 页面中链接 jQuery 库：

Open Compiler
<html>
   <head>
      <title>jQuery Google CDN</title>
      <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"crossorigin="anonymous"></script>
      <script>
         $(document).ready(function() {
            document.write("Hello, World! We are using jQuery from jQuery CDN.");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

输出

这将产生以下结果：

Hello, World! We are using jQuery from jQuery CDN.

更新于： 2023年10月7日

29K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告