博学谷 > 优质课 > 前端与移动开发就业课(内部培训专用)

前端与移动开发就业课(内部培训专用)

前端与移动开发就业课(内部培训专用)

大前端时代来临,便捷、简单、成本更低、更炫酷震撼、更佳客户体验的Web前端技术将占领各种客户端,取代APP、传统Web等形式,成为下一个时代的宠儿。

主讲:前端高级讲师 | 课程时长:300课时 | 学习人数:3人 | 难度: 基础

¥14980.00 ¥16980.00

立即报名

阶段 一 :前端开发基础

第 一 章:HTML/HTML5

1-1 浏览器介绍

1-1-1 认识网页
1-1-2 常见浏览器
1-1-3 浏览器内核
1-1-4 web标准

1-2 HTML基本结构

1-2-1 HTML初识
1-2-2 HTML骨架
1-2-3 我的第一个页面及其标签简介
1-2-4 猪八戒版骨架记忆法

1-3 HTML常用标签

1-3-1 什么是标签及其分类
1-3-2 标签嵌套和并列关系
1-3-3 简单小测验
1-3-4 开发工具sublime
1-3-5 sublime生成html骨架
1-3-6 doctype文档类型
1-3-7 字符集简介
1-3-8 标签的语义化及其标题标签
1-3-9 段落标签和水平线标签
1-3-10 课堂案例-新闻页面
1-3-11 换行和div span标签
1-3-12 文本格式化标签
1-3-13 标签属性
1-3-14 图像标签
1-3-15 链接标签
1-3-16 锚点定位
1-3-17 base标签
1-3-18 特殊字符
1-3-19 注释标签

1-4 相对路径

1-4-1 相对路径(一)
1-4-2 相对路径(二)

1-5 列表

1-5-1 无序列表的使用
1-5-2 无序列表注意事项
1-5-3 有序列表
1-5-4 四大名著案例
1-5-5 自定义列表
1-5-6 第一天HTML总结

1-6 表格

1-6-1 认识表格
1-6-2 表格的注意事项
1-6-3 表格属性
1-6-4 表头标签
1-6-5 表格结构
1-6-6 浏览器审查HTML标签元素
1-6-7 表格标题标签
1-6-8 合并单元格
1-6-9 合并单元格复习

1-7 表单和表单控件

1-7-1 表单的作用
1-7-2 文本框和密码框
1-7-3 单选按钮和复选按钮
1-7-4 默认选中表单属性
1-7-5 input按钮组
1-7-6 最多字符数和文本值
1-7-7 label标签
1-7-8 文本域
1-7-9 下拉菜单
1-7-10 表单域

1-8 HTML5 新增标签和属性

1-8-1 html5 文档类型和字符集
1-8-2 查看手册及其新增标签
1-8-3 datalist标签
1-8-4 fieldset元素
1-8-5 HTML5 新增input 表单(一)
1-8-6 HTML5 新增input 表单(二)
1-8-7 新增占位符焦点多选属性
1-8-8 autocomplete属性
1-8-9 内容不能为空和获得焦点属性
1-8-10 表单综合案例-学生档案
1-8-11 embed引入网上视频
1-8-12 播放音频audio
1-8-13 播放视频video

第 二 章:CSS/CSS3

2-1 CSS介绍

2-1-1 CSS产生的原因
2-1-2 CSS网页的美容师
2-1-3 体会CSS样式
2-1-4 CSS样式规则

2-2 font字体

2-2-1 字体样式字号和字体
2-2-2 字体字号常用技巧
2-2-3 unicode字体
2-2-4 CSS注释
2-2-5 字体加粗
2-2-6 字体倾斜
2-2-7 字体综合设定

2-3 CSS基本选择器

2-3-1 调试工具chrome使用
2-3-2 标签选择器
2-3-3 体会类选择器
2-3-4 CSS命名规范
2-3-5 谷歌课堂案例
2-3-6 多类名选择器
2-3-7 ID选择器
2-3-8 id选择器和类选择器的区别
2-3-9 通配符选择器
2-3-10 链接伪类选择器的使用
2-3-11 链接伪类的简写方式
2-3-12 结构伪类选择器(一)
2-3-13 结构伪类选择器(二)
2-3-14 结构伪类选择器(三)
2-3-15 目标伪类选择器

2-4 CSS外观样式及应用

2-4-1 CSS颜色
2-4-2 行高对齐和首行缩进
2-4-3 字间距和单词间距
2-4-4 颜色半透明
2-4-5 文字阴影初识
2-4-6 sublime快捷方式
2-4-7 综合案例(一)
2-4-8 综合案例(二)
2-4-9 综合案例(三)

2-5 CSS样式表

2-5-1 内部样式表
2-5-2 行内样式表
2-5-3 外部样式表
2-5-4 三种样式表总结

2-6 标签显示模式

2-6-1 块级标签显示模式
2-6-2 行内标签显示模式
2-6-3 行内块元素
2-6-4 显示模式转换

2-7 CSS复合选择器

2-7-1 交集选择器
2-7-2 并集选择器
2-7-3 后代选择器
2-7-4 子元素选择器
2-7-5 课堂练习-测试选择器
2-7-6 属性选择器(一)
2-7-7 属性选择器(二)
2-7-8 伪元素选择器(一)
2-7-9 伪元素选择器(二)
2-7-10 CSS书写规范

2-8 CSS背景及应用

2-8-1 背景颜色图片及其平铺
2-8-2 背景位置(一)
2-8-3 背景位置(二)
2-8-4 魔兽背景图片
2-8-5 背景附着(固定)
2-8-6 背景简写
2-8-7 背景半透明
2-8-8 背景缩放(一)
2-8-9 背景缩放(二)
2-8-10 多背景图片
2-8-11 凹凸文字效果
2-8-12 王者荣耀导航栏(一)
2-8-13 王者荣耀导航栏(二)

2-9 CSS三大特性

