使用 jQuery 实现点击按钮改变颜色效果-html教程-PHP中文网

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

DDD

发布： 2025-10-11 13:39:46

原创

531人浏览过

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

登录后复制

将上述代码添加到 <head> 标签或 <body> 标签的末尾。推荐放在 <body> 标签的末尾，以避免阻塞页面渲染。

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

编写 jQuery 代码实现点击变色

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

$(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 结构整合在一起，得到完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 点击变色示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .vote {
      padding: 10px 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>

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

</body>
</html>

登录后复制

扩展与优化

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