1906B余晋洋本月学习总结

• ​1.事件对象，放大镜

  • ​什么是事件对象？

  • 事件对象:获取事件的详细信息:鼠标位置，键盘按键

  • ​什么是事件冒泡？

  • ​事件冒泡：子级事件执行时会自动触发父级事件,一层一层往上冒

  • ​放大镜

  • 综合练习

    • ​1.盒子跟随鼠标移动

    • ​2.时间冒泡：城市选择练习

• ​7.Math对象

  • • 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时间对象

  • • 日期对象 new Date()

  • 设置日期对象     set == 设置

    set设置的是日期对象，无法设置系统(win7/8/9/10,)时间

    setMonth(9,1)     10月1号 月-1

  • ​日期对象和时间对象的转换

  • ​综合练习

    • 练习：​今天是星期几

    • ​练习：实现系统时间

• 2.​键盘事件、拖拽

  • ​01.键盘事件，拖拽

    • 什么是​键盘事件？

    • • 键盘事件: onkeydown,onkeyup

    • ​键盘事件对象：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 正则表达式

  • ​正则转义符：//转义符 &lt;小于号 &gt; 大于号 &nbsp; 空格

    // \" 代表" 双引号的一半, \' 代表单引号

  • ​常见正则：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问题

  • ​实现懒加载效果