[前端学习]js特效部分学习笔记，第三天

鼠标事件

• 有些之前应该记录过，这里作一个总结：
  元素.onmousedown 鼠标按下
元素.onmouseup 鼠标弹起
元素.onclick 鼠标点击
元素.ondblclick 鼠标双击
元素.onmouseover 鼠标经过
元素.onmouseout 鼠标离开
元素.onmousemove 鼠标移动

键盘事件

• 现在用到的有三个
  元素.onkeydown 键盘按下
元素.onkeyup 键盘弹起
元素.onkeypress 键盘按压
• onkeypress的触发方式和onkeydown一样，但是它们之间的编码不一样。
• event.keyCode可以获取到对应键的编码

表单事件

• 汇总几个常用的：
  元素.onfocus 表单控件获得焦点
  元素.onblur表单失去焦点
  元素.oninput 用户在表单控件输入的时候执行
  元素.onchange 表单控件失去焦点后，如果其内容发生了改变执行

正则表达式

正则表达式的创建

• 有两种方式可以创建正则表达式
  • 通过构造函数创建：
    var regEx = new RegExp(/正则表达式/);
  • 通过字面量创建：
    var regEx = /正则表达式/；
• 通过字面量的方式来创建正则用得最多。当然如果正则只使用一次，那么连变量都可以不用，直接写也可以。
• 正则表达式必须用//包裹起来

test方法

• 正则表达式其实就用来匹配字符串，所以当你创建了正则后，肯定还要需要用正则去匹配。js中正则内置了.test方法
• 正则.test(要匹配的值)，匹配成功返回true，匹配不成功返回false

预定义类

• 预定义类就是已经定义好的匹配格式
  . === [^\n\r] 匹配除换行和回车意外的任意字符
  \d === [0-9] 匹配数字字符
  \D === [^0-9] 匹配非数字字符
  \s === [\f\r\t\n\v] 匹配不可见的字符(换行，回车，空格等等)
  \S === [^\f\r\t\n\v] 匹配非不可见的字符
  \w === [a-zA-Z0-9] 匹配单词字符(所有英文字母，数字，下划线)
  \W === [^a-zA-Z0-9] 匹配非单词字符
• ===就是等价于的意思，左右作用完全相同。还可以发现预定于类，大写和小写它们的作用正好相反

字符类

• 字符串就是通过实际的字符来匹配
• 简单类[]
  • /[abc]/ 在正则中单独只写[]就表示或的意思，例子只要是abc三个字符任意一个字符匹配都可以，注意只有单独写不加其他字符类，才是或
• 反向类^
  • /[^abc]/ 反向就是非的意思，例子中只要不是abc的字符都可以匹配。注意：这个字符只有放在[]中才表示非
• 范围类-
  • /[a-c]/ 横线表示范围，例子中a到c之间的任意字符有就能匹配
• 组合类
  • /[a-dA-G0-8]/ 组合类实际就是把多个范围组合起来，在这个组合的范围里有就能匹配，注意范围类和组合类中的范围都没有限制，可以随便写

边界符

• 之间写的验证符号有一个局限性，就是只要字符串中有符合了正则的值，那么就会返回true。但是这种策略在实际中明显是不行的，如果想要正则严格匹配，就需要加上边界符
• ^ 限制开头
  • /^a/ 当^不在中括号里时，就是边界符，例子中就表示字符串必须是以a开头才能匹配
• $ 限制结尾
  • /a$/ 例子中就表示字符串必须是以a结尾才能匹配
• 严格限制
  • /^a$/ 如果限制开头和限制结尾一起写，就说明必须是以a开头以a结尾，也就是只有a才能匹配成功。注意：aa虽然也是a开头a结尾，但是依然不能匹配成功，只有配合量词才行。

量词

• 正则中量词是用来限制字符允许出现的次数
• /x*/ *号表示，x能出现0次或多次，等价于x>=0
• /x+/ +号表示，x能出现1次或多次，等价于x>=1
• /x?/ ?号表示，x能出现0次或者1次，等价于x>=0且x<=1
• /x{}/ {}可以自定义x出现的次数。如果只写{1}表示x只能出现1次；如果写{1，}表示x可以出现1次或多次；如果写{1,5}表示x可以出现1-5次，这种完整写就是限定一个出现次数的范围
• 注意如果想要量词来修饰一串字符，必须将字符串用()包裹起来。否则它只会修饰它紧跟的那个字符

正则中三个括号的区别

• {} 大括号定义字符出现的次数
• [] 中括号定义字符的位置，它内部的字符串只占一个位置(就是一个字符)，只要满足任意一个就行
• () 小括号用来分组，内部的字符串会划为一个整体组

简单正则案例

• 注意表单验证需要严格匹配，所以建议都加上^$边界符
• 验证座机，座机一般以0开头，用-来分割。前面一共3-4位数字，后面7-8位数字
  /^0\d{2,3}-\d{7,8}$/
• 验证姓名，中文在浏览器中需要用到unicode编码，[\u4e00-\u9fa5]这个范围基本就含括了所有的中文汉字，并且一般姓名是2个字以上
  /^[\u4e00-\u9fa5]{2,}$/
• 验证qq，qq号一般是5-11位，且开头是非0的数字
  /^[1-9]\d{4,10}$/
• 验证手机，手机号一般是11为，且有号段的限制，常见的有13[0-9] 14[57] 15[0-9] 17[1456789] 18[0-9]
  /^(13[0-9]|14[57]|15[0-9]|17[1456789]|18[0-9])\d{8}$/
• 验证邮箱，规律比较多，这里就不说明了，.号在[]里不用加转义符
  /^\w+([-+._]\w+)*@\w+([-.]\w+)*\.\w+([.-]\w+)*$/

关于递归的正确思考方式

• 递归的执行过程是不符合我们正常思维的，所以你想一步一步的回溯递归是吃力不讨好的方式。
• 其实我们对于递归应该换一种思考方式，就是很多时候我们只需要确定推出来的规律是否正确，如果规律是正确的，其实没有必要回溯递归执行的步骤。如果递归执行的结果不对，那么很大原因是规律错了，而不是程序执行错了

DOM综合考试总结

• 通过用户代理字符串识别浏览器的方法叫做代理测试
• 单选按钮支持onclick事件
• 只有innerHTML才能替换元素内部所有内容，包括文本和html标签
• window.onload是在文档所有元素加载完毕且所有外部文件都加载完毕才执行
• 如果一个函数没有写返回值，那么调用该函数它的返回值为undefined
• 当一个基本数据类型调用属性或者方法时，js内部会自动创建一个对应基本类型的包装对象
• 动态创建对象的五种方法：document.write();innerHTML;document.createElement();cloneNode();appendChild()
• for循环中设置定时器不会立即执行，要全部循环完毕才会依次执行定时器
• 函数的声明提升优先级高于变量提升