（转自 web前端中常用片段）
HTML5 DOM 选择器
-
1234567// querySelector() 返回匹配到的第一个元素var item = document . querySelector ( '.item' ) ;console . log ( item ) ;// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document . querySelectorAll ( '.item' ) ;console . log ( items [ 0 ]) ;
阻止默认行为
-
1234567891011121314151617// 原生jsdocument . getElementById ( 'btn' ) . addEventListener ( 'click' , function ( event ) {event = event || window . event ；if ( event . preventDefault ) {// w3c方法 阻止默认行为event . preventDefault ( ) ;} else {// ie 阻止默认行为event . returnValue = false ;}} , false ) ;// jQuery$ ( '#btn' ) . on ( 'click' , function ( event ) {event . preventDefault ( ) ;}) ;
阻止冒泡
-
1234567891011121314151617// 原生jsdocument . getElementById ( 'btn' ) . addEventListener ( 'click' , function ( event ) {event = event || window . event ；if ( event . stopPropagation ) {// w3c方法 阻止冒泡event . stopPropagation ( ) ;} else {// ie 阻止冒泡event . cancelBubble = true ;}} , false ) ;// jQuery$ ( '#btn' ) . on ( 'click' , function ( event ) {event . stopPropagation ( ) ;}) ;
鼠标滚轮事件
-
123456789101112$ ( '#content' ) . on ( "mousewheel DOMMouseScroll" , function ( event ) {// chrome & ie || // firefoxvar delta = ( event . originalEvent . wheelDelta && ( event . originalEvent . wheelDelta > 0 ? 1 : -1 )) || ( event . originalEvent . detail && ( event . originalEvent . detail > 0 ? -1 : 1 )) ;if ( delta > 0 ) {// 向上滚动console . log ( 'mousewheel top' ) ;} else if ( delta < 0 ) {// 向下滚动console . log ( 'mousewheel bottom' ) ;}}) ;
检测浏览器是否支持svg
-
1234567function isSupportSVG ( ) {var SVG_NS = 'http://www.w3.org/2000/svg' ;return !! document . createElementNS &&!! document . createElementNS ( SVG_NS , 'svg' ) . createSVGRect ;}// 测试console . log ( isSupportSVG ( )) ;
检测浏览器是否支持canvas
-
12345678910function isSupportCanvas ( ) {if ( document . createElement ( 'canvas' ) . getContext ) {return true ;} else {return false ;}}// 测试，打开谷歌浏览器控制台查看结果console . log ( isSupportCanvas ( )) ;
检测是否是微信浏览器
-
1234567891011function isWeiXinClient ( ) {var ua = navigator . userAgent . toLowerCase ( ) ;if ( ua . match ( /MicroMessenger/i ) == "micromessenger" ) {return true ;} else {return false ;}}// 测试alert ( isWeiXinClient ( )) ;
jQuery 获取鼠标在图片上的坐标
-
1234567$ ( '#myImage' ) . click ( function ( event ) {//获取鼠标在图片上的坐标console . log ( 'X：' + event . offsetX + ' \n Y:' + event . offsetY ) ;//获取元素相对于页面的坐标console . log ( 'X：' +$ ( this ) . offset ( ) . left + ' \n Y:' +$ ( this ) . offset ( ) . top ) ;}) ;
验证码倒计时代码
-
12<!-- dom -->< input id = "send" type = "button" value = "发送验证码" >
-
1234567891011121314151617181920// 原生js版本var times = 60 , // 临时设为60秒timer = null ;document . getElementById ( 'send' ) . onclick = function ( ) {// 计时开始timer = setInterval ( function ( ) {times -- ;if ( times <= 0 ) {send . value = '发送验证码' ;clearInterval ( timer ) ;send . disabled = false ;times = 60 ;} else {send . value = times + '秒后重试' ;send . disabled = true ;}} , 1000 ) ;}
-
12345678910111213141516171819202122// jQuery版本var times = 60 ,timer = null ;$ ( '#send' ) . on ( 'click' , function ( ) {var $this = $ ( this ) ;// 计时开始timer = setInterval ( function ( ) {times -- ;if ( times <= 0 ) {$this . val ( '发送验证码' ) ;clearInterval ( timer ) ;$this . attr ( 'disabled' , false ) ;times = 60 ;} else {$this . val ( times + '秒后重试' ) ;$this . attr ( 'disabled' , true ) ;}} , 1000 ) ;}) ;
常用的一些正则表达式
-
1234567891011121314151617181920//匹配字母、数字、中文字符/ ^([ A - Za - z0 - 9 ] | [ \u4e00 - \u9fa5 ])*$ ///验证邮箱/^\ w +@ ([ 0 -9 a - zA - Z ] + [ . ]) + [ a - z ] { 2 , 4 } $ ///验证手机号/^ 1 [ 3| 5| 8| 7 ]\ d { 9 } $ ///验证URL/^ http :\ /\ / . +\ . ///验证身份证号码/ ( ^\ d { 15 } $ )| ( ^\ d { 17 } ([ 0-9 ]| X| x ) $ ) ///匹配中文字符的正则表达式/ [ \u4e00 - \u9fa5 ] ///匹配双字节字符(包括汉字在内)/ [ ^\ x00 -\ xff ] /
js时间戳、毫秒格式化
-
1234567891011121314function formatDate ( now ) {var y = now . getFullYear ( ) ;var m = now . getMonth ( ) + 1 ; // 注意js里的月要加1var d = now . getDate ( ) ;var h = now . getHours ( ) ;var m = now . getMinutes ( ) ;var s = now . getSeconds ( ) ;return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s ;}var nowDate = new Date ( 1442978789184 ) ;alert ( formatDate ( nowDate )) ;
js限定字符数（注意：一个汉字算2个字符）
-
1< input id = "txt" type = "text" >
-
123456789101112131415161718//字符串截取function getByteVal ( val , max ) {var returnValue = '' ;var byteValLen = 0 ;for ( var i = 0 ; i < val . length ; i ++ ) {if ( val [ i ] . match ( / [^ \x00 - \xff ] /ig ) != null ) byteValLen += 2 ; else byteValLen += 1 ;if ( byteValLen > max ) break ;returnValue += val [ i ] ;}return returnValue ;}$ ( '#txt' ) . on ( 'keyup' , function ( ) {var val = this . value ;if ( val . replace ( / [^ \x00 - \xff ] /g , "**" ) . length > 14 ) {this . value = getByteVal ( val , 14 ) ;}}) ;
js判断是否移动端及浏览器内核
-
123456789101112131415161718192021var browser = {versions : function ( ) {var u = navigator . userAgent ;return {trident : u . indexOf ( 'Trident' ) > -1 , //IE内核presto : u . indexOf ( 'Presto' ) > -1 , //opera内核webKit : u . indexOf ( 'AppleWebKit' ) > -1 , //苹果、谷歌内核gecko : u . indexOf ( 'Firefox' ) > -1 , //火狐内核Geckomobile : !! u . match ( /AppleWebKit .* Mobile .* / ) , //是否为移动终端ios : !! u . match ( / \( i [^ ; ]+ ; ( U; )? CPU .+ Mac OS X/ ) , //iosandroid : u . indexOf ( 'Android' ) > -1 || u . indexOf ( 'Linux' ) > -1 , //androidiPhone : u . indexOf ( 'iPhone' ) > -1 , //iPhoneiPad : u . indexOf ( 'iPad' ) > -1 , //iPadwebApp : u . indexOf ( 'Safari' ) > -1 //Safari} ;}}if ( browser . versions . mobile ( ) || browser . versions . ios ( ) || browser . versions . android ( ) || browser . versions . iPhone ( ) || browser . versions . iPad ( )) {alert ( '移动端' ) ;}
之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js ，大家可以 Googel 或 百度
GItHub仓库地址： https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置
-
123456//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document . getElementById ( 'myDiv' ) ;var x = myDiv . getBoundingClientRect ( ) . left ;var y = myDiv . getBoundingClientRect ( ) . top ;// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop
HTML5全屏
-
12345678910111213function fullscreen ( element ) {if ( element . requestFullscreen ) {element . requestFullscreen ( ) ;} else if ( element . mozRequestFullScreen ) {element . mozRequestFullScreen ( ) ;} else if ( element . webkitRequestFullscreen ) {element . webkitRequestFullscreen ( ) ;} else if ( element . msRequestFullscreen ) {element . msRequestFullscreen ( ) ;}}fullscreen ( document . documentElement ) ;
扫一扫
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
