本文将介绍如何使用 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 点击变色示例 .vote { padding: 10px 20px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; } $(document).ready(function(){ $(".vote").on("click", function(){ $(this).css("backgroundColor", "hsl(216, 12%, 54%)"); }); });
扩展与优化
切换颜色： 可以通过判断当前背景颜色，切换不同的颜色。添加样式类： 使用 .addClass() 和 .removeClass() 方法添加或移除 CSS 类，而不是直接修改样式，可以更好地管理样式。事件委托： 如果按钮是动态添加的，可以使用事件委托，将事件绑定到父元素上，例如 $(“.rating”).on(“click”, “.vote”, function(){ … });。
总结
本文介绍了使用 jQuery 实现点击按钮改变颜色的方法。核心步骤包括：引入 jQuery 库、选择按钮元素、绑定点击事件、修改背景颜色。通过这些步骤，可以实现动态修改页面元素样式的效果。务必注意确保正确引入 jQuery 库，并理解代码中的选择器和事件处理函数。
以上就是使用 jQuery 实现点击按钮改变颜色效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583459.html
微信扫一扫 
支付宝扫一扫 
