[前端学习]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循环中设置定时器不会立即执行,要全部循环完毕才会依次执行定时器
  • 函数的声明提升优先级高于变量提升
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容