2-9-1 CSS层叠性
2-9-2 CSS继承性
2-9-3 CSS优先级
2-9-4 权重叠加
2-9-5 继承的权重为0
2-9-6 css权重6道精华题
2-9-7 优先级总结

2-10 CSS盒模型及应用

2-10-1 看透网页布局本质
2-10-2 认识盒子模型组成
2-10-3 盒子边框
2-10-4 边框综合写法(一)
2-10-5 边框综合写法(二)
2-10-6 合并细线表格
2-10-7 圆角矩形
2-10-8 盒子内边距
2-10-9 fireworks测量工具
2-10-10 新浪导航(一)
2-10-11 新浪导航栏(二)
2-10-12 外边距以及盒子居中对齐
2-10-13 文字盒子居中图片和背景区别
2-10-14 清除内外边距
2-10-15 行内元素上下内外边距的问题
2-10-16 外边距合并(一)
2-10-17 外边距合并(二)
2-10-18 盒子的计算尺寸
2-10-19 学会计算盒子尺寸(重点)
2-10-20 padding不影响盒子大小的情况
2-10-21 搜索趣图(一)分析
2-10-22 搜索趣图(二)大盒子
2-10-23 搜索趣图(三)标题
2-10-24 搜索趣图(四)
2-10-25 搜索趣图(五)
2-10-26 盒子模型布局稳定性
2-10-27 CSS3 盒模型
2-10-28 盒子阴影
2-10-29 水晶图片案例

2-11 浮动及应用

2-11-1 文档流介绍
2-11-2 浮动是用来做文字环绕效果的
2-11-3 体会浮动
2-11-4 浮动就是漂浮的意思
2-11-5 浮动首先需要添加标准流父级
2-11-6 浮动特性对齐父盒子
2-11-7 浮动特性盒子排列
2-11-8 浮动影响盒子显示模式
2-11-9 浮动总结
2-11-10 版心和布局流程
2-11-11 一列固定宽度且居中
2-11-12 两列左窄右宽型
2-11-13 通栏平均分布型

2-12 清除浮动

2-12-1 清除浮动的本质
2-12-2 额外标签法
2-12-3 父级添加overflow方法
2-12-4 after伪元素清除浮动
2-12-5 双伪元素清除浮动

2-13 photoshop基本操作

2-13-1 学习photoshop目的
2-13-2 ps界面简介
2-13-3 ps基本操作
2-13-4 移动工具和缩放变形
2-13-5 水果自行车案例
2-13-6 图层的基本操作
2-13-7 图层编组操作
2-13-8 图层的移动位置
2-13-9 图层合并和透明
2-13-10 矩形椭圆选区工具
2-13-11 颜色填充-米奇效果
2-13-12 多边形套索工具
2-13-13 磁性套索工具
2-13-14 魔棒工具
2-13-15 选区布尔运算
2-13-16 梦幻星球案例
2-13-17 钢笔工具
2-13-18 文字工具和吸管工具
2-13-19 切图方法1-手动划片
2-13-20 切图方法2-利用图层切图
2-13-21 清除全部切片和辅助线的方法
2-13-22 切图方法3-辅助线切图
2-13-23 切图方法4-等份数划分法
2-13-24 cutterman插件安装
2-13-25 cutterman插件使用

2-14 学成网案例上

2-14-1 学成网准备工作
2-14-2 学成网案例分析
2-14-3 学成网头部开始
2-14-4 调整头部的宽度
2-14-5 logo和navbar部分开始
2-14-6 logo和navbar结束
2-14-7 search开始
2-14-8 search结束
2-14-9 个人中心制作
2-14-10 banner制作开始
2-14-11 给banner添加背景图片
2-14-12 侧边栏结构搭建
2-14-13 侧边栏制作结束
2-14-14 小课表上
2-14-15 小课表中
2-14-16 小课表下
2-14-17 精品推荐上
2-14-18 精品推荐下

2-15 CSS四种定位及应用

2-15-1 为什么学习定位
2-15-2 定位属性
2-15-3 静态定位(1)
2-15-4 相对定位
2-15-5 绝对定位脱标
2-15-6 父级没有定位
2-15-7 父级有定位
2-15-8 何为子绝父相
2-15-9 定位练习-哈根达斯
2-15-10 绝对定位水平垂直居中
2-15-11 淘宝焦点图分析
2-15-12 淘宝轮播图上
2-15-13 淘宝轮播图中
2-15-14 淘宝轮播图下
2-15-15 淘宝轮播图权重问题
2-15-16 固定定位
2-15-17 仿新浪固定头部和广告
2-15-18 叠加次序
2-15-19 定位总结
2-15-20 固定绝对定位模式转换

2-16 学成网案例下

2-16-1 display和visibility使用
2-16-2 鼠标经过显示二维码
2-16-3 overflow属性
2-16-4 学成在线页面修复工作
2-16-5 小圆点制作上
2-16-6 小圆点制作下
2-16-7 精品推荐大模块头部开始
2-16-8 精品推荐大模块头部结束
2-16-9 精品推荐大模块主体开始
2-16-10 精品推荐大模块li结束
2-16-11 精品推荐大模块结束
2-16-12 底部制作清除浮动
2-16-13 底部左侧开始
2-16-14 底部左侧完成
2-16-15 底部右侧完成

2-17 CSS溢出文字隐藏

2-17-1 鼠标样式
2-17-2 取消轮廓线
2-17-3 防止拖拽文本域
2-17-4 行内块和文字对齐
2-17-5 去除图片底测缝隙
2-17-6 word-break
2-17-7 white-space
2-17-8 超出的部分省略号显示

2-18 CSS精灵技术

2-18-1 CSS精灵技术产生的背景
2-18-2 css精灵技术的本质
2-18-3 css精灵技术的使用
2-18-4 拼出自己的名字
2-18-5 王者荣耀导航栏
2-18-6 PS制作精灵图
2-18-7 运用制作精灵图

2-19 字体图标

2-19-1 字体图标的优点
2-19-2 svg格式上传转换字体格式
2-19-3 下载字体图标
2-19-4 复制需要的字体文件
2-19-5 字体图标html文件使用
2-19-6 追加新图标字体的方法

