📝 今日学习记录：用jQuery实现电影榜展开/切换效果，代码极简，新手也能直接上手，整理成笔记存档，也分享给和我一样正在学jQuery的小伙伴～
其实需求很简单：电影风云榜页面，默认展开第一个电影的详情，点击其他电影项，切换显示对应详情（其他详情自动隐藏），就是咱们常见的“手风琴”交互效果。
先上最终效果示意（简化版）：
✅ 页面加载后，自动展开第一名《悍城》的详情✅ 点击任意电影项，隐藏所有详情，只显示当前点击项的详情✅ 代码简洁，逻辑清晰，新手能快速看懂、直接复用
一、完整实操代码（直接复制可用）
先放完整代码，大家可以直接复制到HTML文件里运行，直观感受效果（重点看最后面的jQuery代码）：
<!DOCTYPE html><htmllang="zh-CN"><head> <metacharset="UTF-8"><title>电影风云榜</title><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>.movie-rank { width: 500px; margin: 30px auto; border: 1px solid #ddd; padding: 20px; font-family: "Microsoft Yahei", sans-serif;}.movie-rank h2 { color: #e83e8c; margin-top: 0;}.rank-item { border-bottom: 1px dashed #ccc; padding: 12px 0; display: flex; align-items: center; cursor: pointer;}.rank-num { width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; font-weight: bold; margin-right: 12px;}.rank-num.top3 { background-color: #e83e8c; }.rank-num.normal { background-color: #ccc; }.movie-name { font-size: 16px; }.movie-detail { display: none; /* 默认隐藏所有详情 */ padding: 10px 0 10px 42px; font-size: 14px; color: #666;}</style></head><body><divclass="movie-rank"> <h2>电影风云榜</h2> <divclass="rank-item"> <divclass="rank-num top3">1</div> <divclass="movie-name">悍城</div> </div> <divclass="movie-detail">《悍城》简介：警方联合行动，深入黑帮内部，展开一场正义与邪恶的较量，剧情紧凑，打斗场面拉满。</div> <divclass="rank-item"> <divclass="rank-num top3">2</div> <divclass="movie-name">流浪地球</div> </div> <divclass="movie-detail">《流浪地球》简介：太阳急速老化，人类启动“流浪地球”计划，带着地球逃离太阳系，开启漫长的星际征程。</div> <divclass="rank-item"> <divclass="rank-num top3">3</div> <divclass="movie-name">哪吒2</div> </div> <divclass="movie-detail">《哪吒2》简介：哪吒重生归来，解锁全新力量，面对更强大的敌人，守护陈塘关，诠释“我命由我不由天”的真谛。</div> <divclass="rank-item"> <divclass="rank-num normal">4</div> <divclass="movie-name">封神</div> </div> <divclass="movie-detail">《封神》简介：商周大战一触即发，各路神仙、诸侯登场，演绎一场关于权力、正义与救赎的史诗级战役。</div> <divclass="rank-item"> <divclass="rank-num normal">5</div> <divclass="movie-name">战狼3</div> </div> <divclass="movie-detail">《战狼3》简介：冷锋再次踏上边境任务，面对境外势力的挑衅，用热血与忠诚守护祖国领土完整。</div></div><script> // 核心jQuery代码（就3行关键逻辑） $('.rank-item').first().next().show() $('.rank-item').click(function(){ // 干掉所有人（隐藏所有详情） $('.movie-detail').hide() // 保留我自己（显示当前点击项的详情） $(this).next().show() })</script></body></html>
二、核心jQuery知识点拆解（重点！必记）
这段代码虽然短，但覆盖了jQuery最常用、最核心的6个知识点，新手吃透这几个，能搞定80%的简单交互～
1. 类选择器（找元素的核心）
$('.rank-item') // 找到页面中所有class="rank-item"的元素（所有电影项）$('.movie-detail')// 找到所有class="movie-detail"的元素（所有电影详情）
✅ 语法：`$('选择器')`，和CSS选择器完全一致✅ 作用：快速定位页面元素，比原生JS的`document.querySelectorAll()`简洁太多
2. 筛选方法：.first()
✅ 作用：从匹配到的一组元素中，筛选出第一个元素✅ 这里用途：找到第一个电影项，用来实现“默认展开”
3. 兄弟元素遍历：.next()
$('.rank-item').first().next().show()
✅ 作用：找到当前元素的下一个同级元素（相当于“亲弟弟”）✅ 这里用途：第一个电影项（.rank-item）的下一个元素，就是它的详情（.movie-detail），调用.show()显示出来
4. 显示/隐藏方法：.show() / .hide()
$('.movie-detail').hide() // 隐藏所有详情$(this).next().show() // 显示当前点击项的详情
✅ 无需写CSS，直接调用方法就能控制元素显示/隐藏✅ .hide() → 元素隐藏（display: none）✅ .show() → 元素显示（display: block，适配元素本身的布局）
5. 事件绑定：.click(function(){})
$('.rank-item').click(function(){ // 点击后执行的代码})
✅ 作用：给所有电影项绑定“点击事件”，用户点击任意一个电影项，就会执行函数里的代码✅ 这是jQuery最常用的交互方式，类似原生JS的addEventListener，但更简洁
6. 关键知识点：$(this)$(this).next().show()
✅ 含义：当前正在被点击的那个元素（谁被点击，
(this)就指向第二个.rank-item，再通过.next()找到它的详情并显示三、代码逻辑拆解（新手必懂）
整个交互的逻辑非常简单，分2步，一看就懂：
页面加载后（默认状态）：找到第一个电影项 → 显示它的详情（.first().next().show()）
用户点击时：先隐藏所有电影详情（.hide()）→ 再显示当前点击项的详情（$(this).next().show()）
💡 小技巧：先“重置”（隐藏所有），再“单独展示”（显示当前），这样就不会出现多个详情同时展开的情况，逻辑更严谨。
四、新手注意事项（避坑指南）
⚠️ 必须先引入jQuery文件：代码里的<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 不能少，否则jQuery代码无法生效（相当于“加载jQuery工具”）。
⚠️ 元素结构要对应：.rank-item 和 .movie-detail 必须是“相邻的同级元素”（电影项后面紧跟着详情），否则.next()找不到对应的详情。
⚠️ 简化版代码可以直接用，但实际开发中，建议把jQuery代码包在$(function(){})里，确保页面加载完成后再执行，避免元素未加载导致代码失效（优化后代码如下）：
<script>$(function(){ // 页面加载完成后再执行 $('.rank-item').first().next().show() $('.rank-item').click(function(){ $('.movie-detail').hide() $(this).next().show() })});</script>
五、学习小结
今天的小练习虽然简单，但收获满满：
1. 掌握了jQuery最常用的选择器、筛选方法、事件绑定，能独立实现简单的交互效果；2. 理解了$(this)的核心用法，这是做列表切换、手风琴等效果的关键；3. 代码不在于多，在于简洁易懂，这段核心逻辑只有3行，却能实现实用的交互。
后续继续练习更复杂的jQuery用法，慢慢积累，新手也能一步步吃透jQuery～
📌 笔记存档，方便以后复习，也希望能帮到正在学jQuery的你，一起进步呀！
