使用 jQuery 实现点击按钮改变颜色-html教程-PHP中文网

使用 jQuery 实现点击按钮改变颜色

DDD

发布： 2025-10-12 10:08:51

原创

683人浏览过

使用 jquery 实现点击按钮改变颜色

本文旨在帮助开发者解决在使用 jQuery 时，点击按钮无法改变颜色的问题。通常，这可能是由于未正确引入 jQuery 库导致的。本文将提供详细的解决方案，包括如何正确引入 jQuery，以及一个可运行的示例代码，演示如何使用 jQuery 监听按钮点击事件并修改其背景颜色。

确保正确引入 jQuery

在使用 jQuery 之前，务必确保已在 HTML 文件中正确引入 jQuery 库。这是最常见的问题来源。可以通过以下几种方式引入：

使用 CDN 链接： 这是最简单快捷的方式。将以下代码添加到 HTML 文件的 <head> 标签或 <body> 标签的末尾：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

登录后复制

注意： 建议使用稳定的 CDN 链接，并定期检查其可用性。

下载 jQuery 文件并本地引入： 从 jQuery 官网 (https://www.php.cn/link/397dc71b9f153a88d57b040aa4870083) 下载最新版本的 jQuery 文件，并将其放置在你的项目目录中。然后在 HTML 文件中使用 <script> 标签引用该文件。例如，如果将 jquery-3.7.0.min.js 文件放在 js 目录下，则可以使用以下代码：

<script src="js/jquery-3.7.0.min.js"></script>

登录后复制

注意： 确保文件路径正确。

验证 jQuery 是否成功引入：

在引入 jQuery 后，可以在浏览器的开发者工具（通常按 F12 键打开）的控制台中输入 jQuery 或 $。如果返回 jQuery 对象，则表示 jQuery 已成功引入。如果出现 Uncaught ReferenceError: $ is not defined 错误，则表示 jQuery 未正确引入。

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

查看详情

使用 jQuery 监听点击事件并改变颜色

一旦确认 jQuery 已成功引入，就可以使用 jQuery 来监听按钮的点击事件，并修改其背景颜色。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Button Color Change</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
  .vote {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="rating">
  <button class="vote">1</button>
  <button class="vote">2</button>
  <button class="vote">3</button>
  <button class="vote">4</button>
  <button class="vote">5</button>
</div>

<script>
$(document).ready(function(){
  $(".vote").on("click", function(){
    $(this).css("backgroundColor", "hsl(216, 12%, 54%)");
  });
});
</script>

</body>
</html>

登录后复制

代码解释：

$(document).ready(function(){ ... });: 这段代码确保在整个 HTML 文档加载完成后再执行 jQuery 代码。
$(".vote").on("click", function(){ ... });: 这段代码选择所有 class 为 vote 的元素（在本例中是所有的按钮），并为它们的 click 事件绑定一个函数。
$(this).css("backgroundColor", "hsl(216, 12%, 54%)");: 当按钮被点击时，这段代码会将当前被点击按钮的背景颜色设置为 hsl(216, 12%, 54%)。$(this) 指的是当前被点击的按钮元素。

CSS 样式 (可选):

为了让按钮看起来更美观，可以在 <style> 标签中添加一些 CSS 样式，例如设置按钮的 padding、font-size 和 cursor。