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

技术教程
2025-10-12 10:08:51

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

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

确保正确引入 jQuery

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

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

<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> 标签引用该文件。例如，如果将 <a style="color:#f60; text-decoration:underline;" title= "jquery"href="https://www.php.cn/zt/15736.html" target="_blank">jquery-3.7.0.min.<a style="color:#f60; text-decoration:underline;" title= "js"href="https://www.php.cn/zt/15802.html" target="_blank">js 文件放在 js 目录下，则可以使用以下代码：</script>

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

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

验证 jQuery 是否成功引入：

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

AI社交封面生成器

一句话/一张图一键智能生成社交媒体图片的AI设计神器

108 查看详情 AI社交封面生成器

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

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




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





  
  
  
  
  


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

代码解释：

$(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 样式 (可选):

为了让按钮看起来更美观，可以在