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

275 查看

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字符限定,一个汉字算两个字符
<input type="text" id="txt">
//字符串截取
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').bind('keyup',function(){
    var val=this.value;
    if(val.replace(/[^\x00-\xff]/g,"**").length>14){
        this.value=getByteVal(val,14)
    }
})
js判断是否移动端及浏览器内核
var 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, //火狐内核Gecko
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
            iPhone: u.indexOf('iPhone') > -1 , //iPhone
            iPad: u.indexOf('iPad') > -1, //iPad
            webApp: u.indexOf('Safari') > -1 //Safari
        };
    }()
}

if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
    alert('移动端');
}
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)