2-20 滑动门技术及应用

2-20-1 滑动门技术原因
2-20-2 滑动门实现原理
2-20-3 滑动门技术实现
2-20-4 微信导航栏(一)
2-20-5 微信导航栏(二)
2-20-6 伪元素的本质
2-20-7 鼠标经过显示边框
2-20-8 认识过渡效果
2-20-9 仿照小米效果

2-21 CSS3新增2D和3D属性及应用

2-21-1 2D变形-移动
2-21-2 定位的盒子居中对齐完美写法
2-21-3 2D变形-缩放
2-21-4 2D变形-旋转
2-21-5 设置变形中心点
2-21-6 旋转的楚乔传
2-21-7 2D变形-倾斜
2-21-8 左手法则
2-21-9 rotateXYZ
2-21-10 体会透视
2-21-11 3D变形-移动
2-21-12 translate3d
2-21-13 开门大吉上
2-21-14 开门大吉下
2-21-15 翻转的图片上
2-21-16 翻转的图片下
2-21-17 体会动画
2-21-18 多组动画
2-21-19 奔跑的小车
2-21-20 无缝滚动上
2-21-21 无缝滚动下

2-22 CSS3伸缩布局及应用

2-22-1 传统布局三等份
2-22-2 伸缩布局三等份
2-22-3 伸缩布局固定宽度
2-22-4 伸缩布局排列方式
2-22-5 携程网准备工作
2-22-6 携程网头部
2-22-7 携程网nav部分上
2-22-8 携程网nav部分中
2-22-9 携程网nav部分下
2-22-10 携程网导航结束
2-22-11 携程网over
2-22-12 justify-content属性
2-22-13 align-items属性
2-22-14 flex-wrap属性
2-22-15 align-content属性
2-22-16 order属性

2-23 BFC

2-23-1 认识BFC
2-23-2 块级元素具有BFC条件
2-23-3 块级元素触发BFC的属性
2-23-4 BFC作用-清除内部浮动
2-23-5 BFC作用-解决外边距合并
2-23-6 BFC作用及其总结

2-24 CSS补充知识

2-24-1 渐进增强和优雅降级
2-24-2 浏览器前缀
2-24-3 背景渐变上
2-24-4 背景渐变下
2-24-5 CSS W3C 统一的验证工具
2-24-6 CSS 压缩工具
2-24-7 认识 preserve-3d
2-24-8 旋转轮播图结构制作
2-24-9 旋转轮播图上
2-24-10 旋转轮播图下

2-25 CSS布局案例

2-25-1 靶心的制作
2-25-2 圣杯布局和双飞翼布局

2-26 CSS3小黄人案例

2-26-1 小黄人制作思路
2-26-2 小黄人的结构制作
2-26-3 小黄人头发的制作
2-26-4 小黄人胳臂的制作
2-26-5 小黄人的腿脚
2-26-6 小黄人眼睛框的制作
2-26-7 眼睛和嘴巴的制作
2-26-8 裤子的制作
2-26-9 小黄人肩带的制作
2-26-10 头发和眼睛的动画制作

2-27 文本溢出

2-27-1 单行文本溢出隐藏显示省略号
2-27-2 webkit的css扩展方法实现多行文本溢出隐藏,显示省略号
2-27-3 多行文本溢出隐藏,显示省略号的通用方法

2-28 盒子水平和垂直居中

2-28-1 垂直居中的三种方法
2-28-2 水平居中的四种方法

第 三 章:京东电商项目

3-1 京东网页头部和顶部实现

3-1-1 京东项目介绍
3-1-2 京东项目目录准备
3-1-3 京东项目添加ico图标
3-1-4 自己制作ico图标
3-1-5 三大标签优化
3-1-6 火狐浏览器截图
3-1-7 京东项目头部制作
3-1-8 京东项目快速导航栏1
3-1-9 京东项目快速导航栏2
3-1-10 京东项目快速导航栏3
3-1-11 下载京东字体图标
3-1-12 使用京东字体图标
3-1-13 手机京东部分制作
3-1-14 logo的制作
3-1-15 搜索框制作上
3-1-16 搜索框制作下-追加字体图标
3-1-17 购物车模块制作
3-1-18 热点关键词的制作
3-1-19 小导航栏上
3-1-20 小导航栏下
3-1-21 超级日部分制作
3-1-22 页面底部服务开始
3-1-23 底部服务中
3-1-24 底部服务下
3-1-25 帮助模块左侧制作
3-1-26 帮助模块右侧制作
3-1-27 版权模块上
3-1-28 版权模块结束

3-2 京东网页中间部分实现

3-2-1 中间分类部分的准备工作
3-2-2 中间分类部分模块划分
3-2-3 左侧分类上
3-2-4 左侧分类下
3-2-5 中间banner部分上
3-2-6 京东轮播图布局
3-2-7 右侧盒子模块划分
3-2-8 登录模块制作上
3-2-9 登录模块制作头像部分
3-2-10 登录模块福利会员制作
3-2-11 促销公告制作
3-2-12 促销公告小红线的做法
3-2-13 促销广告部分结束
3-2-14 服务扩展模块li的制作
3-2-15 服务扩展模块完成
3-2-16 广告特效结构制作
3-2-17 广告特效部分制作
3-2-18 京东项目动态功能预展示

阶段 二 :前端开发基本功

第 一 章:JavaScript基础语法

1-1 JavaScript介绍

1-1-1 网页、网站和应用程序
1-1-2 JavaScript的强大
1-1-3 JavaScript最初的目的
1-1-4 JavaScript现在的意义
1-1-5 JavaScript和HTML、CSS的区别,以及组成
1-1-6 JavaScript初体验
1-1-7 计算机组成

1-2 JavaScript变量

1-2-1 什么是变量
1-2-2 变量的使用
1-2-3 变量命名规则和规范
1-2-4 交换两个变量

1-3 JavaScript数据类型

