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

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

确保正确引入 jQuery 库

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

将上述代码添加到

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

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

编写 jQuery 代码实现点击变色

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

$(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" 的按钮：

  1
  2
  3
  4
  5

完整示例代码

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

  
  
  




  1
  2
  3
  4
  5

扩展与优化

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

总结

本文介绍了使用 jQuery 实现点击按钮改变颜色的方法。核心步骤包括：引入 jQuery 库、选择按钮元素、绑定点击事件、修改背景颜色。通过这些步骤，可以实现动态修改页面元素样式的效果。务必注意确保正确引入 jQuery 库，并理解代码中的选择器和事件处理函数。