一．吸顶楼层
效果图:
功能思路分析:
1. 面向对象框架
2. 渲染导航
1. 数据
2. 对象结构的数据用for in遍历
3. 渲染时将属性名设为锚点(a标签的href)
3. 渲染车系
1. 车系分类是对象的数据结构，外层渲染用for in
2. 每个分类的内容是数组的数据结构，内层渲染map().join(‘’)
3. 渲染时将每个字母的分类设为id名，配合导航里的锚点
4. 导航吸顶
1. 绑定滚动事件(window.addEventListener(‘scroll’,fn))
2. 获取滚动距离( document.documentElement.scrollTop || document.body.scrollTop)
3. 判断滚动距离是否大于导航的offsetTop
4. 是则变成固定定位( fixed )，否则取消固定定位(static)
5. 楼层滚动
1. 滚动事件中，拿到每一层楼的offsetTop 跟 滚动距离比较
2. 滚动距离大于楼层的offsetTop则当前楼层对应的导航高亮
#二．星级评分
效果图:
功能思路分析:
1. 面向对象框架
2. 星级评分
1. 为所有的小星星绑定mouseover事件：
2. 将经过的那一个及之前的所有小星星变为红色，将之后的小星星变为灰色
3. 为所有的小星星绑定mouseout事件：
4. 获取当前选中的星星的下标，获取父元素的自定义属性(getAttribute())
5. 如果有选中的小星星，则将选中星星及之前的小星星显示为红色，之后的显示为灰色
6. 如果没有选中的小星星，则将所有的小星星变为灰色
7. 为所有的小星星绑定click事件：
8. 将点击的那一个及之前的所有小小变为红色，将之后的小星星变为灰色
并给父元素添加一个自定义属性(setAttribute())，存储点击的这颗小星星的下标
3. 选中标签
点击标签，选中高亮，再次点击取消选中状态**(classList.toggle())**
4. 添加标签
1. 点击提交按钮，创建节点( document.createElement() )
2. 设置内容为文本框的value值
3. 追加到ul中**(添加节点appendChild() )**
5. 字数统计功能
1. 给文本框绑定input事件
2. 获取它的value值，将value用正则将汉字替换成两个单字节字符，replace(/[u4e00-u9fa5]/g,‘aa’)
3. 替换后获取字符的个数，即length
4. 用140-length为还可以输入的字数显示到页面中
#三．今日小结
1. 滚动事件: **window.addEventListener( ** ‘scroll’)
2. 滚动距离: document.documentElement.scrollTop || document.body.scrollTop
3. 鼠标事件**: mouseover滑过 mouseout离开**
4. 中文正则: /[u4e00-u9fa5]/
5. 创建节点: document.createElement()
6. 追加节点: 父元素.appendChild()
#四．作业 -- 购物车
效果图:
功能思路分析:
1. 模拟数据
2. 渲染数据
3. 产品数量加减
通过事件委托给购物车大盒子绑定点击事件，判断事件源，实现商品数据加减，商品数量加减的同时，后面的小计跟着变化
4. 商品选中
单个商品选中后计算总计
5. 总计方法
1. 封装一个总计方法
2. 拿到所有被选中的商品的数量累加在一起
3. 拿到所有被选中的商品的价格累加在一个
6. 删除商品
点击商品后面的删除能够删除商品