📌  相关文章
📜  如何在 HTML 页面中链接 jQuery？(1)

📅  最后修改于: 2023-12-03 15:38:16.880000             🧑  作者: Mango

如何在 HTML 页面中链接 jQuery？

jQuery 是一个广泛使用的 JavaScript 库，它可以简化我们在网页中使用 JavaScript 的操作。要在 HTML 页面中链接 jQuery，可以按照下面的步骤进行操作：

步骤1：下载 jQuery

首先，我们需要先下载 jQuery 库。可以在 jQuery 官网 上下载最新版本的 jQuery。

步骤2：将 jQuery 文件复制到项目中

将下载好的 jQuery 文件复制到项目中。通常情况下，我们将 jQuery 文件放在项目的 js 文件夹下。

- project
    - js
        - jquery.js
    - index.html
步骤3：链接jQuery 文件

在 HTML 文件中链接 jQuery 文件。可以使用 <script> 标签来链接 jQuery 文件，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Link jQuery in HTML</title>
</head>
<body>
    <h1>Link jQuery in HTML</h1>
    <script src="js/jquery.js"></script>
</body>
</html>

这个例子中，我们使用 <script> 标签，将 jQuery 文件链接到 HTML 页面中。

步骤4：测试 jQuery 链接是否成功

要验证链接是否成功，我们可以在 jQuery 文件链接后，使用一些 jQuery 功能进行测试。

例如，在 HTML 页面中添加一个 <p> 标签，并使用 jQuery 隐藏它，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Link jQuery in HTML</title>
</head>
<body>
    <h1>Link jQuery in HTML</h1>
    <p id="hidden-p">This paragraph should be hidden.</p>

    <script src="js/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $("#hidden-p").hide();
        });
    </script>
</body>
</html>

在这个例子中，我们使用了 jQuery 的 $(document).ready() 函数，以确保 HTML 页面加载完毕后再执行隐藏 <p> 标签的操作。

总结

以上就是在 HTML 页面中链接 jQuery 的方法。需要注意的是，jQuery 库文件需要下载到本地，可以通过 CDN 加速访问，但如果网络环境不好，最好还是将 jQuery 文件下载到本地，以确保网页的稳定性。