美文网首页js特效
[前端学习]js特效部分学习笔记,第三天

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

作者: 印象rcj | 来源:发表于2017-10-26 21:55 被阅读0次

    鼠标事件

    • 有些之前应该记录过,这里作一个总结:
      元素.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循环中设置定时器不会立即执行,要全部循环完毕才会依次执行定时器
    • 函数的声明提升优先级高于变量提升

    相关文章

      网友评论

        本文标题:[前端学习]js特效部分学习笔记,第三天

        本文链接:https://www.haomeiwen.com/subject/havqpxtx.html