当前位置：首页 > 行业动态 > 正文

html如何引入jquery

admin
行业动态
2024-04-05
2

在HTML中引入jQuery，通常有两种方式：通过CDN和下载到本地，下面将详细介绍这两种方式。

1、通过CDN引入jQuery

CDN（Content Delivery Network）是内容分发网络，它将网站所需的资源存储在全球各地的服务器上，当用户访问网站时，浏览器会自动从离用户最近的服务器上获取资源，从而提高网站的加载速度。

要通过CDN引入jQuery，只需在HTML文件的<head>标签内添加以下代码：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

这里，我们使用了jQuery官方提供的CDN链接，需要注意的是，这里的版本号可能会随着jQuery的更新而改变，你可以在jQuery官网查看最新版本的链接。

2、下载到本地引入jQuery

如果你不希望使用CDN，也可以将jQuery下载到本地，然后在HTML文件中引用，你需要从jQuery官网下载jQuery库文件，下载地址为：https://jquery.com/download/

下载完成后，将文件解压到一个文件夹中，jquery3.6.0，在HTML文件的<head>标签内添加以下代码：

<script src="path/to/jquery3.6.0/jquery3.6.0.min.js"></script>

注意将path/to/替换为你实际存放jQuery库文件的路径，这样，当浏览器解析HTML文件时，就会自动加载并执行jQuery库中的代码。

3、使用jQuery

引入jQuery后，你就可以在HTML文件中使用jQuery了，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery示例</title>
    <!通过CDN引入jQuery >
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <button id="clickMe">点击我</button>
    <script>
        // 使用jQuery选择器选中按钮元素
        $("#clickMe").click(function() {
            // 当按钮被点击时，修改其文本内容
            $(this).text("你点击了我！");
        });
    </script>
</body>
</html>

在这个示例中，我们首先通过CDN引入了jQuery库，我们创建了一个按钮元素，并为其分配了一个ID（clickMe），接下来，我们使用jQuery的选择器（$("#clickMe")）选中了这个按钮元素，并为其绑定了一个点击事件处理函数，当用户点击按钮时，这个处理函数会被执行，修改按钮的文本内容为“你点击了我！”。

归纳一下，要在HTML中引入jQuery，可以通过CDN或下载到本地的方式，引入后，就可以使用jQuery提供的各种功能来增强网页的交互性和用户体验，希望本文能帮助你更好地理解如何在HTML中引入和使用jQuery。