1-3-1 数据类型-Number
1-3-2 String类型
1-3-3 Undefined和Null
1-3-4 typeof和注释
1-3-5 转换成字符串类型
1-3-6 转换成数值类型1
1-3-7 转换成数值类型2
1-3-8 转换成布尔类型

1-4 JavaScript操作符

1-4-1 数学运算符
1-4-2 一元运算符讲解
1-4-3 逻辑运算符
1-4-4 关系运算符
1-4-5 赋值运算符和运算符的优先级

1-5 JavaScript流程控制及应用

1-5-1 表达式和语句
1-5-2 流程控制
1-5-3 分支结构
1-5-4 分支结构补充和作业
1-5-5 三元运算符讲解
1-5-6 switch
1-5-7 成绩转换案例
1-5-8 布尔类型的隐式转换
1-5-9 while循环
1-5-10 while案例
1-5-11 dowhile
1-5-12 dowhile案例
1-5-13 for循环
1-5-14 循环案例1
1-5-15 打印正方形
1-5-16 打印三角形
1-5-17 打印99乘法表
1-5-18 循环的作业
1-5-19 break和continue
1-5-20 调试
1-5-21 for作业1
1-5-22 for作业2

1-6 JavaScript数组及应用

1-6-1 数组1
1-6-2 数组2
1-6-3 数组3
1-6-4 求一组数的和和平均值
1-6-5 求最大值和最小值-剪裁
1-6-6 分隔符
1-6-7 筛选数组
1-6-8 翻转数组
1-6-9 冒泡排序

1-7 JavaScript函数及应用

1-7-1 为什么要有函数
1-7-2 函数的参数
1-7-3 函数的参数案例-剪裁
1-7-4 函数的返回值
1-7-5 arguments
1-7-6 函数案例1-剪裁
1-7-7 函数案例2
1-7-8 函数案例3
1-7-9 函数案例4
1-7-10 函数其它概念
1-7-11 代码规范
1-7-12 作用域
1-7-13 作用域链
1-7-14 预解析
1-7-15 对象概念

1-8 JavaScript对象

1-8-1 对象之字面量
1-8-2 创建对象的方式
1-8-3 new关键字的执行过程
1-8-4 this
1-8-5 遍历对象和删除对象的属性

1-9 JavaScript简单类型和复杂类型

1-9-1 回顾数据类型
1-9-2 简单类型在内存中的存储
1-9-3 复杂类型在内存中的存储
1-9-4 简单类型作为函数的参数
1-9-5 复杂类型作为函数的参数
1-9-6 复杂类型作为函数的参数案例1
1-9-7 复杂类型作为函数的参数案例2

1-10 JavaScript内置对象

1-10-1 内置对象引子
1-10-2 MDN的使用
1-10-3 Math对象-剪裁
1-10-4 Math案例1
1-10-5 Math案例2
1-10-6 静态成员和实例成员
1-10-7 Date对象
1-10-8 Date的常用方法
1-10-9 格式化日期
1-10-10 计算时间差
1-10-11 数组对象

1-11 JavaScript数组常用方法及应用

1-11-1 常用方法1(数组)
1-11-2 sort方法
1-11-3 模拟sort内部实现
1-11-4 常用方法2和清空数组
1-11-5 数组和对象案例1

1-12 JavaScript字符串常用方法

1-12-1 数组和对象案例2
1-12-2 数组去重
1-12-3 基本包装类型
1-12-4 字符串的不可变
1-12-5 字符串的方法介绍
1-12-6 字符串案例1
1-12-7 字符串替换
1-12-8 split方法
1-12-9 次数最多的字符
1-12-10 获取url中的参数
1-12-11 其它方法

第 二 章:WebAPI

2-1 DOM介绍

2-1-1 WebAPI的概念
2-1-2 JavaScript组成
2-1-3 DOM相关概念

2-2 获取页面元素

2-2-1 根据id获取元素-剪裁
2-2-2 getElementsByTagName1
2-2-3 getElementsByTagName2
2-2-4 获取元素的其它方式

2-3 注册事件及应用

2-3-1 注册事件
2-3-2 点击按钮切换图片
2-3-3 非表单元素的属性
2-3-4 点击按钮div显示隐藏
2-3-5 取消a标签的默认行为
2-3-6 美女相册-注册事件
2-3-7 美女相册-设置图片和内容
2-3-8 innerHTML和innerText
2-3-9 innerText和textContent
2-3-10 innerText的兼容性处理
2-3-11 表单元素的属性
2-3-12 给文本框赋值
2-3-13 检测用户名和密码
2-3-14 设置下拉框中的选中项
2-3-15 搜索文本框
2-3-16 全选反选案例1
2-3-17 全选反选案例2
2-3-18 全选反选3
2-3-19 自定义属性操作

2-4 样式操作及应用

2-4-1 样式操作1
2-4-2 样式操作2
2-4-3 开关灯
2-4-4 显示隐藏二维码案例
2-4-5 高亮显示正在输入的文本框
2-4-6 设置大小和位置
2-4-7 隔行变色和高亮显示
2-4-8 tab栏切换案例1
2-4-9 tab栏切换案例2
2-4-10 总结
2-4-11 模拟DOM结构1
2-4-12 模拟DOM结构2

2-5 节点介绍及应用

2-5-1 父子节点
2-5-2 隔行变色案例
2-5-3 第一个和最后一个子元素
2-5-4 菜单
2-5-5 兄弟节点

2-6 动态创建元素及应用

2-6-1 动态创建元素1
2-6-2 动态创建元素2
2-6-3 动态创建元素3
2-6-4 动态创建列表0
2-6-5 动态创建表格1
2-6-6 动态创建表格2
2-6-7 删除行
2-6-8 动态创建元素的性能对比
2-6-9 常用元素操作的方法
2-6-10 选择水果1
2-6-11 选择水果2
2-6-12 innerHTML的问题

2-7 事件详解及应用

