js下 Day14、面向对象案例
一．软键盘拖拽
效果图:
功能思路分析:
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（）做筛选条件
最新文章
- textarea 中的 innerHTML 和 value
- Python基础7：文件操作
- IBM x3850 x5 服务器 安装 Windows Server 2008
- centos 6.4 升级python到版本2.7.12
- Linux动态库的搜索路径
- 【转】Haproxy安装及配置
- uva 1146 Now or late （暴力2-SAT）
- mysql 查询大量数据内存溢出
- 【干货】.NET开发通用组件发布（三） 简易数据采集组件
- C#修改 Excel指定单元格的值
- 栈的java实现和栈的应用
- Android自动化之Monkey环境搭建（一）
- 10.23 正睿停课训练 Day7
- (5) 电商场景下的常见业务SQL处理
- PHP对redis操作详解
- node.js express开发web问题
- String Matching（poj1580）
- STL查找序列中处于某一大小范围内的元素个数
- 同一台服务器配置多个tomcat服务的方法
- Netty源码分析第6章(解码器)---->第3节: 行解码器