搜索到
4
篇与
的结果
-
JS常用监听事件【监听键盘、触控、鼠标、多媒体、打印、剪贴板、表单等事件】 下文中按照监听类型列举了js支持的监听事件名称及解释，内容来源于网络，如有缺失或错误欢迎各位留言指正。鼠标事件click 当用户点击某个对象时调用的事件句柄。contextmenu 在用户点击鼠标右键打开上下文菜单时触发dblclick 当用户双击某个对象时调用的事件句柄。mousedown 鼠标按钮被按下。mouseenter 当鼠标指针移动到元素上时触发。mouseleave 当鼠标指针移出元素时触发mousemove 鼠标被移动。mouseover 鼠标移到某元素之上。mouseout 鼠标从某元素移开。mouseup 鼠标按键被松开。键盘事件keydown 某个键盘按键被按下。keypress 某个键盘按键被按下并松开。keyup 某个键盘按键被松开。触控事件touchstart 用户开始触摸时触发，它的target属性返回发生触摸的元素节点。touchend 用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件一致的，就是开始触摸时所在的元素节点。它的changedTouches属性返回一个TouchList实例，包含所有不再触摸的触摸点（即Touch实例对象）。touchmove 用户移动触摸点时触发，它的target属性与touchstart事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。touchcancel 触摸点取消时触发，比如在触摸区域跳出一个模态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。框架/对象（Frame/Object）事件abort 图像的加载被中断。 beforeunload 该事件在即将离开页面（刷新或关闭）时触发error 在加载文档或图像时发生错误。hashchange 该事件在当前 URL 的锚部分发生修改时触发。load 一张页面或一幅图像完成加载。pageshow 该事件在用户访问页面时触发pagehide 该事件在用户离开当前网页跳转到另外一个页面时触发resize 窗口或框架被重新调整大小。scroll 当文档被滚动时发生的事件。unload 用户退出页面。表单事件blur 元素失去焦点时触发change 该事件在表单元素的内容改变时触发focus 元素获取焦点时触发focusin 元素即将获取焦点是触发focusout 元素即将失去焦点是触发input 元素获取用户输入是触发reset 表单重置时触发search 用户向搜索域输入文本时触发剪贴板事件copy 该事件在用户拷贝元素内容时触发cut 该事件在用户剪切元素内容时触发paste 该事件在用户粘贴元素内容时触发打印事件afterprint 该事件在页面已经开始打印，或者打印窗口已经关闭时触发beforeprint 该事件在页面即将开始打印时触发拖动事件drag 该事件在元素正在拖动时触发dragend 该事件在用户完成元素的拖动时触发dragenter 该事件在拖动的元素进入放置目标时触发dragleave 该事件在拖动元素离开放置目标时触发dragover 该事件在拖动元素在放置目标上时触发dragstart 该事件在用户开始拖动元素时触发drop 该事件在拖动元素放置在目标区域时触发多媒体（Media）事件abort 事件在视频/音频（audio/video）终止加载时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。canplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。durationchange 事件在视频/音频（audio/video）的时长发生变化时触发。emptied 当前播放列表为空时发生事件ended 事件在视频/音频（audio/video）播放结束时触发。error 事件在视频/音频（audio/video）数据加载期间发生错误时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。loadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。loadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。pause 事件在视频/音频（audio/video）暂停时触发。play 事件在视频/音频（audio/video）开始播放时触发。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。seeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。seeking 事件在用户开始重新定位视频/音频（audio/video）时触发。stalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。suspend 事件在浏览器读取媒体数据中止时触发。timeupdate 事件在当前的播放位置发送改变时触发。volumechange 事件在音量发生改变时触发。waiting 事件在视频由于要播放下一帧而需要缓冲时触发。动画事件animationend 该事件在 CSS 动画结束播放时触发animationiteration 该事件在 CSS 动画重复播放时触发animationstart 该事件在 CSS 动画开始播放时触发过渡事件transitionend 该事件在 CSS 完成过渡后触发。其他事件message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发online 该事件在浏览器开始在线工作时触发。offline 该事件在浏览器开始离线工作时触发。popstate 该事件在窗口的浏览历史（history` 对象）发生改变时触发。 show 该事件当元素在上下文菜单显示时触发storage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发toggle 该事件在用户打开或关闭 元素时触发wheel 该事件在鼠标滚轮在元素上下滚动时触发 -
js中的prototype、__proto__、constructor方法详解 提示：不要排斥，静下心来，认真读完，你就搞懂了！(可以先看一下最后的总结部分再回过头来完整看完)1. 前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _，读作“dunder proto”，“double underscore proto”的缩写），实际上，该属性在ES标准定义中的名字应该是[[Prototype]]，具体实现是由浏览器代理自己实现，谷歌浏览器的实现就是将[[Prototype]]命名为__proto__，大家清楚这个标准定义与具体实现的区别即可（名字有所差异，功能是一样的），可以通过该方式检测引擎是否支持这个属性：Object.getPrototypeOf({__proto__: null}) === null。本文基于谷歌浏览器（版本 72.0.3626.121）的实验结果所得。 现在正式开始！ 让我们从如下一个简单的例子展开讨论，并配以相关的图帮助理解：function Foo() {...}; let f1 = new Foo(); 以上代码表示创建一个构造函数Foo()，并用new关键字实例化该构造函数得到一个实例化对象f1。这里稍微补充一下new操作符将函数作为构造器进行调用时的过程：函数被调用，然后新创建一个对象，并且成了函数的上下文（也就是此时函数内部的this是指向该新创建的对象，这意味着我们可以在构造器函数内部通过this参数初始化值），最后返回该新对象的引用，详细请看：详解JavaScript中的new操作符。虽然是简简单单的两行代码，然而它们背后的关系却是错综复杂的，如下图所示： 看到这图别怕，让我们一步步剖析，彻底搞懂它们！ 图的说明：右下角为图例，红色箭头表示__proto__属性指向、绿色箭头表示prototype属性的指向、棕色实线箭头表示本身具有的constructor属性的指向，棕色虚线箭头表示继承而来的constructor属性的指向；蓝色方块表示对象，浅绿色方块表示函数（这里为了更好看清，Foo()仅代表是函数，并不是指执行函数Foo后得到的结果，图中的其他函数同理）。图的中间部分即为它们之间的联系，图的最左边即为例子代码。2. __proto__ 属性 首先，我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性，这点是致使我们产生困惑的很大原因之一。上图有点复杂，我们把它按照属性分别拆开，然后进行分析： 第一，这里我们仅留下 __proto__ 属性，它是对象所独有的，可以看到__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找…直到原型链顶端null（可以理解为原始人。。。），再往上找就相当于在null上取值，会报错（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束，null为原型链的终点），由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。 其实我们平时调用的字符串方法、数组方法、对象方法、函数方法等都是靠__proto__继承而来的。3. prototype属性 第二，接下来我们看 prototype 属性： prototype属性，别忘了一点，就是我们前面提到要牢记的两点中的第二点，它是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实所有函数都可以作为构造函数）所创建的实例的原型对象，由此可知：f1.__proto__ === Foo.prototype，它们两个完全一样。那prototype属性的作用又是什么呢？它的作用就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。4. constructor属性 最后，我们来看一下 constructor 属性： constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数，每个对象都有构造函数（本身拥有或继承而来，继承而来的要结合__proto__属性查看会更清楚点，如下图所示），从上图中可以看出Function这个对象比较特殊，它的构造函数就是它自己（因为Function可以看成是一个函数，也可以是一个对象），所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。 感谢网友的指出，这里解释一下上段中“每个对象都有构造函数”这句话。这里的意思是每个对象都可以找到其对应的constructor，因为创建对象的前提是需要有constructor，而这个constructor可能是对象自己本身显式定义的或者通过__proto__在原型链中找到的。而单从constructor这个属性来讲，只有prototype对象才有。每个函数在创建的时候，JS会同时创建一个该函数对应的prototype对象，而函数创建的对象.__proto__ === 该函数.prototype，该函数.prototype.constructor===该函数本身，故通过函数创建的对象即使自己没有constructor属性，它也能通过__proto__找到对应的constructor，所以任何对象最终都可以找到其构造函数（null如果当成对象的话，将null除外）。如下： 5. 总结 总结一下：我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。constructor属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。 本文就此结束了，希望对那些对JS中的prototype、__proto__与constructor属性有困惑的同学有所帮助。 最后，感谢这两篇博文，本文中的部分内容参考自这两篇博文：一张图理解prototype、proto和constructor的三角关系prototype和__proto__的关系是什么？小彩蛋：实现继承（相对完美、优雅）function inherit(Child, Parent) { // 继承原型上的属性 Child.prototype = Object.create(Parent.prototype) // 修复 constructor Child.prototype.constructor = Child // 存储超类 Child.super = Parent // 静态属性继承 if (Object.setPrototypeOf) { // setPrototypeOf es6 Object.setPrototypeOf(Child, Parent) } else if (Child.__proto__) { // __proto__ es6 引入，但是部分浏览器早已支持 Child.__proto__ = Parent } else { // 兼容 IE10 等陈旧浏览器 // 将 Parent 上的静态属性和方法拷贝一份到 Child 上，不会覆盖 Child 上的方法 for (var k in Parent) { if (Parent.hasOwnProperty(k) && !(k in Child)) { Child[k] = Parent[k] } } } }
-
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例 本文实例讲述了JS使用正则表达式获取小括号、中括号及花括号内容的方法。分享给大家供大家参考，具体如下：正则表达式的() [] {}有不同的意思() 是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。(\s*)表示连续空格的字符串。[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字。[\s]表示空格或者号。{}一般用来表示匹配的长度，比如 \s{3} 表示匹配三个空格，\s[1,3]表示匹配一到三个空格。(0-9) 匹配 '0-9′ 本身。 [0-9] 匹配数字（注意后面有 ，可以为空）[0-9]+ 匹配数字（注意后面有 +，不可以为空）{1-9} 写法错误。[0-9]{0,9} 表示长度为 0 到 9 的数字字符串。小括号是用于将基本的单元合成一个大的单元，而中括号就是将多个基本单元组成一个选择域，表示其中一个的意思。例子:小括号例子1、我们想匹配123这个整体(123)就是匹配"123"这个整体,大括号而[123]就是匹配1/2/3(1或者2或者3)再举个面圈教程小编碰到的一个问题例如我们想匹配 多个替换 中间多个 的时候先用中括号[]<p>[ ]*</p>匹配内容的就如下图所示那下面用小括号试试()<p>( )*</p>JS 正则表达式 获取小括号 中括号 花括号内的内容<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.nhooo.com JS获取括号内容</title> </head> <body> <script type="text/javascript"> var str="123{xxxx}456[我的]789123[你的]456(1389090)789"; var regex1 = /\((.+?)\)/g; // () 小括号 var regex2 = /\[(.+?)\]/g; // [] 中括号 var regex3 = /\{(.+?)\}/g; // {} 花括号，大括号 // 输出是一个数组 console.log(str.match(regex1)); console.log(str.match(regex2)); console.log(str.match(regex3)); </script> </body> </html>使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行结果如下：附：JAVA正则匹配语句regex =PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：JavaScript正则表达式在线测试工具：http://tools.jb51.net/regex/javascript正则表达式在线生成工具：http://tools.jb51.net/regex/create_reg更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》希望本文所述对大家JavaScript程序设计有所帮助。
-
JS正则常用校验大全 手机号(mobile phone)中国(严谨), 根据工信部2019年最新公布的手机号段const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; const str = "19119255642"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);Email(邮箱)const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; const str = "90203918@qq.com"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);座机(Tel Phone)电话(国内) 如: 0341-86091234const reg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/; const str = "0936-4211235"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符Xconst reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/; const str = "12345619991205131x"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);中文姓名const reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/; const str = "韩小韩"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);英文姓名const reg = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/; const str = "James Han"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);网址(URL)const reg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/; const str = "https://www.vvhan.com"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);必须带端口号的网址(或IP)const reg = /^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/; const str = "https://www.vvhan.com:80"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);银行卡号（10到30位, 覆盖对公/私账户）const reg = /^[1-9]\d{9,29}$/; const str = "6222026006705354000"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);帐号是否合法（字母开头，允许5-16字节，允许字母数字下划线组合）const reg = /^[a-zA-Z]\w{4,15}$/; const str = "han_666666"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);中文/汉字const reg = /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/; const str = "易航博客"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符const reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/; const str = "han@666vvx,"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);微信号(wx)，6至20位，以字母开头，字母，数字，减号，下划线const reg = /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/; const str = "kd_-666"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);邮政编码(中国)const reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/; const str = "734500"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);中文和数字const reg = /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/; const str = "易航好6啊"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);匹配连续重复的字符const reg = /(.)\1+/; const str = "112233"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);统一社会信用代码const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/; const str = "91110108772551611J"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);子网掩码(不包含 0.0.0.0)const reg = /^(254|252|248|240|224|192|128)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(255|254|252|248|240|224|192|128|0)$/; const str = "255.255.255.0"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);车牌号(新能源)const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](?:((\d{5}[A-HJK])|([A-HJK][A-HJ-NP-Z0-9][0-9]{4}))|[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳])$/; const str = "京AD92035"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);车牌号(非新能源)const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]$/; const str = "京A00599"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);车牌号(新能源+非新能源)const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/; const str = "京A12345D"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);护照（包含香港、澳门）const reg = /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/; const str = "s28233515"; console.log(`校验 ${reg.test(str) ? "正确" : "错误"}`);
