如果你搜到这门课，多半是因为一个很具体的问题：页面上想让某个元素动起来，CSS 写腻了，或者遇到需要按条件控制节奏的动画，发现自己卡在 JavaScript 上。这门课就是从这个场景切进去的——不铺大而全的前端路线，集中解决「用 JS 操作页面元素、并让它按预期动起来」这一段。

它对应的工作场景是什么

日常前端开发里，有一类需求是 CSS 过渡和关键帧比较难接住的：点击后展开收起、根据滚动位置触发的位移、轮播图的切换节奏、进度条按数据增长、弹窗的进入退出、列表项的依次浮现。这些效果背后是同一套东西——先拿到元素、再读改它的状态、然后在合适的时间点反复更新。课程把这条链路拆开讲：JavaScript 语法基础、DOM 的查找与修改、事件监听、定时与逐帧更新，最后落到具体动画。学它不是为了记住某段特效代码，而是搞懂「谁在什么时机改变了什么」。

学完能独立做什么

  • 用原生 JS 选中和修改页面元素，处理点击、移入、滚动等常见交互
  • 不依赖插件，手写一个可控制速度、可暂停的位移动画或透明度渐变
  • 做出轮播、手风琴、返回顶部、滚动触发这类常见页面特效
  • 看懂别人写的动画逻辑，知道问题出在时序还是元素状态上

判断标准很直接：给你一个「点一下按钮，卡片从右侧滑进来，再点一下滑回去」的需求，你能不能自己拆步骤写完，而不是去翻现成代码改参数。

资料适合什么基础

需要你至少能看懂 HTML 结构，知道标签、类名和 CSS 选择器大概是怎么回事。JavaScript 部分是从基础语法讲起的，所以没写过 JS 也能跟，但完全没碰过 HTML 和 CSS 的话，前几节会有点吃力，建议先把这两样补到能照着写一个静态页面。已经会写 JS 的人，可以跳过语法段落，直接看 DOM 操作和动画实现部分，把重点放在时序控制和逻辑组织上。

怎么用这份资料效率更高

这类课最容易踩的坑是「看懂了但写不出」。建议每看完一个动画案例，先关掉视频自己默写一遍，写不出来再回去看是哪一步断了。DOM 操作和事件处理这两块，光看不练几乎记不住，边看边在浏览器里改元素、加监听，感受会完全不同。动画部分重点抓两件事：一是元素状态怎么随每一帧更新，二是用什么控制开始和结束。把这两点吃透，再遇到新的特效需求，你是在套方法，而不是在背代码。

需要说明的是，课程围绕 JavaScript 和动画效果展开，不覆盖框架、工程化构建和完整的项目架构。如果你的目标是补齐原生 JS 这一段的动手能力，它是个合适的切入；如果你已经在用框架做业务，只想找现成的动画组件，那这门课的定位可能和你眼下要解决的问题不完全对得上。

课程目录

