如何在HTML页面中在线引入jQuery

在HTML页面中引入jQuery是使用jQuery库的基础步骤。jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax操作。以下是在HTML页面中在线引入jQuery的详细步骤：

1. 了解jQuery的CDN

CDN（内容分发网络）是一种将资源分发到全球多个位置的服务，以减少加载时间并提高性能。jQuery的CDN提供了快速、可靠的jQuery库版本。使用CDN引入jQuery是推荐的做法，因为它可以减少服务器负载，并确保使用的是最新版本的jQuery。

2. 选择合适的CDN

有许多CDN提供jQuery库，以下是一些流行的CDN：

3. 在HTML页面中引入jQuery

以下是使用CDN在线引入jQuery的步骤：

步骤1：在HTML文档中添加`<script>`标签

在HTML文档的<head>部分或<body>部分的底部，添加一个<script>标签。

<script src="URL" type="text/javascript"></script>

步骤2：替换URL

将URL替换为你选择的CDN提供的jQuery库的链接。以下是一个使用jQuery官方CDN的例子：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤3：确保正确引入

确保<script>标签的src属性指向正确的jQuery库URL。以下是一个完整的HTML示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function(){
            alert('jQuery is working!');
        });
    </script>
</body>
</html>

在这个例子中，当文档加载完成后，jQuery会执行$(document).ready()函数，并在弹窗中显示消息“jQuery is working!”。

4. 使用jQuery

一旦jQuery被引入到HTML页面中，你就可以使用它提供的各种方法和功能了。在上面的例子中，我们使用了$(document).ready()方法来确保在文档完全加载后执行JavaScript代码。

通过以上步骤，你就可以在HTML页面中成功在线引入jQuery，并开始使用它提供的强大功能了。