2-7-1 addEventListener
2-7-2 attachEvent
2-7-3 处理兼容性问题
2-7-4 移除事件
2-7-5 移除事件兼容性处理
2-7-6 事件的三个阶段
2-7-7 事件委托
2-7-8 事件对象1
2-7-9 事件对象2
2-7-10 事件对象3
2-7-11 跟着鼠标飞的图片-剪裁
2-7-12 获取页面滚动的距离
2-7-13 处理pageXpageY的兼容性
2-7-14 获取鼠标在页面上的位置
2-7-15 取消默认行为的执行和阻止冒泡
2-7-16 只能数组数字的文本框-剪裁

2-8 BOM介绍及应用

2-8-1 BOM
2-8-2 对话框
2-8-3 js中的加载讲解
2-8-4 setTimeout讲解
2-8-5 删除提示讲解
2-8-6 setInterval讲解
2-8-7 倒计时
2-8-8 简单动画1
2-8-9 location
2-8-10 URL的组成
2-8-11 history
2-8-12 userAgent

2-9 offset、client、scroll三大家族介绍及应用

2-9-1 offset系列属性
2-9-2 client系列属性
2-9-3 scroll系列
2-9-4 拖拽案例1
2-9-5 拖拽案例2
2-9-6 弹出登录窗口1
2-9-7 弹出登录窗口2
2-9-8 放大镜1
2-9-9 放大镜2
2-9-10 放大镜3
2-9-11 放大镜的兼容性处理
2-9-12 mouseenter和mouseover的区别
2-9-13 模拟滚动条1
2-9-14 模拟滚动条2
2-9-15 模拟滚动条3
2-9-16 简单动画2
2-9-17 封装动画函数

2-10 动画函数封装及应用

2-10-1 动画-让每个元素记录定时器
2-10-2 动画-从800到400
2-10-3 解决动画的问题
2-10-4 animate
2-10-5 轮播图-动态生成序号
2-10-6 轮播图-点击序号
2-10-7 轮播图-显示箭头1
2-10-8 轮播图-上一张下一张
2-10-9 轮播图-bug
2-10-10 下一张无缝滚动
2-10-11 上一张无缝滚动
2-10-12 自动播放
2-10-13 轮播图复习
2-10-14 回到顶部1
2-10-15 回到顶部2
2-10-16 京东首页-tab栏1
2-10-17 京东首页-tab栏2
2-10-18 京东首页-tab栏3

2-11 迷你微信聊天案例

2-11-1 切换聊天用户头像
2-11-2 发送聊天内容展示在聊天区域内
2-11-3 聊天内容的分区显示
2-11-4 清空文本框的内容

2-12 瀑布流案例

2-12-1 原理和样式结构
2-12-2 获取相关变量值
2-12-3 布局方法的实现
2-12-4 滚动加载数据

2-13 像素鸟案例

2-13-1 案例分析和布局
2-13-2 小鸟的运动
2-13-3 创建管道
2-13-4 管道的运动

2-14 飞机大战案例

2-14-1 案例介绍和结构样式
2-14-2 鼠标跟随
2-14-3 创建子弹
2-14-4 子弹运动起来
2-14-5 敌机的创建与运动
2-14-6 子弹和敌机相遇时都消失

第 三 章:JavaScript高级

3-1 JavaScript回顾

3-1-1 介绍阶段目标
3-1-2 回顾-JavaScript特点
3-1-3 回顾-JavaScript组成
3-1-4 浏览器的组成
3-1-5 对象介绍

3-2 面向对象介绍及应用

3-2-1 面向对象介绍
3-2-2 演示面向对象的开发过程
3-2-3 创建对象
3-2-4 构造函数
3-2-5 10-静态成员和实例成员
3-2-6 构造函数的原型
3-2-7 对象的原型
3-2-8 三角关系
3-2-9 原型链
3-2-10 属性查找规则
3-2-11 注意点
3-2-12 扩展内置对象
3-2-13 随机方块-工具对象
3-2-14 随机方块-方块对象
3-2-15 随机方块-随机生成坐标
3-2-16 随机方块-调用

3-3 贪吃蛇项目

3-3-1 贪吃蛇项目介绍
3-3-2 创建食物对象
3-3-3 随机生成食物
3-3-4 删除食物
3-3-5 自调用函数,避免命名冲突
3-3-6 蛇对象
3-3-7 游戏对象
3-3-8 蛇的move方法
3-3-9 删除蛇
3-3-10 蛇移动
3-3-11 键盘控制蛇的移动
3-3-12 蛇吃食物
3-3-13 main执行代码
3-3-14 bind
3-3-15 自调用函数的问题
3-3-16 压缩代码
3-3-17 自调用函数的参数

3-4 继承和函数进阶

3-4-1 对象之间的继承
3-4-2 对象拷贝的应用
3-4-3 原型继承
3-4-4 call
3-4-5 借用构造函数
3-4-6 组合继承
3-4-7 继承的原型图
3-4-8 贪吃蛇-继承
3-4-9 函数声明和函数表达式
3-4-10 函数也是对象
3-4-11 函数的调用形式和this的指向
3-4-12 call、apply和bind
3-4-13 call的应用
3-4-14 apply的应用
3-4-15 bind的应用
3-4-16 函数的其它成员
3-4-17 高阶函数-函数作为参数
3-4-18 sort排序
3-4-19 函数作为返回值

3-5 闭包

3-5-1 闭包
3-5-2 闭包演示
3-5-3 贪吃蛇中的闭包
3-5-4 闭包案例
3-5-5 定时器是如何工作的
3-5-6 闭包案例1
3-5-7 闭包案例2
3-5-8 代码思考

3-6 递归和拷贝

3-6-1 递归讲解
3-6-2 递归案例讲解
3-6-3 斐波那契数列
3-6-4 浅拷贝
3-6-5 深拷贝
3-6-6 遍历DOM树1
3-6-7 遍历DOM树2

3-7 正则表达式及应用

