本文将介绍如何使用 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" 的按钮：
完整示例代码
将 jQuery 代码和 HTML 结构整合在一起，得到完整的示例代码：
jQuery 点击变色示例
扩展与优化
- 切换颜色： 可以通过判断当前背景颜色，切换不同的颜色。
- 添加样式类： 使用 .addClass() 和 .removeClass() 方法添加或移除 CSS 类，而不是直接修改样式，可以更好地管理样式。
- 事件委托： 如果按钮是动态添加的，可以使用事件委托，将事件绑定到父元素上，例如 $(".rating").on("click", ".vote", function(){ ... });。
总结
本文介绍了使用 jQuery 实现点击按钮改变颜色的方法。核心步骤包括：引入 jQuery 库、选择按钮元素、绑定点击事件、修改背景颜色。通过这些步骤，可以实现动态修改页面元素样式的效果。务必注意确保正确引入 jQuery 库，并理解代码中的选择器和事件处理函数。
