Web前端开发JavaScript基本功 实现动画效果

课程详情

课程目录

第一章 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
    三元运算符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方法
    递归
    递归案例