实现思路梳理
使用jQuery实现点击按钮改变颜色效果，核心逻辑分为三步：首先准备需要操作的按钮和目标元素，然后通过jQuery绑定按钮的点击事件，最后在事件回调函数中修改目标元素的CSS颜色属性。整个过程不需要复杂的原生JS逻辑，jQuery封装好的方法能让代码更简洁。
基础实现步骤
1. 准备页面元素
首先需要在HTML页面中定义按钮和目标元素，比如一个用来触发点击的按钮，和一个需要改变颜色的文本块，基础结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery点击改色示例</title>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.target-box {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<button id="changeColorBtn">点击改变颜色</button>
<div class="target-box" id="colorTarget">我是目标元素</div>
</body>
</html>2. 绑定点击事件并修改颜色
在页面加载完成后，通过jQuery选中按钮元素，绑定click事件，在回调函数中修改目标元素的颜色样式：
$(function() {
// 选中id为changeColorBtn的按钮，绑定点击事件
$('#changeColorBtn').on('click', function() {
// 选中id为colorTarget的目标元素，修改文字颜色为红色
$('#colorTarget').css('color', 'red');
// 也可以同时修改背景颜色
$('#colorTarget').css('background-color', '#f0f0f0');
});
});进阶实现：切换多种颜色
1. 预定义颜色数组实现循环切换
如果需要在每次点击时切换不同的颜色，可以预定义一个颜色数组，通过索引记录当前颜色位置，每次点击后更新索引并应用对应颜色：
$(function() {
// 预定义颜色数组
const colorList = ['red', 'blue', 'green', 'orange', 'purple'];
// 当前颜色索引，初始为0
let currentIndex = 0;
$('#changeColorBtn').on('click', function() {
// 获取当前颜色
const currentColor = colorList[currentIndex];
// 应用颜色到目标元素
$('#colorTarget').css('color', currentColor);
// 索引加1，如果超过数组长度则回到0
currentIndex = (currentIndex + 1) % colorList.length;
});
});2. 基于当前颜色动态切换
也可以不预定义数组，通过判断目标元素当前的颜色值来切换下一个颜色，这种方式更灵活：
$(function() {
$('#changeColorBtn').on('click', function() {
const $target = $('#colorTarget');
// 获取当前文字颜色
const currentColor = $target.css('color');
// 根据当前颜色切换到下一个颜色
if (currentColor === 'rgb(0, 0, 0)' || currentColor === 'black') {
$target.css('color', 'red');
} else if (currentColor === 'rgb(255, 0, 0)' || currentColor === 'red') {
$target.css('color', 'blue');
} else if (currentColor === 'rgb(0, 0, 255)' || currentColor === 'blue') {
$target.css('color', 'green');
} else {
$target.css('color', 'black');
}
});
});注意事项
- 确保jQuery库在自定义JS代码之前引入，否则会出现$未定义的错误
- 操作DOM的代码最好放在
$(function(){})中，保证页面元素加载完成后再执行逻辑 - 修改CSS属性时，如果使用驼峰命名，比如
backgroundColor，jQuery也支持，和原生JS的写法一致 - 如果需要同时修改多个CSS属性，可以传入对象作为参数，例如
$target.css({color: 'red', 'font-size': '16px'})