匯總前端最最常用的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)