1906B余晋洋本月学习总结
1.事件对象,放大镜
什么是事件对象?
事件对象:获取事件的详细信息:鼠标位置,键盘按键
什么是事件冒泡?
事件冒泡:子级事件执行时会自动触发父级事件,一层一层往上冒
放大镜
综合练习
1.盒子跟随鼠标移动
2.时间冒泡:城市选择练习
7.Math对象
Math对象的应用:Math.random() 0<=n<1
0---1 * 100 0---100
10 + 0---1 * (100-10) 10----100
n=10
m=100
parseInt(Math.random()*(m-n)+n) 获得n-m固定范围内的随机数
8.Date时间对象
设置日期对象 set == 设置
set设置的是日期对象,无法设置系统(win7/8/9/10,)时间
setMonth(9,1) 10月1号 月-1
日期对象和时间对象的转换
综合练习
练习:今天是星期几
练习:实现系统时间
2.键盘事件、拖拽
01.键盘事件,拖拽
什么是键盘事件?
键盘事件对象:evt.keyCode 返回键码
实现拖拽:1.三个事件:onmousedown,onmousemove,onmouseup
2.移动距离:
onmousedown:记录鼠标相对于盒子的位置
onmousemove:新的鼠标位置-按下时记录鼠标位置
去除默认事件:return false
02.碰撞检测,交换位置
碰撞检测
碰撞检测-封装
碰撞检测实现互换位置
碰撞检测-实现多个拖拽
9.json对象
json对象常见的用法
json对象数据格式
10.BOM
什么是BOM:跟浏览器窗口有关的一些方法(document.write;获取窗口的宽,高;获取浏览器url地址等)
BOM方法
获取浏览器的版本信息
检测浏览器版本
获取url地址信息
3.事件绑定
事件绑定:给同一个对象绑定多个事件用到,之前的方法后面一个事件会覆盖前面事件
事件绑定封装
事件绑定解除:匿名函数不能解除,把它提出去给个名字
事件捕获-冒泡
事件捕获-捕获
综合练习
11.cookie
cookie的用法:cookie用法:(本地存储-localstorge)
cookie的封装:function setCookie(key,value,day){
var now=new Date();
now.setDate(now.getDate()+day)
document.cookie=key+'='+value+';expires='+now;
}
// setCookie('kuige','dashuaige',30);
cookie封装调用:setCookie('username','dashuaige',30);
alert(getCookie('username'))
removeCookie('username')
alert(getCookie('username'))
4.鼠标滚轮
鼠标滚轮事件:onmousewheel //IE,chrome
DOMMouseScroll //FF DOM事件,要用事件绑定方法
鼠标滚轮事件-检测方向://检测方向
//IE、Chrome
//alert(oEvent.wheelDelta);
//下 负(-120)
//上 正(120)
//FF
//alert(oEvent.detail);
//下 正(3)
//上 负(-3)
鼠标滚轮事件-封装
鼠标滚轮事件的应用
12.正则表达式
字符串方法复习
字符串方法:strObj.charAt(index) 返回 字符
strObj.indexOf(字符) 返回 index
strObj.lastIndexOf(字符) 返回 index
strObj.substring(start,end) 返回 字符
strObj.split(规则) 返回 数组 规则去字符里找
strObj.toUpperCase(字符)/toLowercase(字符) 返回 字符
strObj.encodeURIComponent(字符) 返回 字符
strObj.charCodeAt(index) 返回 code数字
String.fromCharCode(code数字) 返回 字符
strObj.search(字符|正则) 返回 index/-1 正则==规则
strObj.match(字符|正则) 返回 数组/null
strObj.replace(被替换字符|正则,替换字符) 返回 字符
strObj.replace(被替换字符|正则,function(s){}) s==每次找到的字符
正则用法://用法1.实例化
var reg=new RegExp('规则','选项');
//用法2.字面量 -常用
var reg1=/规则/选项; //选项:相当于给规则加条件
前期综合练习
5.事件委托
事件委托的优点:
1.性能高——不用一个个加
2.节约资源——不用一人一个函数
*3.事件只需要写一次
4.可以给未来元素增加事件
缺点:慢、浪费资源
事件委托怎么使用:利用冒泡的原理,把事件加到父级上,触发执行效果
13 正则表达式
正则转义符://转义符 <小于号 > 大于号 空格
// \" 代表" 双引号的一半, \' 代表单引号
常见正则:18位身份证号: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
规则:1-6位是你所在的地方
7-14位是你的生日
15-17位是你的身份证号
18位是校验码
验证手机号码
移动号码段:139、138、137、136、135、134、150、151、152、157、158、159、182、183、187、188、147
联通号码段:130、131、132、136、185、186、145
电信号码段:133、153、180、189
/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$/
或
/^1[3|4|5|8][0-9]\d{4,8}$/
验证座机号码:
验证规则:区号+号码,区号以0开头,3位或4位 号码由7位或8位数字组成 区号与号码之间可以无连接符,也可以“-”连接
/^0\d{2,3}-?\d{7,8}$/
腾讯QQ号:[1-9][0-9]{4,}
规则:腾讯QQ号从10000开始
匹配特定数字: ^[1-9]/d*$
//匹配正整数 ^-[1-9]/d*$
//匹配负整数 ^-?[1-9]/d*$
//匹配整数 ^[1-9]/d*|0$
//匹配非负整数(正整数 + 0) ^-[1-9]/d*|0$
//匹配非正整数(负整数 + 0) ^[1-9]/d*/./d*|0/./d*[1-9]/d*$
//匹配正浮点数 ^-([1-9]/d*/./d*|0/./d*[1-9]/d*)$
//匹配负浮点数 ^-?([1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0)$
//匹配浮点数 ^[1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0$
//匹配非负浮点数(正浮点数 + 0) ^(-([1-9]/d*/./d*|0/./d*[1-9]/d*))|0?/.0+|0$
//匹配非正浮点数(负浮点数 + 0)
匹配特定字符串:
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
匹配中文字符的正则表达式: [/u4e00-/u9fa5]
匹配双字节字符(包括汉字在内):[^/x00-/xff]
匹配空行的正则表达式:/n[/s| ]*/r
匹配HTML标记的正则表达式:/<(.*)>.*<///1>|<(.*) //>/
匹配首尾空格的正则表达式:(^/s*)|(/s*$)
匹配Email地址的正则表达式:/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
匹配网址URL的正则表达式:http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?
6.offset问题,懒加载
offset问题
实现懒加载效果