3-7-1 正则表达式演示
3-7-2 正则表达式介绍
3-7-3 元字符1
3-7-4 元字符开头和结尾
3-7-5 限定符1
3-7-6 限定符2
3-7-7 其它特殊字符
3-7-8 正则表达式练习1
3-7-9 正则表达式练习2
3-7-10 正则对象
3-7-11 文本框的onchange事件
3-7-12 表单验证-QQ号
3-7-13 表单验证-EMail
3-7-14 表单验证-封装
3-7-15 exec
3-7-16 提取
3-7-17 分组提取
3-7-18 split
3-7-19 替换
3-7-20 贪婪模式和非贪婪模式

3-8 表格排序案例

3-8-1 表格排序案例介绍
3-8-2 解决排序
3-8-3 案例结构
3-8-4 面向过程完成案例
3-8-5 面向对象完成案例

第 四 章:jQuery

4-1 jQuery介绍和体验

4-1-1 jQuery开发视频-课前介绍
4-1-2 jQuery开发视频-重点内容介绍
4-1-3 jQuery开发视频-什么是JavaScript框架库
4-1-4 jQuery开发视频-什么是jQuery
4-1-5 jQuery开发视频-为什么学习jQuery及好处
4-1-6 jQuery开发视频-jQuery的发明者和jQuery的感觉
4-1-7 jQuery开发-小节jQuery
4-1-8 jQuery开发-快速体验jQuery
4-1-9 jQuery开发视频-jQuery中的顶级对象
4-1-10 jQuery开发视频-页面的加载事件
4-1-11 jQuery开发视频-关于引入jQuery文件的注意问题
4-1-12 jQuery开发视频-jQuery对象和DOM对象互转
4-1-13 jQuery开发视频-再次体验jQuery代码的便捷性

4-2 jQuery选择器及应用

4-2-1 jQuery开发视频-jQuery中的选择器
4-2-2 jQuery开发视频-id选择器案例
4-2-3 jQuery开发视频-标签选择器案例
4-2-4 jQuery开发视频-类选择器案例
4-2-5 jQuery开发视频-标签+类样式选择器
4-2-6 jQuery开发视频-多条件选择器
4-2-7 jQuery开发视频-常见的几个方法上
4-2-8 jQuery开发视频-常见的几个方法下
4-2-9 jQuery开发视频-层次选择器
4-2-10 jQuery开发视频-层次选择器案例
4-2-11 jQuery开发视频-层次选择器案例下拉菜单
4-2-12 jQuery开发视频-奇数偶数选择器案例
4-2-13 jQuery开发视频-索引选择器
4-2-14 jQuery开发视频-精品展示案例
4-2-15 jQuery开发视频-突出显示案例
4-2-16 jQuery开发视频-好友面板切换
4-2-17 jQuery开发视频-手风琴案例

4-3 jQuery样式操作

4-3-1 jQuery开发视频-元素样式设置的不同写法
4-3-2 jQuery开发视频-添加和移除类样式操作
4-3-3 jQuery开发视频-网页开关灯的案例
4-3-4 jQuery开发视频-判断元素是否应用了类样式
4-3-5 jQuery开发视频-产品切换案例
4-3-6 jQuery开发视频-总结元素样式设置的方法

4-4 jQuery链式编程

4-4-1 jQuery开发视频-链式编程
4-4-2 jQuery开发视频-链式编程案例1
4-4-3 jQuery开发视频-链式编程案例2
4-4-4 jQuery开发视频-获取兄弟元素的几个方法
4-4-5 jQuery开发视频-获取兄弟元素方法的案例

4-5 jQuery动画

4-5-1 jQuery中的动画方法
4-5-2 hide和show方法中的第二个参数
4-5-3 jQuery开发视频-动画案例1
4-5-4 jQuery开发视频-动画案例2
4-5-5 jQuery开发视频-其他动画方法1
4-5-6 jQuery开发视频-其他动画方法2
4-5-7 jQuery开发视频-animate动画方法介绍
4-5-8 jQuery开发视频-stop方法解决问题

4-6 jQuery动态创建元素及应用

4-6-1 jQuery开发视频-动态创建元素
4-6-2 jQuery开发视频-添加元素的方法
4-6-3 jQuery开发视频-权限选择的案例
4-6-4 jQuery开发视频-添加元素的另一个方法
4-6-5 jQuery开发视频-另一种创建元素的方式
4-6-6 jQuery开发视频-动态创建表格
4-6-7 jQuery开发视频-移除内容和克隆方法
4-6-8 jQuery开发视频-关于value属性设置和获取
4-6-9 jQuery开发视频-选中下拉框选项
4-6-10 jQuery开发视频-自定义属性和值的设置和获取
4-6-11 jQuery开发视频-复选框选中问题
4-6-12 jQuery开发视频-全选和全不选
4-6-13 jQuery开发视频-全选和反选的案例
4-6-14 jQuery开发视频-设置和获取元素的宽和高
4-6-15 jQuery开发视频-获取和设置offset中的left和top
4-6-16 jQuery开发视频-关于卷曲出去的距离的案例

4-7 jQuery事件绑定和解绑

4-7-1 jQuery开发视频-为元素绑定事件
4-7-2 jQuery开发视频-另一种绑定事件方式
4-7-3 jQuery开发视频-on绑定事件及总结
4-7-4 jQuery开发视频-绑定事件案例动态添加行
4-7-5 jQuery开发视频-解绑事件1
4-7-6 jQuery开发视频-解绑事件2
4-7-7 jQuery开发视频-解除绑定事件细节问题
4-7-8 jQuery开发视频-触发事件
4-7-9 jQuery开发视频-触发事件的区别
4-7-10 jQuery开发视频-事件对象
4-7-11 jQuery开发视频-按键改变背景颜色案例
4-7-12 jQuery开发视频-事件冒泡及取消事件冒泡和取消浏览器默认事件
4-7-13 jQuery开发视频-链式编程基本原理
4-7-14 jQuery开发视频-评分案例
4-7-15 jQuery开发视频-each方法的使用
4-7-16 jQuery开发视频-多库共存

4-8 jQuery插件

