别再死记硬背了！用这5个jQuery实战小项目（含源码）搞定educoder实训作业
用5个趣味jQuery项目玩转educoder实训作业
每次打开educoder平台看到那些枯燥的jQuery作业题目，是不是感觉头都大了？与其死记硬背那些选择器和DOM操作方法，不如通过实际项目来掌握它们。下面这5个完整的小项目，不仅能帮你轻松完成作业，还能让你真正理解jQuery的实用价值。
1. 个人任务管理器 - 掌握基础选择器
这个项目对应educoder中关于基础选择器的作业要求。我们将创建一个可以添加、删除和标记完成的任务列表。
<div class="task-manager"> <h2>我的任务清单</h2> <input type="text" id="new-task" placeholder="输入新任务"> <button id="add-task">添加</button> <ul id="task-list"> <!-- 任务将在这里动态添加 --> </ul> </div> <script> $(function() { // 添加任务 $("#add-task").click(function() { const taskText = $("#new-task").val(); if(taskText) { $("#task-list").append(`<li>${taskText} <button class="complete">完成</button></li>`); $("#new-task").val(""); } }); // 标记任务完成 $(document).on("click", ".complete", function() { $(this).parent().css("text-decoration", "line-through"); $(this).remove(); }); }); </script>这个项目涵盖了：
- ID选择器(
#add-task) - 类选择器(
.complete) - 元素选择器(
li) - 属性选择器(
input[type="text"])
2. 动态学生信息表 - 玩转过滤选择器
对应educoder中关于过滤选择器的作业，这个表格项目可以让你实践:even、:odd、:first等过滤选择器。
<table id="student-table"> <thead> <tr><th>学号</th><th>姓名</th><th>年龄</th><th>操作</th></tr> </thead> <tbody> <tr><td>001</td><td>张三</td><td>20</td><td><button class="remove">删除</button></td></tr> <tr><td>002</td><td>李四</td><td>21</td><td><button class="remove">删除</button></td></tr> </tbody> </table> <button id="add-student">添加学生</button> <script> $(function() { // 斑马线效果 $("#student-table tr:even").css("background", "#f2f2f2"); $("#student-table tr:odd").css("background", "#ffffff"); $("#student-table tr:first").css("background", "#4CAF50").css("color", "white"); // 添加学生 $("#add-student").click(function() { const newRow = `<tr><td>00${$("#student-table tr").length}</td><td>新学生</td><td>20</td><td><button class="remove">删除</button></td></tr>`; $("#student-table tbody").append(newRow); }); // 删除学生 $(document).on("click", ".remove", function() { $(this).closest("tr").remove(); }); }); </script>3. 图片画廊 - 实践DOM操作
这个项目涵盖了educoder中关于DOM操作的作业要求，包括获取/设置内容、添加/删除元素等。
<div class="gallery"> <div class="main-image"> <img src="image1.jpg" alt="主图"> </div> <div class="thumbnails"> <img src="image1.jpg" alt="缩略图1" class="active"> <img src="image2.jpg" alt="缩略图2"> <img src="image3.jpg" alt="缩略图3"> </div> <button id="add-image">添加图片</button> </div> <script> $(function() { // 点击缩略图切换主图 $(".thumbnails img").click(function() { const src = $(this).attr("src"); $(".main-image img").attr("src", src); $(".thumbnails img").removeClass("active"); $(this).addClass("active"); }); // 添加新图片 $("#add-image").click(function() { const newImage = `<img src="new-image.jpg" alt="新图片">`; $(".thumbnails").append(newImage); }); }); </script>4. 可折叠FAQ列表 - 掌握事件处理
这个项目对应educoder中关于事件处理的作业，展示了click事件和DOM操作的结合使用。
<div class="faq-container"> <div class="faq-item"> <h3 class="faq-question">jQuery是什么？</h3> <div class="faq-answer"> <p>jQuery是一个快速、简洁的JavaScript框架...</p> </div> </div> <div class="faq-item"> <h3 class="faq-question">为什么要用jQuery？</h3> <div class="faq-answer"> <p>jQuery简化了HTML文档遍历、事件处理、动画等操作...</p> </div> </div> </div> <script> $(function() { // 初始隐藏所有答案 $(".faq-answer").hide(); // 点击问题切换答案显示 $(".faq-question").click(function() { $(this).next(".faq-answer").slideToggle(); $(this).toggleClass("active"); }); }); </script>5. 多功能选项卡 - 综合应用
这个综合项目涵盖了educoder中多个知识点，特别是选项卡相关的作业要求。
<div class="tab-container"> <ul class="tab-nav"> <li class="active">首页</li> <li>产品</li> <li>关于</li> <li>联系</li> </ul> <div class="tab-content"> <div class="active">这是首页内容...</div> <div>这是产品内容...</div> <div>这是关于我们的内容...</div> <div>这是联系方式...</div> </div> </div> <script> $(function() { // 选项卡切换 $(".tab-nav li").click(function() { const index = $(this).index(); // 切换导航激活状态 $(".tab-nav li").removeClass("active"); $(this).addClass("active"); // 切换内容显示 $(".tab-content div").removeClass("active").eq(index).addClass("active"); }); // 动态添加新选项卡 $("#add-tab").click(function() { const tabName = prompt("输入新选项卡名称"); if(tabName) { $(".tab-nav").append(`<li>${tabName}</li>`); $(".tab-content").append(`<div>这是${tabName}的内容</div>`); } }); }); </script>这些项目不仅帮你完成educoder作业，更重要的是让你理解jQuery在实际开发中的应用。每个项目都可以进一步扩展功能，比如添加本地存储、动画效果等，让你的作品更加出彩。