任务一：修改样式
1. 在页面上有一个按钮，ID 为 changeColorButton，一个 div 元素，ID 为 targetDiv。
2. 当点击按钮时，修改 targetDiv 的背景颜色为红色，文字颜色为白色。
任务二：操作列表
1. 有一个无序列表（ul），其中有五个列表项（li），每个列表项都有一个类名为 list-item。
2. 使用 jQuery 选择器选取所有具有类名 list-item 的列表项，并将它们的文本内容修改为 "Task Completed!"。
任务三：动画效果
1. 有一个按钮，ID 为 animateButton，一个 div 元素，ID 为 animatedDiv。
2. 当点击按钮时，使用 jQuery 添加一个淡入动画效果（fadeIn）到 animatedDiv 元素。
提示：
- 在 HTML 文件中引入 jQuery 库。
- 使用 $(document).ready() 确保文档加载完毕后执行 jQuery 代码。
- 使用 jQuery 提供的方法来选取元素、修改样式、处理事件等。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 编程实战闯关</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<!-- 任务一 -->
<button id="changeColorButton">Change Color</button>
<div id="targetDiv">This is the target div.</div>
<!-- 任务二 -->
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
</ul>
<!-- 任务三 -->
<button id="animateButton">Animate</button>
<div id="animatedDiv">This is the animated div.</div>
<script>
// 任务一
$("#changeColorButton").click(function() {
$("#targetDiv").css({
"background-color": "red",
"color": "white"
});
});
// 任务二
$(".list-item").text("Task Completed!");
// 任务三
$("#animateButton").click(function() {
$("#animatedDiv").fadeIn();
});
</script>
</body>
</html>
尝试完成这些任务，并确保在点击相关按钮时看到预期的效果。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4637/jQuery