新手求助：jQuery在CodePen中无法正常工作

云上老周

2026-5-22

解决CodePen中jQuery无法正常运行的问题

嗨，作为编程新手遇到这种问题太正常啦，别着急，咱们一步步排查解决：

先确认jQuery的引入是否真的生效
打开CodePen右上角的齿轮设置面板，切换到「JavaScript」标签页，在「Add External Scripts/Pens」的搜索框里输入「jQuery」，选一个稳定的版本（比如3.x系列）添加进去。添加后要确保它在下方列表里是启用状态（复选框勾上），这才是CodePen正确引入外部库的方式。
别在HTML面板里写脚本代码
CodePen专门有「JavaScript」面板用来放脚本，把你的jQuery代码移到这里来，别放在HTML里的<script>标签里！因为CodePen会自动管理脚本加载顺序，你在HTML里写的脚本很可能会在jQuery还没加载完就执行，这时候$会直接报错，代码自然跑不起来。
你需要把这段代码单独放到JS面板：
```
$(document).ready(function() {
  $("h2").addClass("animated bounce");
});
```
额外检查：动画类的依赖
你代码里加的animated bounce是Animate.css的动画类哦！如果没引入这个CSS库，就算jQuery成功给h2加上了类，也看不到动画效果，你可能会误以为是jQuery没工作。同样在设置面板的「CSS」标签页里，搜索「Animate.css」添加进去，动画才能正常显示。
最后验证一下
点击「Run」按钮后，按F12打开浏览器开发者工具，切到「Console」标签看看有没有报错。如果出现$ is not defined，说明jQuery还是没加载好，回到第一步再检查；如果没报错，去「Elements」面板看看h2标签有没有加上animated bounce类，要是有类但没动画，就是Animate.css没引入的问题。