第一章 Javascript基本功---(试学) JavaScript基础语法 JavaScript简介 体验JavaScript 在html里面添加JavaScript JavaScript语法格式以及注释 alert弹出警示框 prompt弹出输入框 console.log控制台输出 document.write文档打印输出 何为变量 变量的命名规范 练习变量输出自己的名字 数值型 字符型和布尔型 未定义数据类型和空型 typeof检测数据类型 算数操作符 计算年龄案例 算数操作符中的自加和自减 ++前置和++后置的区别 ++前置和++后置的课堂练习题 算数操作符的优先级 比较操作符 逻辑操作符 逻辑操作符优先级及其练习 赋值操作符（一） 赋值操作符（二） 逗号操作符 操作符的优先级 JavaScript组成 数据类型需要转换 转换为字符型 转换为数值型（一） 转换为数值型（二） Number和parseInt区别及其课堂案例 转换为布尔型 体验if语句 判断是否中奖小案例 if语句4小点注意事项 三元运算符 if else if多分支语句 判断闰年小案例 设置断点调试JavaScript switch多分支选择语句 查询水果小程序 switch总结 认识for循环 for循环内部循环原理 利用for打印100句话 打印金字塔 利用for循环求1-100的和和阶乘 利用for输出10行10列的100个数 双重for循环原理 打印倒直角三角形 九九乘法表 美化九九乘法表 体会while循环 利用while做1加到100及其总结 do..while使用及其区别 break和continue的区别 函数的定义及其调用 函数的参数 函数的返回值return 利用函数计算圆的面积 利用函数计算2个数的最大值 计算长方体的体积 数组声明及其赋值 数组的访问及其长度 遍历数组 利用for翻转数组（拓展） 复杂数据类型（object） object对象的声明及其赋值 object对象的访问 总结object数据类型 基本数据类型存储方式 复杂数据类型存储方式 数学对象（一） 数学对象（二） 数组添加删除方法 数组拼接 数组排序 JavaScript基础进阶 阶段概述和JS简介 浏览器原理简介 基本输出语句 代码注释 JS的书写位置 script标签的属性 变量的命名 变量的声明赋值和使用 变量在内存中的存储 交换变量练习 数据类型 number类型 数值范围 数值检测 string类型 字符串的不可变性 字符串的拼接 boolean类型 undefined类型 其他类型值转string 其他类型值转number 其他类型值转boolean 算术运算符 一元运算符 逻辑运算符1 逻辑运算符2 其他运算符 练习 选择语句if 三元运算符1 条
  • 01 三元练习 选择语句switch 选择语句switch练习 循环语句for for循环的简单练习 for循环的中等练习 for循环的困难练习 break和continue 循环语句while 循环语句while练习 数组的声明 数组的基本属性 数组的遍历 length属性的应用 length属性详解 数组练习1 数组练习2 数组练习3 冒泡排序1排序原理 冒泡排序2优化内层 冒泡排序3外层内层 函数介绍 函数的参数 函数的返回值 函数练习1 函数练习2 函数练习3 函数练习4 函数的调试 参数详解 函数的返回值 函数的两种定义方式 全局变量和局部变量 递归 回调 键值对 英雄对象 学生对象 对象字面量 for循环的两种方式 批量创建对象 this关键字 构造函数模式 值类型和引用类型 值类型和引用类型作参数 面试题 数组 数组的检测 数组的增删方法 数组的join方法 数组的reverse方法 数组的迭代方法 数组的位置方法 寻找每个a出现的位置 统计元素的出现次数 数组的其他方法1 数组的其他方法2 访问属性的两种方式 选择语句if练习 Javascript DOM DOM简介 DOM初体验 标签位置 小猫发威 京东商品展示1 京东商品展示2 阻止a标签的默认行为1 相册案例 事件三要素 批量获取元素 批量注册事件 限定范围 京东商品展示升级1 京东商品展示升级2 阻止a标签的默认行为2 相册案例升级 设置类名 显示隐藏切换1 显示隐藏切换2 显示隐藏二维码 替换类名 方法封装 innerText和innerHTML innerText和textContent 兼容处理1 封装兼容方法 点击禁用文本框（disabled） 批量禁用文本框（type） value属性 大量拼接字符串 仿京东搜索框 1 仿京东搜索框 2 点击选中选项（selected） 全选反选1 全选反选2 排他思想 tab栏切换1 tab栏切换2 自定义属性 专门用来操作标签属性的方法 tab栏切换3 隔行变色 子节点 节点属性 菜单切换 子元素 随机选中 表单验证（nextSibling） 表单验证（nextElementSibling） 兼容处理2 封装工具包 开灯关灯 获取样式属性 设置样式属性 改变盒子大小 切换背景图 百度换肤 透明度 隐藏盒子 关闭二维码 当前文本框高亮 隔行变色 当前高亮 设置盒子位置 设置盒子层级 节点的插入移除和克隆 许愿墙（克隆纸条） 许愿墙（位置层级） 许愿墙（双击关闭） 许愿墙（兼容处理1） 许愿墙（兼容处理2） 动态创建页面结构 效率问题（一） 效率问题（二） createElement 动态创建文本框 动态创建列表 选好友1全到右边 选好友2后面三个 选好友3函数封装 选好友4函数封装 百度搜索1indexOf方法 百度搜索2寻找匹配项 百度搜索3动态创建结构 百度搜索4解决问题 微博发布1主体逻辑 微博发布2修改问题 微博发布3删除按钮 在线会员列表1动态创建 在线会员列表2内容写活 在线会员列表3快捷操作 许愿墙1动态创建 许愿墙2内容写活 顶级对象 窗机事件 打开窗口 延时定时器 间歇定时器 短信验证 location对象 定时跳转 三个对象 移动盒子 移动广告1 移动广告2 日期对象 日期对象方法 电子表 机械表 机械表完善 基本包装对象 包装对象的歧义 字符串的截取方法 字符串的位置方法 字符串的替换方法 字符串的字符方法 字符串练习 替换类名回顾 替换类名改进 查找类名 查找类名改进 字符串的其他方法 声明提升 变量作用域 没有块级作用域 作用域链 面试题（一） 面试题（二） 面试题（三） 面试题（四） 面试题（五） 许愿墙3添加功能 许愿墙4兼容封装 选好友5innerHTML JavaScript特效 简单轮播图1 简单轮播图2 左右焦点图1 左右焦点图2 无缝滚动原理 完整轮播图1动态生成结构 完整轮播图2鼠标经过按钮 完整轮播图3鼠标点击箭头 完整轮播图4添加自动播放 完整轮播图5最终完善 放大镜特效1鼠标经过显示盒子 放大镜特效2遮罩跟随鼠标坐标 放大镜特效3限制遮罩移动范围 放大镜特效4按照比例移动大图 添加事件的新方式 移除事件的新方式 第三个参数 事件阶段 添加事件的兼容方式 移除事件的兼容方式 正则简介 预定义类 基础语法补充 字符类 验证密码强度 边界 量词 括号总结 验证座机 验证姓名 offsetHeight和style.height的区别 offsetHeight和offsetWdith的构成 offsetParent offsetLeft的构成 offsetLeft和style.left的不同 Math对象的常用方法 体验页面动画 动画函数封装 动画函数改进 scrollHeight和scrollWidth scrollTop和scrollLeft 页面滚动坐标 封装自己的scroll函数 scroll简化 固定导航 体验缓动动画 缓动动画改进 封装缓动函数 筋斗云案例 访问属性的两种方式 获取计算后样式的兼容函数 封装缓动框架1任意数值属性 封装缓动框架2多个数值属性 封装缓动框架3升级版定时器 手风琴特效 封装缓动框架4添加回调函数 开机动画 封装缓动框架5透明度和层级 clientWidth和clientHeight clientTop和clientLeft 三大系列总结 网页可视区宽高 封装自己的client函数 体会响应式布局原理 数组复习 旋转木马1显示隐藏箭头 旋转木马2设置图片位置 旋转木马3点击按钮旋转 旋转木马4添加节流阀 事件对象 事件对象的兼容写法 三个重要坐标 鼠标在页面中的坐标 鼠标跟随案例 计算鼠标在盒子中的坐标 可拖拽特效1跟着鼠标 可拖拽特效2最终完善 滚动条特效1计算高度 滚动条特效2移动拖动条 滚动条特效3限制移动范围 滚动条特效4按照比例移动 事件冒泡 阻止冒泡 解决鼠标离开的问题 阻止冒泡的兼容写法 事件目标 登录模态框 事件对象的兼容处理 事件对象兼容处理的进一步封装 鼠标事件和键盘事件 按回车键切换文本框 按esc关闭 表单事件 完整版表单验证（1） 完整版表单验证（2） 完整版表单验证（3） 封装trim方法 递归 递归案例