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

技术教程
2025-10-11 13:39:46

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

本文将介绍如何使用 jQuery 监听按钮的点击事件，并在点击后动态修改按钮的背景颜色。核心在于正确引入 jQuery 库，并使用 .on() 方法绑定点击事件，以及使用 .css() 方法修改样式。通过本文，你将掌握利用 jQuery 动态修改页面元素样式的基本方法。

确保正确引入 jQuery 库

在使用 jQuery 之前，务必确保在 HTML 文件中正确引入了 jQuery 库。通常，可以通过 CDN 引入：

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

将上述代码添加到

标签或标签的末尾。推荐放在标签的末尾，以避免阻塞页面渲染。

注意： 如果未正确引入 jQuery，控制台会报错 Uncaught ReferenceError: $ is not defined，表示 jQuery 对象未定义。

编写 jQuery 代码实现点击变色

以下代码展示了如何使用 jQuery 监听按钮的点击事件，并在点击后改变按钮的背景颜色：

AI社交封面生成器

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

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

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

代码解释：

$(document).ready(function(){ ... });：确保在 DOM 加载完成后执行 jQuery 代码。
$(".vote")：选择所有 class 为 "vote" 的元素（即按钮）。
.on("click", function(){ ... });：为选中的元素绑定点击事件。
$(this)：在事件处理函数中，this 指向被点击的按钮元素。
.css("backgroundColor", "hsl(216, 12%, 54%)")：使用 .css() 方法修改按钮的 backgroundColor 属性。hsl(216, 12%, 54%) 是一个 HSL 颜色值，表示一种灰色。

HTML 结构

HTML 结构如下，包含多个 class 为 "vote" 的按钮：

<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>

完整示例代码

将 jQuery 代码和 HTML 结构整合在一起，得到完整的示例代码：




  jQuery 点击变色示例
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  



<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>

扩展与优化

切换颜色： 可以通过判断当前背景颜色，切换不同的颜色。
添加样式类： 使用 .addClass() 和 .removeClass() 方法添加或移除 CSS 类，而不是直接修改样式，可以更好地管理样式。
事件委托： 如果按钮是动态添加的，可以使用事件委托，将事件绑定到父元素上，例如 $(".rating").on("click", ".vote", function(){ ... });。