如何在 HTML 页面中链接 jQuery?
什么是 jQuery?
jQuery 是一个快速简洁的 JavaScript 库，其设计理念是"少写代码，多做事"。该库的主要目的是简化在网站上使用 JavaScript 的过程。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，从而加快了 Web 开发速度。 jQuery 将多行 JavaScript 代码封装成方法，我们可以用一行代码调用这些方法。
如何链接 jQuery?
有两种方法可以在 HTML 页面中链接 jQuery -
-
通过在本地下载 jQuery 库 - 您可以将 jQuery 文件下载到本地计算机并将其包含在 HTML 页面中。
-
通过 CDN 引入 jQuery - 您可以直接从内容分发网络 (CDN) 将 jQuery 库添加到 HTML 页面中。
1. 通过在本地下载 jQuery 库
-
从官方网站下载最新版本的 jQuery 库:https://jquery.com/download/ 您可以下载四种可用的 jQuery 版本:未压缩版、压缩版、精简版和精简压缩版。
-
现在将下载的 jquery-3.6.0.min.js 文件放入您网站的某个目录中，例如 /jquery。
-
我们可以通过在 HTML 页面中使用 script 标签并将下载的 jQuery 库文件地址作为 src 属性来链接 jQuery。可以像下面这样添加 jquery-3.6.0.min.js。
<head> <script type="text/javascript" src="/jquery/jquery-3.6.0.min.js"></script> </head>
Let’s understand with the help of a complete example.
示例
在下面的示例中，我们将 jQuery 库按如下方式添加到 HTML 页面中 -
<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
我们可以直接从内容分发网络 (CDN) 链接到 HTML 页面中的 jQuery 库。有很多 CDN 提供最新版本的 jQuery 库。例如，Google CDN、Microsoft CDN、Cloudflare CDN 以及 jQuery 自身的 CDN。
让我们通过示例了解如何从这些 CDN 链接 jQuery。
示例 1 - 从 Google CDN 链接 jQuery
我们可以通过在 HTML 页面中使用 script 标签并将 jQuery Google CDN 地址作为 src 属性来链接 jQuery。可以像下面这样添加 jquery.min.js。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
在下面的示例中，我们将 jQuery 库链接到 HTML 页面中，如下所示 −
<!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.com/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
我们可以通过在 HTML 页面中使用 script 标签并将 jQuery 的 Microsoft CDN 地址作为 src 属性来链接 jQuery。
可以像下面这样添加 jquery-3.6.0.js。<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
在下面的示例中，我们将来自 Microsoft CDN 的 jQuery 库链接到我们的 HTML 页面中。
<!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 的 jQuery 库链接到您的 HTML 页面中。
<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 在 HTML 页面中链接 jQuery 库。要在 HTML 页面中链接 jQuery，我们需要将 jQuery CDN 地址添加到 script 标签的 src 属性中。此外，还需要在 script 标签中添加 integrity 和 crossorigin 属性。我们可以直接从 jQuery 网站复制 script 代码。例如，可以像这样添加 jquery-3.6.0.min.js:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
以下示例中，我们将 jQuery CDN 中的 jQuery 库链接到您的 HTML 页面中 −
<html>
<head>
<title>jQuery Google CDN</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="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.
