在 HTML 中添加 JQuery

1. 在 HTML 中使用 JQuery CDN 包含 JQuery
2. 下载 JQuery 并将其包含在 HTML 中

本文将指导你在 HTML 页面上添加或编写 jQuery 代码。

在 HTML 中使用 JQuery CDN 包含 JQuery

JQeury 是最流行的 JavaScript 库之一。

该库通过 DOM 遍历和操作、CSS 操作、事件处理、动画和 AJAX 调用等功能简化了网站中的许多工作。我们可以使用 jQuery 少写多做，这是主要优势。

我们可以使用 jQuery 而不是常规的 JavaScript 以更少的代码进行操作。现在，我们将讨论如何在 HTML 页面上使用 jQuery。

在 HTML 文档中包含 jQuery 的最常见方法是使用内容交付网络 (CDN)。CDN 是一个服务器网络，通过将内容缓存在离用户更近的网络位置，为最终用户提供所请求的内容。

这样，用户将快速准确地获得所请求的数据。我们可以从 Google CDN 和 Microsoft CDN 等各种来源获取 jQuery CDN。

我们可以在 script 标签中包含 jQuery CDN URL，并在 HTML 中使用 jQuery。我们可以将 jQuery 写在单独的 .js 文件中并将其包含在 HTML 文件中，或者将 jQuery 写在 script 标记中。

首先，进入 JQuery CDN网站，选择最新的稳定版 jQuery。为了演示，我们使用的是未压缩的版本。

然后网站将输出如下所示的标签。

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

接下来，复制标签并将其放入 HTML 文件中。然后，创建一个 ID 为 text 的 p 标签，并且不要在标签之间写入任何内容。

在 p 标签下方，创建一个 ID 为 button 的按钮，并在 value 属性中写入文本 Click here。HTML 部分已经结束，现在我们将编写 jQuery。

在 script 标签内，编写 ready() jQuery 方法。选择 button id 并在方法内调用 click() 方法。

同样，在 click() 方法中选择 text id 并调用 html() 方法。将文本 clicked 写入 html() 参数。

在本节中，我们将了解这些不同的 jQuery 方法。ready() 方法包含所有其他方法。

当 DOM 完全加载时，方法中的其他内容将被执行。同样，当单击选定元素时执行 click() 方法。html() 方法将内容设置为所选元素。

在下面的示例中，单击按钮时会显示已单击的文本。这样，我们就可以在使用 CDN 的 HTML 文档中使用 jQuery。

示例代码：

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

下载 JQuery 并将其包含在 HTML 中

用 HTML 编写 jQuery 的另一种方法是下载 jQuery 文件并将其包含在 HTML 文件中。

我们可以从这里链接下载文件。在将下载的 .js 文件包含在 script 标记中后，我们将在 HTML 中编写 jQuery 代码。

例如，从上面给出的链接下载 jQuery 文件。接下来，在 HTML 文件中，在 script 标签的 src 属性中写入 jQuery 文件的文件路径。

这是我们必须对上述方法中的示例进行的唯一更改。我们将使用相同的 HTML 和 jQuery 代码进行演示。

当我们单击按钮时，将产生文本 clicked，如上例所示。这样，我们就可以下载 jQuery 文件并将其包含在 HTML 中。

示例代码：

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>