汇总前端最最常用的JS代码片段-你值得收藏

原始出处，可拷贝：http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html

摘自：http://www.loveqiao.com/archives/768  http://www.cnblogs.com/hupan508/p/5337948.html

html5选择器

//参数均接收一个合法的css选择器element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的nodeList集合

鼠标滚轮事件

$('#showPic').on("mousewheel DOMMouseScroll", function (e) {    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));            // firefox        if (delta > 0) {                // 向上滚        } else if (delta < 0) {                // 向下滚        }});

阻止冒泡

//js方法    function stopPropagation(e) {          e = e || window.event;         if(e.stopPropagation) { //W3C阻止冒泡方法              e.stopPropagation();          } else {              e.cancelBubble = true; //IE阻止冒泡方法          }      }      document.getElementById('need_hide').onclick = function(e) {          stopPropagation(e);      } //jQuery方法$('.btn').click(function(){    return false //直接在方法里 return false 即可 })

 

阻止默认行为

e.preventDefault;//阻止默认行为

说明：该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

检测浏览器是否支持svg

function hasSVG(){    SVG_NS = 'http://www.w3.org/2000/svg';    return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;} alert(hasSVG())

检测是否是微信浏览器

function is_weixin(){    var ua = navigator.userAgent.toLowerCase();    if(ua.match(/MicroMessenger/i)=="micromessenger") {        return true;     } else {        return false;    }}alert(is_weixin())

jQuery获取鼠标在图片上的坐标

$('#imgtest').click(function(e){    //获取鼠标在图片上的坐标    alert('X：'+e.offsetX+'\n Y:'+e.offsetY);    //获取元素相对于页面的坐标    alert('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top)});

js获取验证码倒计时效果

function getCode(obj,n){    var t=obj.value;    (function(){        if(n>0){            obj.disabled=true            obj.value='倒计时'+(n--)+'秒';            setTimeout(arguments.callee,1000);        }else{            obj.disabled=false;            obj.value=t;            }        })();}

jquery类似模块加载器的方法

$.getScript("ajax/test.js", function() {  alert("Load was performed.");});

JS检测浏览器是否支持Canvas

if(!document.createElement('canvas').getContext){    alert('您的浏览器弱爆了')}else{    alert('您的浏览器很棒')}

常用正则表达式

//匹配字母、数字、中文字符/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$///验证邮箱/^\w+@([0-9a-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时间戳格式化，毫秒格式化

function formatDate(now)   {         var y=now.getFullYear();    var m=now.getMonth()+1;    var d=now.getDate();    var h=now.getHours();    var m=now.getMinutes();    var s=now.getSeconds();    return y+"-"+m+"-"+d+" "+h+":"+m+":"+s;     }     var d=new Date(1442978789184);alert(formatDate(d));

js字符限定，一个汉字算两个字符

http://www.loveqiao.com/archives/545

js判断是否移动端及浏览器内核

http://www.loveqiao.com/archives/581

getBoundingClientRect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; //相当于//jquery的： this.offset().left、this.offset().top//js的：this.offsetLeft、this.offsetTop

HTML5全屏

function 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)