4-8-1 jQuery开发视频-插件的演示1
4-8-2 jQuery开发视频-插件的演示2
4-8-3 jQuery开发视频-插件的样式
4-8-4 jQuery开发视频-自己做简单的插件
4-8-5 jQuery开发视频-jQueryUi介绍及下载
4-8-6 jQuery开发视频-jQueryUI小功能演示1
4-8-7 jQuery开发视频-jQueryUi小功能演示2

阶段 三 :前后端交互

第 一 章:Ajax基础知识

1-1 Ajax-基础知识铺垫

1-1-1 Ajax-基础知识铺垫-初识ajax
1-1-2 Ajax-基础知识铺垫-客户端与服务器
1-1-3 Ajax-基础知识铺垫-网络相关概念
1-1-4 Ajax-基础知识铺垫-通信协议理解
1-1-5 Ajax-基础知识铺垫-服务器环境wamp安装
1-1-6 Ajax-基础知识铺垫-配置访问权限与网站根路径
1-1-7 Ajax-基础知识铺垫-虚拟主机配置
1-1-8 Ajax-基础知识铺垫-静态网站
1-1-9 Ajax-基础知识铺垫-动态网站

1-2 php基础语法

1-2-1 Ajax-php基础语法-1-初识php
1-2-2 Ajax-php基础语法-2-变量声明与字符串拼接
1-2-3 Ajax-php基础语法-3-初识数组
1-2-4 Ajax-php基础语法-4-二维数组
1-2-5 Ajax-php基础语法-5-数据类型与数组遍历
1-2-6 Ajax-php基础语法-6-函数
1-2-7 Ajax-php基础语法-7-get请求参数获取
1-2-8 Ajax-php基础语法-8-post请求参数获取
1-2-9 Ajax-php基础语法-9-案例
1-2-10 Ajax-php基础语法-10-后台接口
1-2-11 Ajax-php基础语法-11-请求流程分析
1-2-12 Ajax-php基础语法-12-前端与后端分工

1-3 原生Ajax详解

1-3-1 Ajax-隐藏帧iframe方式实现页面局部更新
1-3-2 Ajax-原生Ajax实现页面局部更新
1-3-3 Ajax-原生Ajax详解-xhr对象创建
1-3-4 Ajax-原生Ajax详解-请求参数分析
1-3-5 Ajax-原生Ajax详解-响应状态分析
1-3-6 Ajax-原生Ajax详解-xml数据格式
1-3-7 Ajax-原生Ajax详解-xml数据解析
1-3-8 Ajax-原生Ajax详解-php开发xml形式数据接口
1-3-9 Ajax-原生Ajax详解-json数据格式
1-3-10 Ajax-原生Ajax详解-json数据解析
1-3-11 Ajax-原生Ajax详解-php开发json形式数据接口
1-3-12 Ajax-原生Ajax详解-初步理解异步效果
1-3-13 Ajax-原生Ajax详解-同步与异步理解
1-3-14 Ajax-原生Ajax详解-同步与异步底层原理分析
1-3-15 Ajax-原生Ajax详解-Ajax初步封装-1
1-3-16 Ajax-原生Ajax详解-Ajax初步封装-2
1-3-17 Ajax-原生Ajax详解-封装应用案例

1-4 jQuery库中Ajax方法的使用

1-4-1 Ajax-jQuery框架-Ajax相关API基本使用-1
1-4-2 Ajax-jQuery框架-Ajax相关API基本使用-2
1-4-3 Ajax-jQuery框架-模仿jQuery封装ajax-1
1-4-4 Ajax-jQuery框架-模仿jQuery封装ajax-2
1-4-5 Ajax-jQuery框架-模仿jQuery封装ajax-3

1-5 跨域

1-5-1 Ajax-跨域-初识跨域
1-5-2 Ajax-跨域-jsonp原理分析-1
1-5-3 Ajax-跨域-jsonp原理分析-2
1-5-4 Ajax-跨域-jsonp原理分析-3
1-5-5 Ajax-跨域-jsonp-jQuery基本使用
1-5-6 Ajax-跨域-jsonp-模仿jQuery封装-1
1-5-7 Ajax-跨域-jsonp-模仿jQuery封装-2
1-5-8 Ajax-跨域-jsonp-模仿jQuery封装-整合json与jsonp
1-5-9 Ajax-跨域-jsonp-案例-搜索智能提示
1-5-10 Ajax-跨域-jsonp-案例-快递查询-1
1-5-11 Ajax-跨域-jsonp-案例-快递查询-2
1-5-12 Ajax-跨域-jsonp-案例-天气查询-1
1-5-13 Ajax-跨域-jsonp-案例-天气查询-2

1-6 sublimeServer插件

1-6-1 01-sublimeServer插件介绍和安装
1-6-2 02-sublimeServer配置
1-6-3 03-jsonView插件的安装和使用
1-6-4 04-默认浏览器设置
1-6-5 05-启动sublimeServer

第 二 章:Ajax实战

2-1 模板引擎及综合应用

2-1-1 Ajax-模板引擎-初识模板引擎
2-1-2 Ajax-模板引擎-初识artTemplate
2-1-3 Ajax-模板引擎-artTemplate基本使用
2-1-4 Ajax-模板引擎-artTemplate案例
2-1-5 Ajax-综合案例-省市县三级联动-1
2-1-6 Ajax-综合案例-省市县三级联动-2
2-1-7 Ajax-综合案例-多次请求查询天气-1
2-1-8 Ajax-综合案例-多次请求查询天气-2

2-2 请求第三方接口天气预报案例

2-2-1 全国天气预报说明
2-2-2 获取文本框的值
2-2-3 发送ajax请求数据
2-2-4 默认请求北京天气情况
2-2-5 渲染数据01
2-2-6 渲染数据02

第 三 章:豆瓣电影项目【就业班】

3-1 豆瓣电影项目说明

3-1-1 1豆瓣电影_项目说明
3-1-2 2豆瓣电影_corstoggle展示&准备代码说明

