在 HTML 中添加 JQuery
本文将指导你在 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>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn