一．软键盘拖拽
效果图:
功能思路分析:
1. 面向对象框架
1. 构造函数中: 获取案例上需要用到的元素及数据相关信息
2. 原型对象中：写好结婚证，初始化方法，事件监听方法
3. 实例对象中: 以对象的形式传参，如数据，选择器名等
2. 键盘显示隐藏
1. 给两个文本框绑定点击事件，点击文本框显示键盘
2. 给页面document绑定点击事件，点击页面空白区域隐藏键盘
3. 给文本框的点击事件阻止冒泡(e.stopPropagation())，以免点击文本框触发document的点击事件
3. 键盘拖拽
1. 鼠标按下: 为了避免跟键盘按下时的冲突，只给键盘上方空白区域做拖拽，获取鼠标到元素的位置，开启开关
2. 鼠标移动: 判断开关是否为真， 键盘位置 = 鼠标到页面距离 - 鼠标到键盘距离
3. 鼠标抬起: 关闭开关
4. 输入内容
1. 给键盘绑定点击事件
2. 阻止冒泡(e.stopPropagation())，避免与document的点击事件冲突
3. 利用事件委托判断每一个按键,将按钮的内容innerHTML，拼接给文本框的value
4. 特殊功能按键，额外判断： 拼接空格 += ‘ ’ > 清空value > 大小写转换( toUpperCase() toLowerCase() )
#二．今日小结
1. 面向对象三部曲: 构造函数 原型对象 实例化
prototype => 构造 找 原型
constructor => 原型 找 构造
proto => 实例找原型
2. 隔了函数this指向会发生改变，需要在函数外保留this指向
3. 实例化时以对象的形式传参
#三．作业 -- 数据筛选
效果图:
功能思路分析:
1. 默认渲染所有数据
封装一个渲染方法，根据传递过来的参数进行渲染，默认渲染所有的数据
2. 选中下拉列表筛选数据
给下拉列表绑定change事件，拿到下拉列表的value值，根据value值筛选不同的数据，使用数组的filter()方法筛选。
3. 文本框搜索数据
根据文本框输入的内容筛选数据，使用indexOf（）做筛选条件