补齐 DOM 操作短板，先别假装自己精通原生 JavaScript

很多转岗做前端、或者刚学网页制作的人，能力缺口往往不在 CSS 排版，而在 DOM 操作和事件处理上。原生 JavaScript 写选择器、处理兼容性、绑定事件容易写出一堆冗长代码，遇到显示隐藏区块、图片淡入淡出这种基础交互就卡壳，最后只能抄代码却不知道原理。这门课解决的就是这个痛点：用最直接的方式让你上手网页互动效果。它适合已经懂基本 HTML 标签和 CSS 样式、能写出静态页面，但 JavaScript 基础薄弱、写不出动态交互的学习者。如果你连 div 和 class 都分不清，请先去补基础；如果你已经能熟练用原生 JS 手写事件委托，这门课对你来说太浅。建议先看文件导入和 ready 执行时机，再啃选择器，最后直接照着做显示隐藏和淡入淡出的动画效果，按这个顺序补缺最高效。

配套练习怎么跟进，别只看不敲

看视频时最忌讳只跟着点头不动手。资料里的动画效果看似简单，但自己写时常会忘记加 ready 外层包裹，或者把选择器写错导致事件根本没触发。建议准备一个空白页面，每看完一个动画方法就立刻自己写一遍：先做一个按钮控制文字区块的显示与隐藏，设定不同速度参数感受差异；再做一个点击图片触发淡入淡出的相册效果。把 toggle 和 fadeIn 这些方法配合不同的回调函数多试几次。不要满足于代码跑通了，要试着改参数值，观察动画快慢变化，理解库内部到底是怎么处理显示状态切换的。只有自己敲过报错过，才知道 ready 防护和选择器精准匹配在实际页面里的必要性。

学完能独立做什么，以及如何查漏补缺

学完这部分内容，你应能独立完成常见网页交互组件的基础实现：比如点击导航按钮切换内容区块的显隐、鼠标悬停或点击让图片淡入淡出、用简单的动画速度参数控制过渡效果。看完后请试着回答几个问题：为什么要用 ready 包裹代码，不写会出什么问题？hide 和 show 设定速度参数后，元素本身的布局会怎样变化？toggle 究竟在替我们判断什么状态？如果这些都能答清楚，说明基础互动逻辑已经补到位了。当然，这只是网页前端的第一步，现代开发早已不依赖这种传统库，但理解这套选择器和事件绑定机制，能帮你平滑过渡到后续更复杂的框架学习。别停在这里，拿这套基础去改造你之前写的静态页面，把死页面变活，才算真正补齐了这块能力缺口。

课程目录

1-1 [不啰嗦直接用] jQuery版本说明 (03:41)
1-2 [不啰嗦直接用] jQuery文件的导入 (05:42)
1-3 [不啰嗦直接用] 执行jQuery必做的：$(document).ready (07:07)
1-4 [不啰嗦直接用] 原来是这样：jQuery选择器说明 (09:21)
1-5 [不啰嗦直接用] 第一个jQuery互动完成 (06:16)
2-1 [jQuery还有哪些好玩的东西] 显示隐藏区块hide(), show() (10:20)
2-2 [jQuery还有哪些好玩的东西] 显示隐藏区块进阶说明：toggle() 和设定速度 (04:22)
2-3 [jQuery还有哪些好玩的东西] 点点图片淡入淡出：fadeIn(), fadeOut() (06:39)
2-4 [jQuery还有哪些好玩的东西] 点点图片淡入淡出进阶说明： fadeToggle(), fa (03:25)
2-5 [jQuery还有哪些好玩的东西] 让图片动起来：animate() (09:25)
3-1 [jQuery与Html的亲密关系] 取得跟修改文字內容：text() (06:12)
3-2 [jQuery与Html的亲密关系] 取得跟修改网页内容：html() (06:12)
3-3 [jQuery与Html的亲密关系] 取得跟修改字段内容： val() (06:09)
3-4 [jQuery与Html的亲密关系] 取得跟修改属性值：attr() (07:31)
3-5 [jQuery与Html的亲密关系] 插队一下！新增网页元素：append(), prepend( (09:19)
3-6 [jQuery与Html的亲密关系] 插队一下！新增网页元素： after(), before() (05:05)
4-1 [jQuery与css的暧昧关系] 加入新类别：addClass() (07:28)
4-2 [jQuery与css的暧昧关系] 移除类别跟切换类别：removeClass() (07:14)
4-3 [jQuery与css的暧昧关系] jQuery自己做新的: css() (08:36)
4-4 [jQuery与css的暧昧关系] 大大小小我自己来：jQuery 控制尺寸 (09:01)
5-1 [让jQuery带你看Html的祖谱] jQuery帮忙往上找长辈：parent(), parent (14:34)
5-2 [让jQuery带你看Html的祖谱] jQuery帮忙往下找子孙：children(), find (05:34)
5-3 [让jQuery带你看Html的祖谱] jQuery怎么找同辈：siblings() next() (10:10)
5-4 [让jQuery带你看Html的祖谱] 过滤一下亲戚：first(), last(), filte (10:26)
6-1 [jQuery其他好玩的地方] jQuery回调：CallBack (06:40)
6-2 [jQuery其他好玩的地方] jQuery的连续写法 (08:01)
6-3 [jQuery其他好玩的地方] $(this)指的是自己 (06:22)
6-4 [jQuery其他好玩的地方] 解决jQuery冲突的方法：noConflict() (08:14)
6-5 [jQuery其他好玩的地方] jQuery选择器深入说明 (07:53)
7-1 [jQuery的实战应用] 有趣的动态页签切换(一) (13:39)
7-2 [jQuery的实战应用] 有趣的动态页签切换(二) (18:50)
7-3 [jQuery的实战应用] 有趣的动态页签切换(三) (19:05)
7-4 [jQuery的实战应用] jqery隐藏选单+更换页面背景颜色(一) (18:02)
7-5 [jQuery的实战应用] jqery隐藏选单+更换页面背景颜色(二) (13:28)
7-6 [jQuery的实战应用] 页面滑动到指定位置(一) (16:00)
7-7 [jQuery的实战应用] 页面滑动到指定位置(二) (17:35)
7-8 [jQuery的实战应用] 灯箱广告：lightbox(一) (18:32)
7-9 [jQuery的实战应用] 灯箱广告：lightbox(二) (10:26)