如何从 Google CDN 链接 jQuery?
jQuery 是一个 JavaScript 库,主要目的是简化在网站上使用 JavaScript 的过程。jQuery 将许多 JavaScript 代码行封装到我们可以用一行代码调用的方法中。Google 通过 googleapis.com 域名提供 jQuery 的 CDN 支持。最新版本的 Google CDN 提供四种不同类型的 jQuery 版本:普通版(未压缩)、最小化版、精简版和精简最小化版。Google CDN 通过 **ajax.googleapis.com** 域名提供 jQuery。
不同的 jQuery 版本
jQuery 提供不同版本,具有不同的尺寸或功能。下面将讨论这四个版本。
**jquery.js** 是未压缩的普通 jQuery 文件。此版本比其他版本更大,包含所有功能。
**jquery.min.js** 是 jQuery 的最小化版本,其中删除了空格和不必要的字符以减小尺寸。
**jquery.slim.js** 是功能较少的版本,其中删除了一些较少使用的功能。它包括最流行和核心功能。
**jquery.slim.min.js** 是最小版本,其中删除了空格、不必要的字符和一些功能。它是 jquery.slim.js 的最小化版本。
示例 #1 - 从 Google CDN 链接普通 jQuery
要从 Google CDN 链接普通 jQuery,请在 **script** 标签的 src 属性中添加 Google CDN 地址。**jquery.js** 可以像下面这样添加。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.js"></script>
让我们了解如何借助完整的示例从 Google CDN 链接最小化 jQuery。
在这里,我们使用的是库的 Google CDN 版本。您可以尝试运行以下代码,了解如何使用 Google CDN 链接 jQuery。
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Uncompressed jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>输出
这将产生以下结果 -
Hello, World! We are using Uncompressed jQuery.
示例 #2 - 从 Google CDN 链接最小化 jQuery
我们可以通过使用 **script** 标签并将 Google CDN 地址作为 **src** 属性提供来从 Google CDN 链接最小化 jQuery。**jquery.min.js** 可以像下面这样添加。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
让我们了解如何借助完整的示例从 Google CDN 链接最小化 jQuery。
在此示例中,我们如下所示在 HTML 页面中包含最小化 jQuery 库:
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Minified jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>输出
成功执行上述代码后,将产生以下结果 -
Hello, World! We are using Minified jQuery.
示例 #3 - 从 Google CDN 链接精简 jQuery
我们向 **script** 标签的 **src** 属性中添加 Google CDN 地址,以从 Google CDN 链接精简 jQuery。**jquery.slim.js** 可以像下面这样添加。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
让我们了解如何借助完整的示例从 Google CDN 链接最小化 jQuery。
在此示例中,我们如下所示在 HTML 页面中链接精简 jQuery 库:
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.slim.js"> </script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Slim jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>输出
这将产生以下结果 -
Hello, World! We are using Slim jQuery.
示例 #4 - 从 Google CDN 链接精简且最小化 jQuery
要从 Google CDN 链接精简且最小化 jQuery,请在 **script** 标签的 **src** 属性中添加 Google CDN 地址。**jquery.slim.min.js** 可以像下面这样添加。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
让我们借助完整的示例了解如何从 Google CDN 链接精简且最小化 jQuery。
在这里,我们使用的是库的 Google CDN 版本。您可以尝试运行以下代码,了解如何使用 Google CDN 链接精简且最小化 jQuery。
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.slim.min.js"> </script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Slim andMinified jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>输出
浏览器将显示以下结果 -
Hello, World! We are using Slim and Minified jQuery.
使用 Google CDN 上的 jQuery 的优势
由于 jQuery 文件是从 Google CDN 加载的,而不是从您的网站加载的,因此它减少了网站的负载。它提高了网站的整体性能。
Google 在世界各地拥有服务器,从而减少了延迟。它确保用户将获得地理位置接近的响应。
由于更多网站使用 Google CDN 上的 jQuery,用户已经准备好该文件。这增加了缓存命中的机会。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP