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

使用 jQuery 实现点击按钮改变背景颜色

DDD

发布： 2025-10-11 09:44:14

原创

1014人浏览过

使用 jquery 实现点击按钮改变背景颜色

本文将介绍如何使用 jQuery 监听按钮的点击事件，并在点击后动态改变按钮的背景颜色。核心在于正确引入 jQuery 库，并使用 .on() 方法绑定点击事件，以及使用 .css() 方法修改元素的样式。本文提供完整的代码示例，帮助你快速实现这一功能。

前提条件

在使用 jQuery 之前，请确保你的项目中已经正确引入了 jQuery 库。可以通过以下方式引入：

CDN 引入: 这是最简单的方式，直接在 HTML 文件中添加以下代码：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
登录后复制
建议使用最新版本的 jQuery CDN 链接，以获得更好的性能和安全性。
本地引入: 下载 jQuery 库文件，并将其放置在你的项目目录中。然后在 HTML 文件中使用 <script> 标签引入：
```
<script src="path/to/jquery.min.js"></script>
```
登录后复制
将 path/to/jquery.min.js 替换为 jQuery 文件在你项目中的实际路径。

MDWechat微信主题模块
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和状态栏颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float

0

查看详情

实现步骤

HTML 结构: 首先，我们需要创建一组按钮。这里使用 <button> 元素，并为每个按钮添加相同的 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 代码: 接下来，编写 jQuery 代码来监听按钮的点击事件，并在点击后改变其背景颜色。
```
$(document).ready(function() {
  $(".vote").on("click", function() {
    //test，确认事件绑定成功
    console.log("Button clicked!");
    $(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%) 是一种颜色表示方式，你可以根据需要修改为其他颜色值，例如 red，#FF0000 等。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Change Button Color on Click</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .vote {
      padding: 10px 20px;
      margin: 5px;
      border: 1px solid #ccc;
      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() {
        console.log("Button clicked!");
        $(this).css("backgroundColor", "hsl(216, 12%, 54%)");
      });
    });
  </script>

</body>
</html>

登录后复制

注意事项

jQuery 引入顺序: 确保 jQuery 库在你的 JavaScript 代码之前引入。否则，$ 符号可能未定义，导致代码报错。
选择器准确性: 确保你的 jQuery 选择器能够准确选中目标元素。可以使用浏览器的开发者工具来检查元素是否被正确选中。
CSS 优先级: 如果按钮的背景颜色没有改变，可能是因为 CSS 样式优先级的问题。可以尝试使用 !important 来覆盖其他样式，例如：$(this).css("backgroundColor", "hsl(216, 12%, 54%) !important");，但通常不建议过度使用 !important，应该优先考虑优化 CSS 样式。
事件委托: 如果动态添加按钮，直接绑定事件可能无效。可以使用事件委托，将事件绑定到父元素上，然后根据事件目标来处理。例如：$(".rating").on("click", ".vote", function() { ... });

总结

通过本文，你学习了如何使用 jQuery 监听按钮的点击事件，并动态改变其背景颜色。掌握正确引入 jQuery 库，使用 .on() 方法绑定事件，以及使用 .css() 方法修改样式是关键。同时，需要注意 jQuery 的引入顺序、选择器的准确性以及 CSS 优先级等问题。希望这个教程能帮助你解决实际开发中的问题。

以上就是使用 jQuery 实现点击按钮改变背景颜色的详细内容，更多请关注php中文网其它相关文章！