阶段一 前端开发基础

展开
第一章 HTML/HTML5
1-1 浏览器介绍
  • 认识网页
  • 常见浏览器
  • 浏览器内核
  • web标准
1-2 HTML基本结构
  • HTML初识
  • HTML骨架
  • 我的第一个页面及其标签简介
  • 猪八戒版骨架记忆法
1-3 HTML常用标签
  • 什么是标签及其分类
  • 标签嵌套和并列关系
  • 简单小测验
  • 开发工具sublime
  • sublime生成html骨架
  • doctype文档类型
  • 字符集简介
  • 标签的语义化及其标题标签
  • 段落标签和水平线标签
  • 课堂案例-新闻页面
  • 换行和div span标签
  • 文本格式化标签
  • 标签属性
  • 图像标签
  • 链接标签
  • 锚点定位
  • base标签
  • 特殊字符
  • 注释标签
1-4 相对路径
  • 相对路径(一)
  • 相对路径(二)
1-5 列表
  • 无序列表的使用
  • 无序列表注意事项
  • 有序列表
  • 四大名著案例
  • 自定义列表
  • 第一天HTML总结
1-6 表格
  • 认识表格
  • 表格的注意事项
  • 表格属性
  • 表头标签
  • 表格结构
  • 浏览器审查HTML标签元素
  • 表格标题标签
  • 合并单元格
  • 合并单元格复习
1-7 表单和表单控件
  • 表单的作用
  • 文本框和密码框
  • 单选按钮和复选按钮
  • 默认选中表单属性
  • input按钮组
  • 最多字符数和文本值
  • label标签
  • 文本域
  • 下拉菜单
  • 表单域
1-8 HTML5 新增标签和属性
  • html5 文档类型和字符集
  • 查看手册及其新增标签
  • datalist标签
  • fieldset元素
  • HTML5 新增input 表单(一)
  • HTML5 新增input 表单(二)
  • 新增占位符焦点多选属性
  • autocomplete属性
  • 内容不能为空和获得焦点属性
  • 表单综合案例-学生档案
  • embed引入网上视频
  • 播放音频audio
  • 播放视频video
第二章 CSS/CSS3
2-1 CSS介绍
  • CSS产生的原因
  • CSS网页的美容师
  • 体会CSS样式
  • CSS样式规则
2-2 font字体
  • 字体样式字号和字体
  • 字体字号常用技巧
  • unicode字体
  • CSS注释
  • 字体加粗
  • 字体倾斜
  • 字体综合设定
2-3 CSS基本选择器
  • 调试工具chrome使用
  • 标签选择器
  • 体会类选择器
  • CSS命名规范
  • 谷歌课堂案例
  • 多类名选择器
  • ID选择器
  • id选择器和类选择器的区别
  • 通配符选择器
  • 链接伪类选择器的使用
  • 链接伪类的简写方式
  • 结构伪类选择器(一)
  • 结构伪类选择器(二)
  • 结构伪类选择器(三)
  • 目标伪类选择器
2-4 CSS外观样式及应用
  • CSS颜色
  • 行高对齐和首行缩进
  • 字间距和单词间距
  • 颜色半透明
  • 文字阴影初识
  • sublime快捷方式
  • 综合案例(一)
  • 综合案例(二)
  • 综合案例(三)
2-5 CSS样式表
  • 内部样式表
  • 行内样式表
  • 外部样式表
  • 三种样式表总结
2-6 标签显示模式
  • 块级标签显示模式
  • 行内标签显示模式
  • 行内块元素
  • 显示模式转换
2-7 CSS复合选择器
  • 交集选择器
  • 并集选择器
  • 后代选择器
  • 子元素选择器
  • 课堂练习-测试选择器
  • 属性选择器(一)
  • 属性选择器(二)
  • 伪元素选择器(一)
  • 伪元素选择器(二)
  • CSS书写规范
2-8 CSS背景及应用
  • 背景颜色图片及其平铺
  • 背景位置(一)
  • 背景位置(二)
  • 魔兽背景图片
  • 背景附着(固定)
  • 背景简写
  • 背景半透明
  • 背景缩放(一)
  • 背景缩放(二)
  • 多背景图片
  • 凹凸文字效果
  • 王者荣耀导航栏(一)
  • 王者荣耀导航栏(二)
2-9 CSS三大特性
  • CSS层叠性
  • CSS继承性
  • CSS优先级
  • 权重叠加
  • 继承的权重为0
  • css权重6道精华题
  • 优先级总结
2-10 CSS盒模型及应用
  • 看透网页布局本质
  • 认识盒子模型组成
  • 盒子边框
  • 边框综合写法(一)
  • 边框综合写法(二)
  • 合并细线表格
  • 圆角矩形
  • 盒子内边距
  • fireworks测量工具
  • 新浪导航(一)
  • 新浪导航栏(二)
  • 外边距以及盒子居中对齐
  • 文字盒子居中图片和背景区别
  • 清除内外边距
  • 行内元素上下内外边距的问题
  • 外边距合并(一)
  • 外边距合并(二)
  • 盒子的计算尺寸
  • 学会计算盒子尺寸(重点)
  • padding不影响盒子大小的情况
  • 搜索趣图(一)分析
  • 搜索趣图(二)大盒子
  • 搜索趣图(三)标题
  • 搜索趣图(四)
  • 搜索趣图(五)
  • 盒子模型布局稳定性
  • CSS3 盒模型
  • 盒子阴影
  • 水晶图片案例
2-11 浮动及应用
  • 文档流介绍
  • 浮动是用来做文字环绕效果的
  • 体会浮动
  • 浮动就是漂浮的意思
  • 浮动首先需要添加标准流父级
  • 浮动特性对齐父盒子
  • 浮动特性盒子排列
  • 浮动影响盒子显示模式
  • 浮动总结
  • 版心和布局流程
  • 一列固定宽度且居中
  • 两列左窄右宽型
  • 通栏平均分布型
2-12 清除浮动
  • 清除浮动的本质
  • 额外标签法
  • 父级添加overflow方法
  • after伪元素清除浮动
  • 双伪元素清除浮动
2-13 photoshop基本操作
  • 学习photoshop目的
  • ps界面简介
  • ps基本操作
  • 移动工具和缩放变形
  • 水果自行车案例
  • 图层的基本操作
  • 图层编组操作
  • 图层的移动位置
  • 图层合并和透明
  • 矩形椭圆选区工具
  • 颜色填充-米奇效果
  • 多边形套索工具
  • 磁性套索工具
  • 魔棒工具
  • 选区布尔运算
  • 梦幻星球案例
  • 钢笔工具
  • 文字工具和吸管工具
  • 切图方法1-手动划片
  • 切图方法2-利用图层切图
  • 清除全部切片和辅助线的方法
  • 切图方法3-辅助线切图
  • 切图方法4-等份数划分法
  • cutterman插件安装
  • cutterman插件使用
2-14 学成网案例上
  • 学成网准备工作
  • 学成网案例分析
  • 学成网头部开始
  • 调整头部的宽度
  • logo和navbar部分开始
  • logo和navbar结束
  • search开始
  • search结束
  • 个人中心制作
  • banner制作开始
  • 给banner添加背景图片
  • 侧边栏结构搭建
  • 侧边栏制作结束
  • 小课表上
  • 小课表中
  • 小课表下
  • 精品推荐上
  • 精品推荐下
2-15 CSS四种定位及应用
  • 为什么学习定位
  • 定位属性
  • 静态定位(1)
  • 相对定位
  • 绝对定位脱标
  • 父级没有定位
  • 父级有定位
  • 何为子绝父相
  • 定位练习-哈根达斯
  • 绝对定位水平垂直居中
  • 淘宝焦点图分析
  • 淘宝轮播图上
  • 淘宝轮播图中
  • 淘宝轮播图下
  • 淘宝轮播图权重问题
  • 固定定位
  • 仿新浪固定头部和广告
  • 叠加次序
  • 定位总结
  • 固定绝对定位模式转换
2-16 学成网案例下
  • display和visibility使用
  • 鼠标经过显示二维码
  • overflow属性
  • 学成在线页面修复工作
  • 小圆点制作上
  • 小圆点制作下
  • 精品推荐大模块头部开始
  • 精品推荐大模块头部结束
  • 精品推荐大模块主体开始
  • 精品推荐大模块li结束
  • 精品推荐大模块结束
  • 底部制作清除浮动
  • 底部左侧开始
  • 底部左侧完成
  • 底部右侧完成
2-17 CSS溢出文字隐藏
  • 鼠标样式
  • 取消轮廓线
  • 防止拖拽文本域
  • 行内块和文字对齐
  • 去除图片底测缝隙
  • word-break
  • white-space
  • 超出的部分省略号显示
2-18 CSS精灵技术
  • CSS精灵技术产生的背景
  • css精灵技术的本质
  • css精灵技术的使用
  • 拼出自己的名字
  • 王者荣耀导航栏
  • PS制作精灵图
  • 运用制作精灵图
2-19 字体图标
  • 字体图标的优点
  • svg格式上传转换字体格式
  • 下载字体图标
  • 复制需要的字体文件
  • 字体图标html文件使用
  • 追加新图标字体的方法
2-20 滑动门技术及应用
  • 滑动门技术原因
  • 滑动门实现原理
  • 滑动门技术实现
  • 微信导航栏(一)
  • 微信导航栏(二)
  • 伪元素的本质
  • 鼠标经过显示边框
  • 认识过渡效果
  • 仿照小米效果
2-21 CSS3新增2D和3D属性及应用
  • 2D变形-移动
  • 定位的盒子居中对齐完美写法
  • 2D变形-缩放
  • 2D变形-旋转
  • 设置变形中心点
  • 旋转的楚乔传
  • 2D变形-倾斜
  • 左手法则
  • rotateXYZ
  • 体会透视
  • 3D变形-移动
  • translate3d
  • 开门大吉上
  • 开门大吉下
  • 翻转的图片上
  • 翻转的图片下
  • 体会动画
  • 多组动画
  • 奔跑的小车
  • 无缝滚动上
  • 无缝滚动下
2-22 CSS3伸缩布局及应用
  • 传统布局三等份
  • 伸缩布局三等份
  • 伸缩布局固定宽度
  • 伸缩布局排列方式
  • 携程网准备工作
  • 携程网头部
  • 携程网nav部分上
  • 携程网nav部分中
  • 携程网nav部分下
  • 携程网导航结束
  • 携程网over
  • justify-content属性
  • align-items属性
  • flex-wrap属性
  • align-content属性
  • order属性
2-23 BFC
  • 认识BFC
  • 块级元素具有BFC条件
  • 块级元素触发BFC的属性
  • BFC作用-清除内部浮动
  • BFC作用-解决外边距合并
  • BFC作用及其总结
2-24 CSS补充知识
  • 渐进增强和优雅降级
  • 浏览器前缀
  • 背景渐变上
  • 背景渐变下
  • CSS W3C 统一的验证工具
  • CSS 压缩工具
  • 认识 preserve-3d
  • 旋转轮播图结构制作
  • 旋转轮播图上
  • 旋转轮播图下
2-25 CSS布局案例
  • 靶心的制作
  • 圣杯布局和双飞翼布局
2-26 CSS3小黄人案例
  • 小黄人制作思路
  • 小黄人的结构制作
  • 小黄人头发的制作
  • 小黄人胳臂的制作
  • 小黄人的腿脚
  • 小黄人眼睛框的制作
  • 眼睛和嘴巴的制作
  • 裤子的制作
  • 小黄人肩带的制作
  • 头发和眼睛的动画制作
2-27 文本溢出
  • 单行文本溢出隐藏显示省略号
  • webkit的css扩展方法实现多行文本溢出隐藏,显示省略号
  • 多行文本溢出隐藏,显示省略号的通用方法
2-28 盒子水平和垂直居中
  • 垂直居中的三种方法
  • 水平居中的四种方法
第三章 京东电商项目
3-1 京东网页头部和顶部实现
  • 京东项目介绍
  • 京东项目目录准备
  • 京东项目添加ico图标
  • 自己制作ico图标
  • 三大标签优化
  • 火狐浏览器截图
  • 京东项目头部制作
  • 京东项目快速导航栏1
  • 京东项目快速导航栏2
  • 京东项目快速导航栏3
  • 下载京东字体图标
  • 使用京东字体图标
  • 手机京东部分制作
  • logo的制作
  • 搜索框制作上
  • 搜索框制作下-追加字体图标
  • 购物车模块制作
  • 热点关键词的制作
  • 小导航栏上
  • 小导航栏下
  • 超级日部分制作
  • 页面底部服务开始
  • 底部服务中
  • 底部服务下
  • 帮助模块左侧制作
  • 帮助模块右侧制作
  • 版权模块上
  • 版权模块结束
3-2 京东网页中间部分实现
  • 中间分类部分的准备工作
  • 中间分类部分模块划分
  • 左侧分类上
  • 左侧分类下
  • 中间banner部分上
  • 京东轮播图布局
  • 右侧盒子模块划分
  • 登录模块制作上
  • 登录模块制作头像部分
  • 登录模块福利会员制作
  • 促销公告制作
  • 促销公告小红线的做法
  • 促销广告部分结束
  • 服务扩展模块li的制作
  • 服务扩展模块完成
  • 广告特效结构制作
  • 广告特效部分制作
  • 京东项目动态功能预展示

阶段二 前端开发基本功

展开
第一章 JavaScript基础语法
1-1 JavaScript介绍
  • 网页、网站和应用程序
  • JavaScript的强大
  • JavaScript最初的目的
  • JavaScript现在的意义
  • JavaScript和HTML、CSS的区别,以及组成
  • JavaScript初体验
  • 计算机组成
1-2 JavaScript变量
  • 什么是变量
  • 变量的使用
  • 变量命名规则和规范
  • 交换两个变量
1-3 JavaScript数据类型
  • 数据类型-Number
  • String类型
  • Undefined和Null
  • typeof和注释
  • 转换成字符串类型
  • 转换成数值类型1
  • 转换成数值类型2
  • 转换成布尔类型
1-4 JavaScript操作符
  • 数学运算符
  • 一元运算符讲解
  • 逻辑运算符
  • 关系运算符
  • 赋值运算符和运算符的优先级
1-5 JavaScript流程控制及应用
  • 表达式和语句
  • 流程控制
  • 分支结构
  • 分支结构补充和作业
  • 三元运算符讲解
  • switch
  • 成绩转换案例
  • 布尔类型的隐式转换
  • while循环
  • while案例
  • dowhile
  • dowhile案例
  • for循环
  • 循环案例1
  • 打印正方形
  • 打印三角形
  • 打印99乘法表
  • 循环的作业
  • break和continue
  • 调试
  • for作业1
  • for作业2
1-6 JavaScript数组及应用
  • 数组1
  • 数组2
  • 数组3
  • 求一组数的和和平均值
  • 求最大值和最小值-剪裁
  • 分隔符
  • 筛选数组
  • 翻转数组
  • 冒泡排序
1-7 JavaScript函数及应用
  • 为什么要有函数
  • 函数的参数
  • 函数的参数案例-剪裁
  • 函数的返回值
  • arguments
  • 函数案例1-剪裁
  • 函数案例2
  • 函数案例3
  • 函数案例4
  • 函数其它概念
  • 代码规范
  • 作用域
  • 作用域链
  • 预解析
  • 对象概念
1-8 JavaScript对象
  • 对象之字面量
  • 创建对象的方式
  • new关键字的执行过程
  • this
  • 遍历对象和删除对象的属性
1-9 JavaScript简单类型和复杂类型
  • 回顾数据类型
  • 简单类型在内存中的存储
  • 复杂类型在内存中的存储
  • 简单类型作为函数的参数
  • 复杂类型作为函数的参数
  • 复杂类型作为函数的参数案例1
  • 复杂类型作为函数的参数案例2
1-10 JavaScript内置对象
  • 内置对象引子
  • MDN的使用
  • Math对象-剪裁
  • Math案例1
  • Math案例2
  • 静态成员和实例成员
  • Date对象
  • Date的常用方法
  • 格式化日期
  • 计算时间差
  • 数组对象
1-11 JavaScript数组常用方法及应用
  • 常用方法1(数组)
  • sort方法
  • 模拟sort内部实现
  • 常用方法2和清空数组
  • 数组和对象案例1
1-12 JavaScript字符串常用方法
  • 数组和对象案例2
  • 数组去重
  • 基本包装类型
  • 字符串的不可变
  • 字符串的方法介绍
  • 字符串案例1
  • 字符串替换
  • split方法
  • 次数最多的字符
  • 获取url中的参数
  • 其它方法
第二章 WebAPI
2-1 DOM介绍
  • WebAPI的概念
  • JavaScript组成
  • DOM相关概念
2-2 获取页面元素
  • 根据id获取元素-剪裁
  • getElementsByTagName1
  • getElementsByTagName2
  • 获取元素的其它方式
2-3 注册事件及应用
  • 注册事件
  • 点击按钮切换图片
  • 非表单元素的属性
  • 点击按钮div显示隐藏
  • 取消a标签的默认行为
  • 美女相册-注册事件
  • 美女相册-设置图片和内容
  • innerHTML和innerText
  • innerText和textContent
  • innerText的兼容性处理
  • 表单元素的属性
  • 给文本框赋值
  • 检测用户名和密码
  • 设置下拉框中的选中项
  • 搜索文本框
  • 全选反选案例1
  • 全选反选案例2
  • 全选反选3
  • 自定义属性操作
2-4 样式操作及应用
  • 样式操作1
  • 样式操作2
  • 开关灯
  • 显示隐藏二维码案例
  • 高亮显示正在输入的文本框
  • 设置大小和位置
  • 隔行变色和高亮显示
  • tab栏切换案例1
  • tab栏切换案例2
  • 总结
  • 模拟DOM结构1
  • 模拟DOM结构2
2-5 节点介绍及应用
  • 父子节点
  • 隔行变色案例
  • 第一个和最后一个子元素
  • 菜单
  • 兄弟节点
2-6 动态创建元素及应用
  • 动态创建元素1
  • 动态创建元素2
  • 动态创建元素3
  • 动态创建列表0
  • 动态创建表格1
  • 动态创建表格2
  • 删除行
  • 动态创建元素的性能对比
  • 常用元素操作的方法
  • 选择水果1
  • 选择水果2
  • innerHTML的问题
2-7 事件详解及应用
  • addEventListener
  • attachEvent
  • 处理兼容性问题
  • 移除事件
  • 移除事件兼容性处理
  • 事件的三个阶段
  • 事件委托
  • 事件对象1
  • 事件对象2
  • 事件对象3
  • 跟着鼠标飞的图片-剪裁
  • 获取页面滚动的距离
  • 处理pageXpageY的兼容性
  • 获取鼠标在页面上的位置
  • 取消默认行为的执行和阻止冒泡
  • 只能数组数字的文本框-剪裁
2-8 BOM介绍及应用
  • BOM
  • 对话框
  • js中的加载讲解
  • setTimeout讲解
  • 删除提示讲解
  • setInterval讲解
  • 倒计时
  • 简单动画1
  • location
  • URL的组成
  • history
  • userAgent
2-9 offset、client、scroll三大家族介绍及应用
  • offset系列属性
  • client系列属性
  • scroll系列
  • 拖拽案例1
  • 拖拽案例2
  • 弹出登录窗口1
  • 弹出登录窗口2
  • 放大镜1
  • 放大镜2
  • 放大镜3
  • 放大镜的兼容性处理
  • mouseenter和mouseover的区别
  • 模拟滚动条1
  • 模拟滚动条2
  • 模拟滚动条3
  • 简单动画2
  • 封装动画函数
2-10 动画函数封装及应用
  • 动画-让每个元素记录定时器
  • 动画-从800到400
  • 解决动画的问题
  • animate
  • 轮播图-动态生成序号
  • 轮播图-点击序号
  • 轮播图-显示箭头1
  • 轮播图-上一张下一张
  • 轮播图-bug
  • 下一张无缝滚动
  • 上一张无缝滚动
  • 自动播放
  • 轮播图复习
  • 回到顶部1
  • 回到顶部2
  • 京东首页-tab栏1
  • 京东首页-tab栏2
  • 京东首页-tab栏3
2-11 迷你微信聊天案例
  • 切换聊天用户头像
  • 发送聊天内容展示在聊天区域内
  • 聊天内容的分区显示
  • 清空文本框的内容
2-12 瀑布流案例
  • 原理和样式结构
  • 获取相关变量值
  • 布局方法的实现
  • 滚动加载数据
2-13 像素鸟案例
  • 案例分析和布局
  • 小鸟的运动
  • 创建管道
  • 管道的运动
2-14 飞机大战案例
  • 案例介绍和结构样式
  • 鼠标跟随
  • 创建子弹
  • 子弹运动起来
  • 敌机的创建与运动
  • 子弹和敌机相遇时都消失
第三章 JavaScript高级
3-1 JavaScript回顾
  • 介绍阶段目标
  • 回顾-JavaScript特点
  • 回顾-JavaScript组成
  • 浏览器的组成
  • 对象介绍
3-2 面向对象介绍及应用
  • 面向对象介绍
  • 演示面向对象的开发过程
  • 创建对象
  • 构造函数
  • 10-静态成员和实例成员
  • 构造函数的原型
  • 对象的原型
  • 三角关系
  • 原型链
  • 属性查找规则
  • 注意点
  • 扩展内置对象
  • 随机方块-工具对象
  • 随机方块-方块对象
  • 随机方块-随机生成坐标
  • 随机方块-调用
3-3 贪吃蛇项目
  • 贪吃蛇项目介绍
  • 创建食物对象
  • 随机生成食物
  • 删除食物
  • 自调用函数,避免命名冲突
  • 蛇对象
  • 游戏对象
  • 蛇的move方法
  • 删除蛇
  • 蛇移动
  • 键盘控制蛇的移动
  • 蛇吃食物
  • main执行代码
  • bind
  • 自调用函数的问题
  • 压缩代码
  • 自调用函数的参数
3-4 继承和函数进阶
  • 对象之间的继承
  • 对象拷贝的应用
  • 原型继承
  • call
  • 借用构造函数
  • 组合继承
  • 继承的原型图
  • 贪吃蛇-继承
  • 函数声明和函数表达式
  • 函数也是对象
  • 函数的调用形式和this的指向
  • call、apply和bind
  • call的应用
  • apply的应用
  • bind的应用
  • 函数的其它成员
  • 高阶函数-函数作为参数
  • sort排序
  • 函数作为返回值
3-5 闭包
  • 闭包
  • 闭包演示
  • 贪吃蛇中的闭包
  • 闭包案例
  • 定时器是如何工作的
  • 闭包案例1
  • 闭包案例2
  • 代码思考
3-6 递归和拷贝
  • 递归讲解
  • 递归案例讲解
  • 斐波那契数列
  • 浅拷贝
  • 深拷贝
  • 遍历DOM树1
  • 遍历DOM树2
3-7 正则表达式及应用
  • 正则表达式演示
  • 正则表达式介绍
  • 元字符1
  • 元字符开头和结尾
  • 限定符1
  • 限定符2
  • 其它特殊字符
  • 正则表达式练习1
  • 正则表达式练习2
  • 正则对象
  • 文本框的onchange事件
  • 表单验证-QQ号
  • 表单验证-EMail
  • 表单验证-封装
  • exec
  • 提取
  • 分组提取
  • split
  • 替换
  • 贪婪模式和非贪婪模式
3-8 表格排序案例
  • 表格排序案例介绍
  • 解决排序
  • 案例结构
  • 面向过程完成案例
  • 面向对象完成案例
第四章 jQuery
4-1 jQuery介绍和体验
  • jQuery开发视频-课前介绍
  • jQuery开发视频-重点内容介绍
  • jQuery开发视频-什么是JavaScript框架库
  • jQuery开发视频-什么是jQuery
  • jQuery开发视频-为什么学习jQuery及好处
  • jQuery开发视频-jQuery的发明者和jQuery的感觉
  • jQuery开发-小节jQuery
  • jQuery开发-快速体验jQuery
  • jQuery开发视频-jQuery中的顶级对象
  • jQuery开发视频-页面的加载事件
  • jQuery开发视频-关于引入jQuery文件的注意问题
  • jQuery开发视频-jQuery对象和DOM对象互转
  • jQuery开发视频-再次体验jQuery代码的便捷性
4-2 jQuery选择器及应用
  • jQuery开发视频-jQuery中的选择器
  • jQuery开发视频-id选择器案例
  • jQuery开发视频-标签选择器案例
  • jQuery开发视频-类选择器案例
  • jQuery开发视频-标签+类样式选择器
  • jQuery开发视频-多条件选择器
  • jQuery开发视频-常见的几个方法上
  • jQuery开发视频-常见的几个方法下
  • jQuery开发视频-层次选择器
  • jQuery开发视频-层次选择器案例
  • jQuery开发视频-层次选择器案例下拉菜单
  • jQuery开发视频-奇数偶数选择器案例
  • jQuery开发视频-索引选择器
  • jQuery开发视频-精品展示案例
  • jQuery开发视频-突出显示案例
  • jQuery开发视频-好友面板切换
  • jQuery开发视频-手风琴案例
4-3 jQuery样式操作
  • jQuery开发视频-元素样式设置的不同写法
  • jQuery开发视频-添加和移除类样式操作
  • jQuery开发视频-网页开关灯的案例
  • jQuery开发视频-判断元素是否应用了类样式
  • jQuery开发视频-产品切换案例
  • jQuery开发视频-总结元素样式设置的方法
4-4 jQuery链式编程
  • jQuery开发视频-链式编程
  • jQuery开发视频-链式编程案例1
  • jQuery开发视频-链式编程案例2
  • jQuery开发视频-获取兄弟元素的几个方法
  • jQuery开发视频-获取兄弟元素方法的案例
4-5 jQuery动画
  • jQuery中的动画方法
  • hide和show方法中的第二个参数
  • jQuery开发视频-动画案例1
  • jQuery开发视频-动画案例2
  • jQuery开发视频-其他动画方法1
  • jQuery开发视频-其他动画方法2
  • jQuery开发视频-animate动画方法介绍
  • jQuery开发视频-stop方法解决问题
4-6 jQuery动态创建元素及应用
  • jQuery开发视频-动态创建元素
  • jQuery开发视频-添加元素的方法
  • jQuery开发视频-权限选择的案例
  • jQuery开发视频-添加元素的另一个方法
  • jQuery开发视频-另一种创建元素的方式
  • jQuery开发视频-动态创建表格
  • jQuery开发视频-移除内容和克隆方法
  • jQuery开发视频-关于value属性设置和获取
  • jQuery开发视频-选中下拉框选项
  • jQuery开发视频-自定义属性和值的设置和获取
  • jQuery开发视频-复选框选中问题
  • jQuery开发视频-全选和全不选
  • jQuery开发视频-全选和反选的案例
  • jQuery开发视频-设置和获取元素的宽和高
  • jQuery开发视频-获取和设置offset中的left和top
  • jQuery开发视频-关于卷曲出去的距离的案例
4-7 jQuery事件绑定和解绑
  • jQuery开发视频-为元素绑定事件
  • jQuery开发视频-另一种绑定事件方式
  • jQuery开发视频-on绑定事件及总结
  • jQuery开发视频-绑定事件案例动态添加行
  • jQuery开发视频-解绑事件1
  • jQuery开发视频-解绑事件2
  • jQuery开发视频-解除绑定事件细节问题
  • jQuery开发视频-触发事件
  • jQuery开发视频-触发事件的区别
  • jQuery开发视频-事件对象
  • jQuery开发视频-按键改变背景颜色案例
  • jQuery开发视频-事件冒泡及取消事件冒泡和取消浏览器默认事件
  • jQuery开发视频-链式编程基本原理
  • jQuery开发视频-评分案例
  • jQuery开发视频-each方法的使用
  • jQuery开发视频-多库共存
4-8 jQuery插件
  • jQuery开发视频-插件的演示1
  • jQuery开发视频-插件的演示2
  • jQuery开发视频-插件的样式
  • jQuery开发视频-自己做简单的插件
  • jQuery开发视频-jQueryUi介绍及下载
  • jQuery开发视频-jQueryUI小功能演示1
  • jQuery开发视频-jQueryUi小功能演示2

阶段三 前后端交互

展开
第一章 Ajax基础知识
1-1 Ajax-基础知识铺垫
  • Ajax-基础知识铺垫-初识ajax
  • Ajax-基础知识铺垫-客户端与服务器
  • Ajax-基础知识铺垫-网络相关概念
  • Ajax-基础知识铺垫-通信协议理解
  • Ajax-基础知识铺垫-服务器环境wamp安装
  • Ajax-基础知识铺垫-配置访问权限与网站根路径
  • Ajax-基础知识铺垫-虚拟主机配置
  • Ajax-基础知识铺垫-静态网站
  • Ajax-基础知识铺垫-动态网站
1-2 php基础语法
  • Ajax-php基础语法-1-初识php
  • Ajax-php基础语法-2-变量声明与字符串拼接
  • Ajax-php基础语法-3-初识数组
  • Ajax-php基础语法-4-二维数组
  • Ajax-php基础语法-5-数据类型与数组遍历
  • Ajax-php基础语法-6-函数
  • Ajax-php基础语法-7-get请求参数获取
  • Ajax-php基础语法-8-post请求参数获取
  • Ajax-php基础语法-9-案例
  • Ajax-php基础语法-10-后台接口
  • Ajax-php基础语法-11-请求流程分析
  • Ajax-php基础语法-12-前端与后端分工
1-3 原生Ajax详解
  • Ajax-隐藏帧iframe方式实现页面局部更新
  • Ajax-原生Ajax实现页面局部更新
  • Ajax-原生Ajax详解-xhr对象创建
  • Ajax-原生Ajax详解-请求参数分析
  • Ajax-原生Ajax详解-响应状态分析
  • Ajax-原生Ajax详解-xml数据格式
  • Ajax-原生Ajax详解-xml数据解析
  • Ajax-原生Ajax详解-php开发xml形式数据接口
  • Ajax-原生Ajax详解-json数据格式
  • Ajax-原生Ajax详解-json数据解析
  • Ajax-原生Ajax详解-php开发json形式数据接口
  • Ajax-原生Ajax详解-初步理解异步效果
  • Ajax-原生Ajax详解-同步与异步理解
  • Ajax-原生Ajax详解-同步与异步底层原理分析
  • Ajax-原生Ajax详解-Ajax初步封装-1
  • Ajax-原生Ajax详解-Ajax初步封装-2
  • Ajax-原生Ajax详解-封装应用案例
1-4 jQuery库中Ajax方法的使用
  • Ajax-jQuery框架-Ajax相关API基本使用-1
  • Ajax-jQuery框架-Ajax相关API基本使用-2
  • Ajax-jQuery框架-模仿jQuery封装ajax-1
  • Ajax-jQuery框架-模仿jQuery封装ajax-2
  • Ajax-jQuery框架-模仿jQuery封装ajax-3
1-5 跨域
  • Ajax-跨域-初识跨域
  • Ajax-跨域-jsonp原理分析-1
  • Ajax-跨域-jsonp原理分析-2
  • Ajax-跨域-jsonp原理分析-3
  • Ajax-跨域-jsonp-jQuery基本使用
  • Ajax-跨域-jsonp-模仿jQuery封装-1
  • Ajax-跨域-jsonp-模仿jQuery封装-2
  • Ajax-跨域-jsonp-模仿jQuery封装-整合json与jsonp
  • Ajax-跨域-jsonp-案例-搜索智能提示
  • Ajax-跨域-jsonp-案例-快递查询-1
  • Ajax-跨域-jsonp-案例-快递查询-2
  • Ajax-跨域-jsonp-案例-天气查询-1
  • Ajax-跨域-jsonp-案例-天气查询-2
1-6 sublimeServer插件
  • 01-sublimeServer插件介绍和安装
  • 02-sublimeServer配置
  • 03-jsonView插件的安装和使用
  • 04-默认浏览器设置
  • 05-启动sublimeServer
第二章 Ajax实战
2-1 模板引擎及综合应用
  • Ajax-模板引擎-初识模板引擎
  • Ajax-模板引擎-初识artTemplate
  • Ajax-模板引擎-artTemplate基本使用
  • Ajax-模板引擎-artTemplate案例
  • Ajax-综合案例-省市县三级联动-1
  • Ajax-综合案例-省市县三级联动-2
  • Ajax-综合案例-多次请求查询天气-1
  • Ajax-综合案例-多次请求查询天气-2
2-2 请求第三方接口天气预报案例
  • 全国天气预报说明
  • 获取文本框的值
  • 发送ajax请求数据
  • 默认请求北京天气情况
  • 渲染数据01
  • 渲染数据02
第三章 豆瓣电影项目【就业班】
3-1 豆瓣电影项目说明
  • 1豆瓣电影_项目说明
  • 2豆瓣电影_corstoggle展示&准备代码说明
3-2 豆瓣电影城市选择功能
  • 3确认城市选择插件
  • 4引入修改后的插件
  • 5城市选择功能完成
3-3 豆瓣电影正在热映渲染和加载更多功能
  • 6渲染正在热映
  • 7加载更多功能
3-4 豆瓣电影星级评分功能
  • 8星级评分功能
3-5 豆瓣电影影评效果实现
  • 9影评选项卡第一种做法
  • 10影评选项卡第二种做法
  • 11影评中的tab切换
  • 12影评渲染完毕
3-6 豆瓣电影分页功能
  • 13分页功能分析
  • 14分页效果实现
  • 15分页效果bug修复
3-7 豆瓣电影项目总结
  • 16项目总结

阶段四 移动web开发

展开
第一章 H5购物网站项目
1-1 fullpage插件介绍和使用
  • 案例介绍
  • fullpage简介
  • fullpage使用
1-2 第一屏布局和动画
  • 添加8屏背景
  • 添加小圆点
  • 第一屏幕布局
  • 第一屏动画制作
1-3 第二屏布局和动画
  • 第二屏幕动画制作-回调函数1
  • 第二屏幕搜索制作2
  • 第二屏幕搜索制作3
  • 第二屏幕搜索动画制作
  • 第二屏幕沙发动画制作
  • 第二屏幕图片切换动画
1-4 第三屏布局和动画
  • 第三屏幕动画布局
  • 二三屏幕沙发布局(重要)
  • 沙发动画1
  • 沙发移动距离的计算
  • 第二屏结束后再执行沙发动画
  • 第三屏幕动画制作完成
  • 倾斜沙发制作
1-5 第四屏布局和动画
  • 第四屏幕云彩动画
  • 购物车布局
  • 购物车动画制作
  • 作业安排
  • jquery easing使用
  • 第4屏幕node布局
  • 第4屏动画完成
1-6 第五屏布局和动画
  • 第5屏布局
  • 第5屏动画制作
  • 复习视距和translateZ
  • 添加文字旋转
1-7 第六屏布局和动画
  • 第6屏布局
  • 第6屏幕动画(一)
  • bug问题解决
  • 第6屏小车动画
  • 第6屏幕boy制作
  • 第6屏幕girl制作
  • 第6屏幕完成
1-8 第七、八屏布局和动画
  • 第7屏幕制作
  • 第8屏幕布局
  • 第8屏手跟随鼠标动画(一)
  • 第8屏手跟随鼠标动画(二)
  • 第8屏手再来一次制作
  • bug解决2
  • 继续往下制作案例结束
第二章 H5项目和HTML5API
2-1 360度汽车旋转案例
  • 解决ie低版本不认识html5标签
  • 条件注释
  • 360度旋转(上)
  • 360度旋转(中)
  • 360度旋转(下)
2-2 QQ浏览器项目
  • qq浏览器项目介绍
  • qq浏览器背景圆1
  • qq浏览器背景圆2
  • qq浏览器背景圆3
  • 进场出场原理
  • 第一屏动画
  • 背景旋转效果
  • 第一屏幕完善
  • 第二屏幕开始
  • 第二屏幕结束
  • 第三屏幕开始
  • 第三屏幕结束
  • QQTIM原理
  • stellar插件使用1
  • stellar插件使用2
  • QQTIM 添加视差滚动插件
2-3 HTML5新增API
  • 01 检测网络连接状态
  • 02 全屏
  • 03 文件读取(一)
  • 04 文件读取(二)
  • 05 文件读取(三)
  • 06 地理定位(一)
  • 07 地理定位(二)
  • 08 百度地图名片
  • 09 拖放(一)
  • 10 拖放(二)
  • 11 拖放(三)
  • 12 本地存储(一)
  • 13 本地存储(二)
  • 14 应用缓存
  • 15 多媒体播放器布局简介
  • 16 加载完毕显示视频
  • 17 制作时分秒函数
  • 18 播放和暂停按钮
  • 19 进度条显示
  • 20 视频全屏操作
  • 21 点击快进功能
第三章 移动web开发基本功
3-1 移动web基础知识
  • 移动web-为什么学习移动web开发
  • 移动web-基础知识-像素密度
  • 移动web-基础知识-设备独立像素
  • 移动web-基础知识-css像素
  • 移动web-基础知识-2倍图
  • 移动web-调试
3-2 视口的概念及设置
  • 移动web-PC端的视口
  • 移动web-移动端的视口
  • 移动web-移动端页面正常展示的解决方案分析
  • 移动web-移动端viewport的设置(width)
  • 移动web-移动端viewport的设置(initial-scale)
  • 移动web-移动端viewport的设置(其它属性)
  • 移动web-移动站点和浏览器的说明
第四章 移动web京东项目
4-1 首页布局
  • 移动web-京东首页公共样式
  • 移动web-京东首页整体结构
  • 移动web-京东首页顶部结构块的制作方式
  • 移动web-京东首页顶部结构块制作
  • 移动web-京东首页轮播图结构块制作
  • 移动web-京东首页导航块制作
  • 移动web-产品块制作(图片区域上)
  • 移动web-产品块制作(图片区域下)
  • 移动web-产品块制作(秒杀标题栏)
  • 移动web-产品块制作(秒杀块内容)
4-2 首页动态效果
  • 移动web-京东首页搜索块js效果
  • 移动web-京东首页倒计时js效果
  • 移动web-京东首页-轮播图(拖动修改页面结构和样式)
  • 移动web-京东首页-轮播图(js添加首尾图片)
  • 移动web-京东首页-轮播图(js设置样式)
  • 移动web-京东首页-轮播图(js实现自动轮播)
  • 移动web-京东首页轮播图自动轮播完善
4-3 移动端的touch事件
  • 移动web-移动端的touch事件简介
  • 移动web-移动端的touch事件(手指对象数组)
  • 移动web-移动端的touch事件(手指对象的坐标获取)
  • 移动web-使用touch事件实现元素的拖拽
  • 移动web-touch事件源参数中的target
4-4 轮播图效果实现
  • 移动web-轮播图-实现滑动操作
  • 移动web-轮播图-实现滑动操作(细节)
  • 移动web-轮播图-松开手指之后的处理
  • 移动web-轮播图-添加过渡结束的监听
  • 移动web-轮播图中一个bug的解决
  • 移动web-轮播图点标记的设置
4-5 zepto.js
  • 移动web-zepto的基本特点和下载
  • 移动web-使用zepto实现轮播图(上)
  • 移动web-使用zepto实现轮播图(中)
  • 移动web-使用zepto实现轮播图(下)
  • 移动web-zepto的定制
4-6 分类页面布局和滑动
  • 移动web-分类页面结构的简单说明
  • 移动web-分类页面的全屏结构创建
  • 移动web-分类页面顶部搜索块的制作
  • 移动web-分类页面左侧导航块的制作
  • 移动web-分类页面右侧商品块的制作
  • 移动web-初步实现左侧栏的滑动
  • 移动web-设置滑动区间
  • 移动web-松开手指之后的处理
  • 移动web-cilck等操作在移动端的延迟
4-7 移动端tap事件
  • 移动web-移动端的tap事件
  • 移动web-移动端tap事件的封装
  • 移动web-分类页面tap事件的添加(上)
  • 移动web-分类页面tap事件的添加(下)
  • 移动web-使用zepto来实现左侧单击操作
  • 移动web-移动端touch事件所产生的点透问题
4-8 移动端插件的使用
  • 移动web-fastclick的使用
  • 移动web-使用fastclick实现分类页面左侧栏的点击操作
  • 移动web-iscroll的使用说明(上)
  • 移动web-iscroll的使用说明(下)
  • 移动web-swiper插件的使用
  • 移动web-swiper插件的使用介绍
  • 移动web-使用iscroll插件完成分类页面右侧内容块的滑动操作
第五章 响应式开发基础知识
5-1 响应式开发介绍
  • 移动web-网页布局方式
  • 移动web-响应式布局的简单说明
  • 移动web-什么是响应式开发
5-2 媒体查询介绍和应用
  • 移动web-初体验媒体查询的语法
  • 移动web-媒体查询的条件判断的顺序说明(上)
  • 移动web-媒体查询的条件判断的顺序说明(下)
  • 移动web-媒体查询中的媒体功能的说明
  • 移动web-媒体查询补充说明
  • 移动web-使用媒体查询设置页面布局
  • 移动web-常见的响应式框架简单介绍
5-3 bootstrap介绍
  • 移动web-bootstrap简单介绍
  • 移动web-bootstrap简单介绍(2)
  • 移动web-bootstrap的模板文件
  • 移动web-bootstrap中的布局容器
  • 移动web-bootstrap中的栅格系统
  • 移动web-bootstrap栅格系统的其它样式说明(上)
  • 移动web-bootstrap栅格系统的其它样式说明(下)
5-4 less语法
  • 移动web-less环境的搭建
  • 移动web-less语法说明
第六章 微金所响应式开发项目
6-1 微金所头部布局
  • 移动web-wjs页面的整体结构
  • 移动web-微金所页面的字体图标样式准备
  • 移动web-微金所头部块制作(上)
  • 移动web-微金所头部块制作(中)
  • 移动web-微金所头部块制作(下)
6-2 微金所导航布局
  • 移动web-导航条组件的说明
  • 移动web-导航条组件的样式修改(上)
  • 移动web-导航条组件的样式修改(下)
6-3 微金所轮播图效果
  • 移动web-轮播图的效果分析
  • 移动web-轮播图插件的使用说明
  • 移动web-移动端的轮播图效果实现
  • 移动web-非移动端的轮播图效果实现
  • 移动web-使用响应式工具实现轮播图
  • 移动web-使用js实现轮播图
  • 移动web-实现轮播图的滑动操作
  • 移动web-微金所首页轮播图的完成
6-4 微金所标中部布局
  • 移动web-微金所信息块制作
  • 移动web-微金所预约块制作
  • 移动web-标签页的使用
  • 移动web-标签页导航样式修改(上)
  • 移动web-标签页导航样式修改(下)
  • 移动web-详细产品块结构
  • 移动web-详细产品块样式(上)
  • 移动web-详细产品块样式(中)
  • 移动web-详细产品块样式-宝北的添加
  • 移动web-产品active块的制作
  • 移动web-产品块标签页导航条的宽度计算
  • 移动web-产品块标签页导航条的滑动
6-5 微金所底部布局和效果
  • 移动web-新闻块结构分析
  • 移动web-新闻块结构样式(上)
  • 移动web-新闻块结构样式(中)
  • 移动web-新闻块结构样式(下)
  • 移动web-合作伙伴块制作
  • 移动web-bootstrap定制的简单说明
6-6 rem介绍和应用
  • 移动web-em和rem的介绍
  • 移动web-rem实现适配的简单说明
  • 移动web-rem案例-优惠活动(上)
  • 移动web-rem案例-优惠活动(中)
  • 移动web-rem案例-优惠活动(下)

阶段五 后端开发

展开
第一章 node基础【v2.0】
1-1 node介绍和环境安装
  • 01.node课程介绍
  • 02.基本概念-语言和环境的关系
  • 03.基本概念-前端和后端
  • 04.基本概念-Javascript的诞生和发展过程
  • 05.基本概念-node环境中的Javascript
  • 06.基本概念-ECMAScript规范 和 浏览器中的js 以及 node中的js之间的关系
  • 07.基本概念-总结什么是node以及node可以做什么
  • 08.环境安装-介绍LTS和Current版本的区别以及如何安装Node
  • 09.环境安装-通过shift配合鼠标右键快速进打开终端
  • 10.环境安装-介绍path环境变量的作用以及查找规则
  • 11.环境安装-介绍用户变量和系统变量的区别
  • 12.node环境中执行js代码的第一种方式-推荐使用
  • 13.node环境中执行js代码的第二种方式-了解即可
  • 14.补充-如何退出REPL执行环境
1-2 es6语法
  • 15.es6语法-使用let定义变量
  • 16.es6语法-使用const定义常量
  • 17.es6语法-解构赋值
  • 18.es6语法-箭头函数的标准语法和this指向问题
  • 19.es6语法-箭头函数的3个变体
  • 20.es6语法-对象中定义属性和方法的便捷方式
1-3 node之fs和path模块
  • 1.fs文件操作-读取文件内容
  • 2.fs文件操作-向指定路径中写入文件内容
  • 3.fs文件操作-追加文件内容
  • 4.fs文件操作-向一个不存在的路径中追加文件会不会报错
  • 5.fs文件操作-使用__dirname解决fs模块中路径操作的问题
  • 6.fs文件操作-补充__dirname的特点和__filename的区别
  • 7.fs文件操作-读取指定路径的文件信息
  • 8.fs文件操作-复制文件
  • 9.fs案例-处理成绩
  • 10.path路径操作-使用path.join方法拼接路径片段
  • 11.path路径操作-介绍path模块中的其它属性和方法
1-4 node之模块化
  • 12.单线程和异步-介绍Javascript中单线程和异步的概念
  • 13.单线程和异步-Node中为什么要大量使用异步操作
  • 14.模块化-介绍什么是模块化以及模块化的好处
  • 15.模块化-介绍什么是CommonJS规范
  • 16.模块化-全局global作用域和私有的模块作用域
  • 17.模块化-使用global全局成员在模块之间共享成员
  • 18.模块化-使用模块作用域实现模块之间的成员共享
  • 19.模块化-了解module.exports和exports之间的关系
  • 01.模块化-拓展AMD、CMD、以及ES6中模块化规范
  • 02.模块分类-介绍核心模块
  • 03.模块分类-介绍第三方模块和用户模块
  • 04.包-介绍包的定义
  • 05.包-介绍规范的包结构
  • 07.包-自定义calc计算器包
  • 08.npm-介绍npm的两层含义
  • 09.npm-安装和卸载全局包
  • 10.npm-介绍如何安装和卸载本地包
  • 11.npm-介绍npm中常用的命令
  • 12.npm-补充--production参数
  • 13.npm-使用cnpm解决包下载慢的问题
1-5 http模块
  • 14.http模块-讲解BS交互模型下的基本概念
  • 15.http模块-创建基本的web服务器
  • 16.1.http模块-解决中文乱码问题
  • 16.2http模块-根据不同的URL地址响应不同的内容
  • 17.http模块-根据不同的URL地址返回不同的HTML标签
  • 18.http模块-根据不同的URL地址返回不同的HTML页面内容
  • 19.http模块-res.end方法接收二进制和字符串两种参数
  • 20.http模块-服务器处理并响应CSS和JS文件
  • 21.http模块-优化最终版本的HTTP服务器
  • 22.http模块-结合art-template渲染动态页面
1-6 express框架介绍
  • 01.介绍nodemon工具的用法
  • 02.介绍express
  • 03.演示express框架的基本使用
  • 04.演示express中快捷方式的使用
  • 05.介绍express.static来快速托管静态资源文件
  • 06.介绍项目中如何使用ejs模板引擎渲染动态页面
  • 07.介绍如何在项目中配置art-template渲染模板页面
  • 08.介绍如何封装路由模块
  • 09.介绍什么是中间件
  • 10.介绍Express官方对中间件的五种分类
  • 11.自定义中间件解析Post提交的表单数据
1-7 MySql介绍与使用
  • 12.新建MySql数据库和表
  • 13.演示mysql模块的基本使用步骤
  • 14.新增数据
  • 15.修改数据
  • 16.删除数据
  • 01.模块加载机制-优先从缓存中加载
  • 02.模块加载机制-核心模块和用户模块的加载机制
  • 03.模块加载机制-第三方模块加载机制
  • 04.获取参数-通过req.query获取查询参数
  • 05.获取参数-通过req.params获取参数
  • 06.获取参数-通过req.body获取客户端提交过来的表单数据
  • 07.介绍两种web开发模式
  • 05.项目需求分析
  • 06.JSONP和CORS的区别
  • 07.设计数据库heros表
  • 08.创建后端API项目基本结构
  • 09.设计获取所有英雄列表的API接口
  • 10.设计添加英雄的API接口
  • 11.设计根据Id查询英雄信息的API接口
  • 12.设计根据Id更新英雄信息的API接口
  • 13.设计根据Id软删除英雄的API接口
  • 1.封装API Server项目
  • 2.创建web项目并安装semantic-ui
  • 3.在项目中配置和使用semantic-ui
  • 4.客户端通过Ajax获取服务器的数据
  • 5.完成英雄列表的渲染
  • 6.完成添加英雄的功能
第二章 node博客项目【v2.0】
2-1 博客项目-登录与注册
  • 7.介绍项目的主要功能
  • 8.初始化黑马博客项目的基本结构
  • 9.将node_modules托管为静态资源目录
  • 10.使用bootstrap美化页面首页结构
  • 11.渲染注册和登录页面
  • 12.创建用户表并模拟注册的过程
  • 13.绘制注册用户的流程图
  • 14.根据注册的流程图完成注册的业务逻辑
  • 15.绘制登录时候的业务处理流程图
  • 1.实现登录的业务逻辑
  • 2.抽离路由模块
  • 3.通过循环的形式注册router目录下所有的路由模块
  • 4.封装controller业务处理模块
  • 5.画图介绍MVC三层架构的分层分层开发思想
  • 6.总结MVC三层之间的调用关系
  • 7.介绍Cookie的基本使用
  • 8.介绍如何通过cookie的expires属性设置过期时间
  • 9.Session的原理
  • 10.在项目中安装和配置express-session中间件
  • 11.实现注销功能
  • 12.渲染文章添加页面
  • 13.抽离公共的模板部分
2-2 博客项目-文章发表
  • 02.渲染发表文章页面的基本结构
  • 01拦截文章添加页面的非登录请求
  • 03.实现发表文章功能
  • 04.渲染基本的文章详情页
  • 05.转换markdown文本为html并渲染文章详情页的数据
  • 06.控制编辑按钮的权限
  • 07.完成编辑文章的功能
  • 08.渲染首页完整的文章列表
  • 09.渲染分页的页码条和激活的页码
  • 10.实现真正的分页和分页页码条的控制
  • 11.使用bcrypt加密算法对用户密码进行加密存储
  • 12.演示如何把黑马博客发布到服务器上去运行

阶段六 前端工具和框架

展开
第一章 git
1-1 git安装和使用
  • git介绍
  • git安装
  • 流行框架-初始化git仓储
  • 流行框架-配置使用者的用户名和邮箱
  • 流行框架-把代码存储到git仓储中
  • 流行框架-把代码提交到仓储及,及工作区,暂存区,版本库概念
  • 流行框架-git status 命令查看状态
  • 流行框架-git add 与git commit补充
  • 流行框架- .gitignore设置忽略文件
  • 流行框架-git 查看日志
  • 流行框架- git 版本回退
  • 流行框架-git通过版本号切换版本,及git reflog 查看版本操作记录
  • 流行框架-git创建分支,切换分支,查看分支,合并分支
  • 流行框架-git合并分支时,手动处理冲突
  • 流行框架-git push命令,把本地把本地代码推送到服务器上
  • 流行框架-git pull,及git clone 得到服务器的仓储
  • 流行框架-通过ssh方式上传代码
  • 流行框架-模拟两个用户push及pull代码及解决冲突
  • 流行框架-push和pull操作时,先pull再push
  • 流行框架- push和pull时的简写方式
第二章 Vue基础【就业班更新1】
2-1 vue指令
  • 01-课前准备
  • 02-为什么学vue
  • 03-vue版helloworld体会MVVM
  • 04-插值表达式的使用
  • 05-v-text指令使用
  • 06-v-html指令的使用
  • 07-v-bind指令的使用
  • 08-v-for指令的使用(上)
  • 08-v-for指令的使用(下)
  • 09-v-model双向数据绑定
  • 10-v-on事件绑定
  • 11-v-if和v-show
  • 12-v-if补充
  • 13-v-cloak指令使用
  • 14-案例:列表数据渲染
  • 15-案例:列表数据删除
  • 16-案例:列表数据添加
  • 01-案例:自动获取焦点dom版本
  • 02-案例:自动获取焦点自定义指令版本
  • 03-案例:创建过滤器
  • 04-computed
  • 05-watch
  • 06-深度监听
  • 07-案例:搜索功能
2-2 axios和vue-resource
  • 08-axios的get请求
  • 09-axios的post请求
  • 10-案例:获取真实列表数据
  • 11-vue-resource的jsonp
2-3 vue动画
  • 12-过渡和动画:css类名
  • 13-过渡和动画:animate动画库
  • 14-过渡和动画:javascript钩子
  • 15-案例:删除动画
2-4 vue组件
  • 01-什么是组件
  • 02-组件的创建
  • 03-组件中使用事件和指令
  • 04-父子组件的创建
  • 05-父组件传值给子组件
  • 06-子组件传值给父组件
  • 07-兄弟组件间传值
  • 08-创建动态组件
  • 09-局部过滤器和局部自定义指令
  • 10-实例生命周期
2-5 vue路由
  • 01-路由初体验
  • 02-路由参数
  • 03-监听路由参数变化
  • 04-嵌套路由和编程式导航
  • 05-路由重定向
第三章 webpack【就业班更新1】
3-1 webpack介绍与安装
  • 06-webpack简单介绍
  • 07-webpack-cli
3-2 webpack之loader配置与使用
  • 08-webpack-config
  • 09-webpack-dev-server
  • 10-webpack-css
  • 11-webpack-less&scss
  • 12-webpack-image&fonts
  • 13-webpack-html
  • 14-webpack-babel
3-3 webpack与vue结合使用
  • 01-单文件组件介绍
  • 02-webpack-vue
  • 03-wegbpack-router
  • 04-文件关系梳理
  • 05-vue-cli
第四章 Vue电商后台管理系统项目【就业班更新1】
4-1 vue项目-介绍
  • 06-element-ui介绍
  • 07-项目介绍
  • 08-项目初始化
4-2 vue项目-登录
  • 09-登录页面
  • 10-登录页面表单验证
  • 01-开启后台服务
  • 02-登录功能简单完成
  • 03-保存登录状态方法介绍
  • 04-axios拦截器
  • 05-路由全局守卫
4-3 vue项目-首页布局
  • 06-首页-整体布局
  • 07-首页-侧边栏布局
  • 08-头部内容及中间内容的跳转
  • 09-Vuex概念介绍
  • 10-Vuex代码演示
  • 01-头部功能完善
4-4 vue项目-用户管理
  • 02-用户管理-用户列表页面
  • 03-用户管理-用户列表-表格数据展示
  • 04-用户管理-用户列表-搜索功能
  • 05-用户管理-用户列表-分页功能
  • 06-用户管理-用户列表-用户状态切换
  • 07-用户管理-用户列表-添加用户
  • 08-用户管理-用户列表-编辑用户
  • 09-用户管理-用户列表-删除用户
  • 10-用户管理-用户列表-分配角色
  • 11-用户管理-用户列表-bug修复及数据加载动画
4-5 vue项目-权限管理
  • 01-权限管理-业务介绍及路由配置
  • 02-权限管理-权限列表
  • 03-权限管理-权限列表-表格数据获取展示
  • 04-栅格布局
  • 05-权限管理-权限列表-表格展开行数据渲染
  • 06-权限管理-权限列表-展开行中权限删除功能
  • 07-权限管理-权限列表-授权角色树数据展示
  • 08-权限管理-权限列表-授权角色树默认选中
  • 09-权限管理-权限列表-授权提交
  • 01-权限管理-菜单数据动态获取
4-6 vue项目-商品管理
  • 02-商品管理-商品分类-页面及TreeGrid组件使用
  • 03-商品管理-商品分类-TreeGrid组件数据渲染及分页
  • 04-商品管理-商品分类-级联选择器数据展示
  • 05-商品管理-商品分类-添加商品分类提交
  • 06-商品管理-商品列表-添加商品步骤条组件和tab组件
  • 07-商品管理-商品列表-添加商品图片上传

阶段七 拓展课程

展开
第一章 微信小程序
1-1 微信小程序介绍
  • 微信小程序简介
  • 微信小程序可以做什么
  • 开发环境搭建
  • 微信web开发者工具更新说明
1-2 微信小程序应用配置介绍
  • 快速起步
  • 小程序项目结构1
  • 小程序页面结构2
  • 小程序配置说明
  • 应用程序配置
  • 页面配置文件
  • 标签栏配置
1-3 逻辑层与界面层分离架构
  • 逻辑与界面分离结构
  • 逻辑层的javascript
  • 界面层的数据绑定1
  • 界面层的数据绑定2
  • 界面层的列表渲染
  • 界面层的事件处理
  • 界面层的事件冒泡
  • 界面层的事件传参
  • 单向数据流
  • 登陆页面案例
  • 登陆页面案例补充和表单
  • 界面层的条件渲染
  • wxss和css之间的差异
1-4 微信小程序组件的介绍和应用
  • ui组件走马观花
  • 基础内容组件
  • 表单组件
  • 操作反馈组件
  • 基础组件总结
1-5 Music伸缩布局案例
  • 伸缩布局介绍
  • 伸缩布局案例1
  • 伸缩布局案例2
  • 伸缩布局案例3
  • 伸缩布局案例4
  • 伸缩布局案例5
1-6 页面间的跳转和传值
  • 页面间跳转(导航)、快速创建页面、空白配置文件的影响
  • 页面间传值
  • 页面导航模式
  • 导航元素点击高亮
  • 页面导航api
1-7 微信小程序TODOS案例
  • TODOS案例(介绍)
  • TODOS案例(界面结构)
  • TODOS案例(界面样式)
  • TODOS案例(抽象数据模型)
  • TODOS案例(界面数据绑定)
  • TODOS案例(界面交互操作)
  • TODOS案例(新增逻辑优化)
  • TODOS案例(切换任务完成状态)
  • TODOS案例(剩余任务数量展示)
  • TODOS案例(删除任务)
  • TODOS案例(切换全部任务完成状态)
  • TODOS案例(清空已完成任务)
  • TODOS案例(细节优化及总结)
  • TODOS案例(真机演示及发散)
1-8 微信小程序本地生活项目
  • 01-项目介绍
  • 02-外观及标签栏的配置
  • 03-公共样式及Sublime打开项目
  • 04-首页布局
  • 05-关于小程序中发送HTTP请求
  • 06-首页数据加载及数据绑定
  • 07-页面间跳转
  • 08-列表页分类信息加载
  • 09-第一页商铺信息的加载
  • 10-上拉加载更多
  • 11-下拉刷新及搜索
  • 12-详细页
第二章 React
2-1 移动App的介绍
  • 移动App-什么是前端混合移动App开发
  • 移动App-什么是原生开发和混合开发
  • 移动App-App的分类和App与Web的区别
  • 移动App-从程序员自身角度分析学习移动App开发的必要性
  • 移动App-从企业角度分析使用移动App开发的必要性
  • 移动App-三种开发方式的原理和对比
  • 移动App-企业如何选择适合自己的开发方式
  • 移动App-企业中的项目开发流程
  • 移动App-企业做移动App开发的3大技术选型
2-2 移动App开发环境搭建
  • HTML5+的介绍
  • 演示使用HBuilder打包出一个App
  • 介绍H5+和RN这两种App开发技术的本质区别
  • 安装JDK包
  • 配置JDK的环境变量
  • 安装配置Python环境
  • 安装配置Android本地环境
  • 通过ReactNative中文网说明配置环境时候的注意事项
  • 快速体验ReactNative开发过程
  • 快速体验Weex开发过程
2-3 webpack回顾及功能演示
  • 复习webpack基本配置
  • 复习-webpack中loader的配置规则
  • 配置发布阶段的脚本和配置文件
  • 配置图片打包后存放到images中去
  • 每次发布前删除dist目录
  • 分离第三方包
  • 压缩JS代码
  • 压缩HTML页面
  • 抽取样式表文件并处理CSS路径问题
  • 压缩CSS文件并说明什么情况下使用发布策略
2-4 React介绍
  • React介绍-前端三大框架介绍
  • React介绍-从组件化角度对比React和Vue
  • React介绍-从开发团队上进行对比
  • React介绍-从社区和移动App开发体验上对比
2-5 React核心概念
  • React核心概念-DOM和虚拟DOM的本质区别
  • React核心概念-虚拟DOM的概念和原理
  • React核心概念-Diff算法
  • React基本用法
2-6 JSX语法介绍和使用
  • JSX语法的基本使用和原理
  • JSX语法的基本使用2
  • 创建最基本的组件的方式
  • 学习function创建组件的基本注意事项
  • class关键字基本概念
  • 使用class关键字实现JS中的继承
  • 关于面向对象语言的三大特性
  • 复习React项目搭建过程
  • 使用class关键字创建组件
  • class定义的组件中一些注意事项
  • React中this.state的使用和React的事件绑定机制
  • this.setState的使用注意事项
  • 有状态组件和无状态组件的对比
2-7 渲染评论列表案例
  • 渲染评论列表-第1版
  • 渲染评论列表-第2版
  • 渲染评论列表-第3版
  • 渲染评论列表-第4版
  • 渲染评论列表-第5版
  • React中启用css样式表文件的模块化
2-8 React组件介绍和使用
  • 组件生命周期-创建阶段的生命周期函数
  • 组件生命周期-生命周期图详解
  • 组件生命周期-分别总结各阶段每个生命周期函数的特点
  • 组件生命周期函数的对比
  • 使用defaultProps设置组件的默认属性值
  • 使用prop-types进行props属性值的类型校验
  • 介绍componentWillMount函数
  • 组件创建阶段的render函数和componentDidMount函数说明
  • 使用原生的JS事件绑定机制实现count自增
  • 使用React提供的事件绑定机制实现count自增
  • 实现Counter是计数器偶数更新奇数不更新的需求
  • 学习componentWillUpdate和ref获取元素
  • componentDidUpdate函数的说明
  • 为什么在render中不能调用this.setState
  • 介绍componentWillReceiveProps和钩子函数的参数列表
  • React中绑定this并传参的前两种方式
  • 绑定this并传参的第三种方式
  • React中把页面上的数据通过onChange同步到state中
  • 评论列表案例
  • 扩展:父组件使用Context特性为子孙组件传递数据
2-9 React路由介绍和使用
  • react-router-dom路由的基本使用
  • 匹配路由参数
  • 为React项目启用AntDesign组件库
  • 实现Ant Design组件的按需导入
2-10 React电影项目
  • react项目-完成首页的基本布局
  • react项目-使用路由切换组件页面
  • react项目-刷新页面时候选中路由对应的Tab页签
  • react项目-完成电影页面的基本布局
  • react项目-改造电影页面中电影类型的路由规则
  • react项目-ES6中fetch API的基本使用
  • react项目-使用isloading标识符实现加载中效果
  • react项目-使用第三方的fetch-jsonp来请求豆瓣API的数据
  • react项目-获取数据并渲染基本的电影列表
  • react项目-美化电影列表项
  • react项目-点击不同分类重新加载电影数据
  • react项目-设置电影类型的刷新选中状态
  • react项目-实现分页功能和编程式导航
  • react项目-路由中Switch组件的使用和跳转到详细页面
  • react项目-实现返回按钮的功能
  • react项目-实现详细页面
第三章 ReactNative电影项目
3-1 项目展示和配置
  • ReactNative项目的演示
  • ReactNative学习的步骤
  • ReactNative开发准备工作-配置自己的手机
  • 初始化RN项目并解读提示面板的信息
  • 使用react-native start重启packager服务器
  • 修改RN项目的主页面
  • 介绍App.js组件中代码的作用
  • TextInput文本框的基本使用
  • 使用Image引入图片资源的两种方式
  • Button组件和ActivityIndicator的基本使用
  • ScrollView组件实现页面滚动
3-2 Tab栏效果
  • 实现简单的Tab栏切换
  • 安装图标插件并配置插件选项
  • 完成Tab栏字体图标的展示
3-3 首页效果
  • 实现首页的轮播图
  • 实现首页的6宫格布局
3-4 ReactNative路由配置
  • 为ReactNative配置路由
  • 使用路由的Actions组件实现编程式导航
3-5 电影列表和详情页效果
  • 使用fetch获取电影列表数据
  • 移动App开发视频-渲染电影列表数据
  • 美化列表布局并绘制分割线
  • 实现电影列表下拉加载更多
  • 实现电影详情页面的制作
3-6 ReactNative电影项目发布
  • 发布安卓项目的Release版本
  • 完成拍照功能并重新发布Release版本
第四章 Angular5【赠送课程】
4-1 Angular介绍
  • 00-介绍
  • 01-安装Angular-CLI脚手架工具
  • 02-使用AngularCLI初始化Angular项目
  • 03-一个Angular应用是如何启动的
4-2 TypeScript介绍和使用
  • 04-核心特性-组件
  • 05-核心特性-其它
  • 06-TypeScript介绍-01
  • 07-TypeScript介绍-02
  • 08-搭建TypeScript开发环境
  • 09-TypeScript数据类型
  • 10-TypeScript-解构赋值
  • 11-TypeScript-剩余参数-数组对象展开操作符
  • 12-TypeScript-类的基本用法
  • 13-TypeScript-类的继承
  • 14-TypeScript-类成员访问修饰符
  • 15-TypeScript-属性的get和set
  • 16-TypeScript-类的静态成员和实例成员
  • 17-TypeScript-函数
  • 18-TypeScript-for-of循环
  • 19-TypeScript-模块
  • 20-TypeScript总结
  • 21-组件介绍
4-3 ToDoMVC案例
  • 22-TodoMVC-案例介绍
  • 23-TodoMVC-下载预览模板
  • 24-TodoMVC-项目初始化
  • 25-TodoMVC-需求介绍
  • 26-TodoMVC-列表渲染(有数据的处理)
  • 27-TodoMVC-列表渲染(无数据条件判断)
  • 28-TodoMVC-添加任务
  • 29-TodoMVC-利用双向绑定显示任务完成状态
  • 30-TodoMVC-处理任务项的样式
  • 31-TodoMVC-切换所有任务项的完成状态
  • 32-TodoMVC-删除单个任务项
  • 33-TodoMVC-双击任务项进入编辑状态
  • 34-TodoMVC-编辑任务
  • 35-TodoMVC-显示所有未完成任务数
  • 36-TodoMVC-清除所有已完成任务项
  • 37-TodoMVC-数据过滤第一步
  • 38-TodoMVC-数据过滤完成
  • 39-TodoMVC-页面刷新保持数据过滤状态
  • 40-TodoMVC-数据持久化到本地存储
4-4 Angular5通讯录项目
  • 41-通讯录案例介绍
  • 42-通讯录-项目初始化
  • 43-通讯录-初始化案例中的组件
  • 44-通讯录-导入登陆和注册的组件模板
  • 45-通讯录-导入顶部导航栏-侧边栏组件模板
  • 46-通讯录-导入路由
  • 47-通讯录-嵌套路由
  • 48-通讯录-表单提交-双向绑定
  • 49-通讯录-表单提交-表单验证
  • 50-通讯录-接口说明
  • 51-通讯录-开启http服务
  • 52-通讯录-注册成功跳转到首页
  • 53-通讯录-使用路由守卫拦截保护访问权限
  • 54-通讯录-用户登陆
  • 55-通讯录-登陆成功显示当前登陆用户名
  • 56-通讯录-用户退出
  • 57-通讯录-HTTP拦截器
  • 58-通讯录-联系人列表
  • 59-通讯录-添加联系人
  • 60-通讯录-删除联系人
  • 61-通讯录-编辑联系人第一步
  • 62-通讯录-完成编辑联系人
  • 63-通讯录-简单总结
第五章 全栈式在线教育后台管理项目
5-1 SVN介绍和使用
  • 课程介绍
  • 版本控制概念
  • SVN交互流程
  • VisualSVN服务安装
  • 配置和管理SVN服务
  • SVN使用基本操作
  • SVN其它操作
  • 版本控制使用建议
5-2 git和github介绍和应用
  • git简介
  • git交互流程
  • git的安装和配置
  • git基本使用
  • 总结git基本使用交互流程
  • 工作区-暂存区-本地仓库
  • github介绍和创建github账户
  • git结合github交互协作
  • 关于remote远程仓库提交
  • git基本命令 bash操作命令
  • vi编辑器介绍
  • git增加和删除文件
  • git提交
  • git回滚和撤销
  • git分支基本操作
  • 回顾分支的基本操作
  • Git-Flow分支工作流管理策略
  • 总结Git-Flow
  • 关于Git提交作者和邮箱的作用
  • Github多人协作-Collaborator
  • Pull-Request
  • Gitlab介绍
  • Github-Pages结合Hexo搭建静态博客
  • 修改Hexo博客主题
5-3 ES6语法介绍和使用
  • Ecmascript6介绍
  • let
  • const
  • 结构赋值
  • 模板字符串
  • 数组的扩展
  • 函数的扩展01
  • 函数的扩展-箭头函数
  • 对象的扩展
  • babel转码器
5-4 在线教育系统项目初始化
  • 在线教育系统介绍
  • 项目初始化并配偶babel
  • 配置npm-script区分开发环境和生产环境
  • 演示npm的scrip脚本配置
  • Ecmascript6模块化
  • 走通首页
  • 复习babel-01
  • babel-02
  • babel-register
5-5 Express中间件使用
  • Express-hello-world
  • Express-处理静态资源
  • 中间件介绍
  • 中间件执行机制
  • 自己封装实现static中间件
  • 中间件-记录日志
  • 中间件-404
  • 中间件-错误处理01
  • 中间件-错误处理02
  • 关于Express-API文档
5-6 Nunjucks模板引擎
  • 配置使用nunjucks模板引擎
  • nunjucks模板引擎-布局
  • 使用nunjucks模板引擎布局项目模板页
  • 分析广告管理路由
  • 处理表单post请求体
  • 利用中间件解析表单POST请求体数据
  • jsonp
5-7 nvm、nrm、yarn介绍
  • nvm介绍
  • nrm介绍
  • yarn介绍
5-8 MongoDB和mongoose介绍和应用
  • 复习post请求以及res-json方法
  • 复习MongoDB-数据存储结构
  • 关于mongodb驱动包和数据服务的启动
  • 复习解析表单POST请求体中间件
  • 使用mongodb操作数据库
  • 全局统一处理错误
  • 解决错误处理中的中间件执行的问题
  • mongoose介绍
  • 使用mongoose完成广告管理中数据的添加
  • 查询所有数据和根据ID查询单个数据
  • 更新广告数据
  • 删除广告数据
5-9 全栈式在线教育项目业务逻辑实现
  • 根据业务提取对应的路由模块
  • 关于模块之间的交互说明
  • 处理列表页渲染和添加页渲染
  • 处理客户端广告管理表单提交
  • 有文件的表单提交01
  • 使用formidable处理有文件上传的表单
  • 将formidable配置到项目中
  • 表单文件上传-FormData
  • 完成表单文件提交后台处理
  • 加载列表数据和分页介绍
  • 服务端分页展示数据
  • 服务端分页查询
  • 服务端分页小结
  • 将项目push到github上
  • 在客户端配置art-template模板引擎
  • 完成异步无刷新分页
  • Promise-封装
  • Promise-then
  • 封装Promise-API
  • 封装XMLHttpRequest-Promise
  • Promise-catch异常处理
  • 将项目中添加广告代码改为Promise版本