学习大纲

一、知识大纲
1、第一周：
1）html和css基础知识；
2）博雅网站静态页面制作；
2、第二周
1）小米官网静态页面制作；
3、第三周
1）对象的遍历；
2）闭包思想；
3）数据类型
4）数组的循环
5）对象的克隆；
6）数组的14种方法；
7）数组克隆：三种；
4、第四周
1）数组排序；4种；
2）数组去重；5种；
3）对象的特性：3个；
4) 字符串常用方法：7种；
5) undefined出现的四种情况；
6）隐式数据类型的分类和比较；
7）日期对象 new Date();
8）DOM树，DOM节点类型及节点属性
9）遍历节点树；所有子节点，兄弟节点，兼容处理；
10）封装兼容函数：获取指定子节点的上一个哥哥和下一个弟弟元素节点；
11）封装兼容函数：获取元素节点的所有子元素节点；
12）判定对象身上是否存在某属性名的两种方法；
13）浏览器的可视区域宽高在不同浏览器中的获取；
14）判断浏览器的种类；
15）DOM操作；
16）元素节点身上获取属性的两种方式及差别；
17）数据检测（对象属性是否存在，数据类型检测，检验独享是否所属某类）;
5、第五周
1）git的基本操作
2）函数预解释的情况和条件判断语句在不同浏览器中对函数预解释的兼容问题
3）内存分类及内存释放
4）this指向问题
5）面向对象oop,oo思想
6）面向对象的四种设计模式及优缺点
7）构造函数原型模式
8）函数的三种角色表现形式
9）实例对象的for.in遍历；
10）Object基类原型上系统属性方法；3个；
11）Function函数类原型上的系统属性方法；3个；
12）数组元素求最大值和最小值的方法；4种；
13）类函数继承；私有属性和公有属性继承的三种继承的优缺点；
14）普通对象选项卡转化为面向对象选项卡的问题；
6、第六周
1）数组求平均值的规则；
2）类数组转数组方法的兼容性，封装兼容函数中的判断条件；
3）浏览器异常捕获；
4）工具库封装：makeArray方法，jsonParse方法；
5）数组排序：数字，数字+汉字/字母,汉字/字母；
6）DOM映射
7）页面绑定数据的两种方式；
8）ajax请求的基本四步骤；
9）表格中元素的获取；
10）表格排序实例题；
11）正则表达式RegExp两种创建形式与区别；
12）正则表达式的组成；元字符（18+6）个和修饰符3个
13）正则RegExp类原型上的公共方法；2个；
14）正则RegExp类实例对象的私有属性；1个；
15）lastIndex的重要性；
16）正则RegExp类的静态属性；作用及条件；
17）字符串配合正则使用的方法；4个；
18）字符串中统计字母重复次数的方法；2种；
19）正则应用封装的两个方法：urlParse(),formatDate();
20）数组的forEach()和map()方法的兼容性问题；以及封装兼容的这两个方法；
7、第七周
1）JS盒子模型；
2）结构父级和定位父级概念；
3）封装offset方法；获取指定元素到浏览器视口的上，左边缘的距离；
4）封装win方法；获取浏览器的可视宽高和卷去长度；设置浏览器的可视区域的卷去长度；
5）元素非行间样式的获取及行间样式的设置；
6）跑马灯实例和瀑布流实例；
7）回到顶部实例以及四个升级；
8）图片的懒加载；
9）花瓣网终级版实例；
10）封装工具库，共27个方法；
8、第八周
1）箭头函数创建及this指向；
2）es6语法之class创建类及类的继承；
3）es6新增特性：对象字面量创建，字符串模板，对象解构赋值；
4）var,let,const三者的区别；
5）箭头函数中的形参设置和扩展运算符
6）封装终极版运动库；
7）完整版原生JS之左右切换轮播图；
8）JS文件引入放在head标签中，原生JS和jQuery设置的代码；
9）jQuery类函数如何扩展静态属性和公共方法；
9、第九周
1）事件分类
2）事件流
3）事件类型
4）事件对象
5）事件源
6）鼠标事件对象和键盘事件对象
7）阻止浏览器默认事件的兼容代码
8）阻止冒泡和冒泡的运用
9）解决onmouseover与onmouseout中的冒泡问题的方法：3种；
10）封装兼容版的函数预处理方法myBind();
11）不同浏览器下的DOM2级事件绑定及解绑
12）封装兼容版的事件库
13）焦点的捕获和释放以及兼容性
14）bind函数预处理的函数与原函数体不再是同一地址，而是两个不同的地址；
10、第十周
1）百度搜索框实例
2）myAjax函数封装
3）封装一个拖拽库
4）封装一个订阅式发布库
5）具有订阅式发布的拖拽库
11、第十一周
1）自己封装的三大基本库和扩展的三大库完整版封装：工具库，事件库，ajax库，运动库，拖拽库，myBind库；
2）照片墙实例
3）音符实例
4）html5知识解读
5）canvas知识及时钟实例
6）canvas炫酷小球实例制作
7）CSS3知识解读
8）开关门3D效果实例
9）菜单栏3D翻转效果
10）3D切割轮播图实例
11）fullpage.js插件全屏页面滚动实例
12、第十二周

二、小实例
1、选项卡制作；
2、九九乘法表；
3、验证码获取；
4、时钟；倒计时时钟；
5、表格排序实例题；
6、过滤段落中的敏感词，将其换成"*"；
7、跑马灯实例；
8、瀑布流实例；
9、回到顶部效果实例；
10、恭喜发财四个字的分布显示实例；
11、单、多张图片的懒加载实例；
12、花瓣网终极版实例；
13、三个小球运动实例；
14、三个小球运动promise版实例；
15、单个小球向左向右运动优化版实例；
16、小球多方向运动及身上的属性变化同时改变实例（使用封装的运动库）；
17、完整版原生JS之左右轮播图实例
18、jQuery版渐隐渐现轮播图实例；
19、es6版+面向对象+jQuery版左右轮播图实例；
20、多级菜单实例
21、放大镜实例
22、产品展示实例
23、拖拽实例
24、百度搜索框实例
25、拖拽运动实例
26、拖拽后小球的运动实例；
27、es5面向对象版带订阅式发布的拖拽实例；
28、照片墙拖拽实例
29、原生版音符实例和jQuery版音符实例
30、canvas时钟实例
31、canvas炫酷小球实例
32、开关门3D效果实例
33、菜单栏3D翻转实例
34、3D切割轮播图实例
35、fullpage.js插件全屏页面滚动实例

三、自己封装的工具库
1、myutils.js方法库：27个方法；
2、finallyAnimate.js运动库：元素运动效果；
3、myEvent.js事件库：元素的绑定事件和解绑事件；
4、myAjax.js库：用户前后台数据交互；
5、myBind.js库：函数的预处理方法，等同于bind方法，兼容所有浏览器；
6、myDrag.js库：拖拽元素相对于定位父级的拖拽效果；
7、Drag.js库：订阅式发布预留接口的拖拽效果；

四、待学习的知识
1、学习PS软件及初步掌握，能够抠图；
2、项目实战练习：第一周第五天项目实战：博雅互动网站静态页面制作；
3、项目实战练习：第二周，小米官网静态页面制作；