3-2 豆瓣电影城市选择功能

3-2-1 3确认城市选择插件
3-2-2 4引入修改后的插件
3-2-3 5城市选择功能完成

3-3 豆瓣电影正在热映渲染和加载更多功能

3-3-1 6渲染正在热映
3-3-2 7加载更多功能

3-4 豆瓣电影星级评分功能

3-4-1 8星级评分功能

3-5 豆瓣电影影评效果实现

3-5-1 9影评选项卡第一种做法
3-5-2 10影评选项卡第二种做法
3-5-3 11影评中的tab切换
3-5-4 12影评渲染完毕

3-6 豆瓣电影分页功能

3-6-1 13分页功能分析
3-6-2 14分页效果实现
3-6-3 15分页效果bug修复

3-7 豆瓣电影项目总结

3-7-1 16项目总结

阶段 四 :移动web开发

第 一 章:H5购物网站项目

1-1 fullpage插件介绍和使用

1-1-1 案例介绍
1-1-2 fullpage简介
1-1-3 fullpage使用

1-2 第一屏布局和动画

1-2-1 添加8屏背景
1-2-2 添加小圆点
1-2-3 第一屏幕布局
1-2-4 第一屏动画制作

1-3 第二屏布局和动画

1-3-1 第二屏幕动画制作-回调函数1
1-3-2 第二屏幕搜索制作2
1-3-3 第二屏幕搜索制作3
1-3-4 第二屏幕搜索动画制作
1-3-5 第二屏幕沙发动画制作
1-3-6 第二屏幕图片切换动画

1-4 第三屏布局和动画

1-4-1 第三屏幕动画布局
1-4-2 二三屏幕沙发布局(重要)
1-4-3 沙发动画1
1-4-4 沙发移动距离的计算
1-4-5 第二屏结束后再执行沙发动画
1-4-6 第三屏幕动画制作完成
1-4-7 倾斜沙发制作

1-5 第四屏布局和动画

1-5-1 第四屏幕云彩动画
1-5-2 购物车布局
1-5-3 购物车动画制作
1-5-4 作业安排
1-5-5 jquery easing使用
1-5-6 第4屏幕node布局
1-5-7 第4屏动画完成

1-6 第五屏布局和动画

1-6-1 第5屏布局
1-6-2 第5屏动画制作
1-6-3 复习视距和translateZ
1-6-4 添加文字旋转

1-7 第六屏布局和动画

1-7-1 第6屏布局
1-7-2 第6屏幕动画(一)
1-7-3 bug问题解决
1-7-4 第6屏小车动画
1-7-5 第6屏幕boy制作
1-7-6 第6屏幕girl制作
1-7-7 第6屏幕完成

1-8 第七、八屏布局和动画

1-8-1 第7屏幕制作
1-8-2 第8屏幕布局
1-8-3 第8屏手跟随鼠标动画(一)
1-8-4 第8屏手跟随鼠标动画(二)
1-8-5 第8屏手再来一次制作
1-8-6 bug解决2
1-8-7 继续往下制作案例结束

第 二 章:H5项目和HTML5API

2-1 360度汽车旋转案例

2-1-1 解决ie低版本不认识html5标签
2-1-2 条件注释
2-1-3 360度旋转(上)
2-1-4 360度旋转(中)
2-1-5 360度旋转(下)

2-2 QQ浏览器项目

2-2-1 qq浏览器项目介绍
2-2-2 qq浏览器背景圆1
2-2-3 qq浏览器背景圆2
2-2-4 qq浏览器背景圆3
2-2-5 进场出场原理
2-2-6 第一屏动画
2-2-7 背景旋转效果
2-2-8 第一屏幕完善
2-2-9 第二屏幕开始
2-2-10 第二屏幕结束
2-2-11 第三屏幕开始
2-2-12 第三屏幕结束
2-2-13 QQTIM原理
2-2-14 stellar插件使用1
2-2-15 stellar插件使用2
2-2-16 QQTIM 添加视差滚动插件

2-3 HTML5新增API

2-3-1 01 检测网络连接状态
2-3-2 02 全屏
2-3-3 03 文件读取(一)
2-3-4 04 文件读取(二)
2-3-5 05 文件读取(三)
2-3-6 06 地理定位(一)
2-3-7 07 地理定位(二)
2-3-8 08 百度地图名片
2-3-9 09 拖放(一)
2-3-10 10 拖放(二)
2-3-11 11 拖放(三)
2-3-12 12 本地存储(一)
2-3-13 13 本地存储(二)
2-3-14 14 应用缓存
2-3-15 15 多媒体播放器布局简介
2-3-16 16 加载完毕显示视频
2-3-17 17 制作时分秒函数
2-3-18 18 播放和暂停按钮
2-3-19 19 进度条显示
2-3-20 20 视频全屏操作
2-3-21 21 点击快进功能

第 三 章:移动web开发基本功

3-1 移动web基础知识

3-1-1 移动web-为什么学习移动web开发
3-1-2 移动web-基础知识-像素密度
3-1-3 移动web-基础知识-设备独立像素
3-1-4 移动web-基础知识-css像素
3-1-5 移动web-基础知识-2倍图
3-1-6 移动web-调试

3-2 视口的概念及设置

3-2-1 移动web-PC端的视口
3-2-2 移动web-移动端的视口
3-2-3 移动web-移动端页面正常展示的解决方案分析
3-2-4 移动web-移动端viewport的设置(width)
3-2-5 移动web-移动端viewport的设置(initial-scale)
3-2-6 移动web-移动端viewport的设置(其它属性)
3-2-7 移动web-移动站点和浏览器的说明

第 四 章:移动web京东项目

4-1 首页布局

4-1-1 移动web-京东首页公共样式
4-1-2 移动web-京东首页整体结构
4-1-3 移动web-京东首页顶部结构块的制作方式
4-1-4 移动web-京东首页顶部结构块制作
4-1-5 移动web-京东首页轮播图结构块制作
4-1-6 移动web-京东首页导航块制作