在 HTML 中添加 JQuery

在 HTML 中使用 JQuery CDN 包含 JQuery

下载 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。为了演示，我们使用的是未压缩的版本。

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

接下来，复制标签并将其放入 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。

示例代码：

Run Above Code

下载 JQuery 并将其包含在 HTML 中

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

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

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

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

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

示例代码：

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe