正文

轻松入门：如何在HTML中正确引用jQuery库及实践案例

/0 浏览量
0402

引言

jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。对于初学者来说，学会如何在HTML中引用jQuery库是开始JavaScript编程的第一步。本文将详细介绍如何在HTML中正确引用jQuery库，并提供一个实践案例。

什么是jQuery？

jQuery是一个JavaScript库，它让JavaScript编程更加容易和快速。它通过提供简洁的API来简化HTML文档的遍历、事件处理、动画和Ajax交互。

如何在HTML中引用jQuery库？

方法一：使用CDN（内容分发网络）

CDN是一种网络服务，可以将静态资源（如图片、CSS文件和JavaScript库）分发到全球各地的服务器上，从而加快加载速度。以下是如何使用CDN在HTML中引用jQuery库的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实践案例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <button id="clickMe">点击我</button>
    <script>
        $(document).ready(function(){
            $("#clickMe").click(function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</body>
</html>

在上面的示例中，我们通过CDN引入了jQuery库。<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>这一行代码负责加载jQuery库。

方法二：下载jQuery库

你也可以从jQuery官网下载jQuery库，并将其保存到你的服务器上。以下是如何在HTML中引用本地jQuery库的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实践案例</title>
    <script src="path/to/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <button id="clickMe">点击我</button>
    <script>
        $(document).ready(function(){
            $("#clickMe").click(function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</body>
</html>

在上面的示例中，<script src="path/to/jquery-3.6.0.min.js"></script>这一行代码负责加载本地保存的jQuery库。

实践案例

以下是一个简单的jQuery实践案例，它演示了如何使用jQuery来改变按钮的文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实践案例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery实践案例</h1>
    <button id="changeText">点击我，我会改变文本</button>
    <script>
        $(document).ready(function(){
            $("#changeText").click(function(){
                $(this).text("我已经改变了！");
            });
        });
    </script>
</body>
</html>

在这个案例中，当用户点击按钮时，按钮的文本会从“点击我，我会改变文本”变为“我已经改变了！”。这是通过jQuery的text()方法实现的。

总结

通过本文，你学会了如何在HTML中正确引用jQuery库，并了解了一个简单的实践案例。jQuery是一个非常强大的工具，可以帮助你简化JavaScript编程。希望这篇文章能帮助你开始你的jQuery之旅！

-- 展开阅读全文 --