分享前端開發(fā)常用的代碼片段

WEBING

segmentfault.com/a/1190000014700549

一、預加載圖像

如果你的網頁中需要使用大量初始不可見的（例如，懸停的）圖像，那么可以預加載這些圖像。

二、檢查圖像是否加載

有時為了繼續(xù)腳本，你可能需要檢查圖像是否全部加載完畢。

三、自動修復破壞的圖像

逐個替換已經破壞的圖像鏈接是非常痛苦的。不過，下面這段簡單的代碼可以幫助你。

四、懸停切換

當用戶鼠標懸停在可點擊的元素上時，可添加類到元素中，反之則移除類。

只需要添加必要的 CSS 即可。更簡單的方法是使用 toggleClass() 方法。


五、鼠標滾輪

$('#content').on("mousewheel DOMMouseScroll",?function?(event)?{

????// chrome & ie || // firefox

????var?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');

????}

});

六、鼠標坐標

1、JavaScript實現(xiàn)

X: Y:

function?mousePosition(ev){

????if(ev.pageX?||?ev.pageY){

????????return?{x:ev.pageX,?y:ev.pageY};

????}

????return?{

????????x:ev.clientX?+?document.body.scrollLeft?-?document.body.clientLeft,

????????y:ev.clientY?+?document.body.scrollTop?-?document.body.clientTop

????};

}


function?mouseMove(ev){

????ev?=?ev?||?window.event;


????var?mousePos?=?mousePosition(ev);


????document.getElementById('xxx').value?=?mousePos.x;

????document.getElementById('yyy').value?=?mousePos.y;

}

document.onmousemove?=?mouseMove;

2、jQuery實現(xiàn)

$('#ele').click(function(event){

????//獲取鼠標在圖片上的坐標

????console.log('X：'?+?event.offsetX+'\n Y:'?+?event.offsetY);


????//獲取元素相對于頁面的坐標

????console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);

});

七、禁止移動端瀏覽器頁面滾動

1、HTML實現(xiàn)

2、JavaScript實現(xiàn)

document.addEventListener('touchmove',?function(event)?{

????event.preventDefault();

});

八、阻止默認行為

// JavaScript

document.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();

});

九、阻止冒泡

// JavaScript

document.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();

});

十、檢測瀏覽器是否支持svg

function?isSupportSVG()?{

????var?SVG_NS?=?'http://www.w3.org/2000/svg';

????return?!!document.createElementNS?&&!!document.createElementNS(SVG_NS,'svg').createSVGRect;

}


console.log(isSupportSVG());

十一、檢測瀏覽器是否支持canvas

function?isSupportCanvas()?{

????if(document.createElement('canvas').getContext){

????????return?true;

????}else{

????????return?false;

????}

}


console.log(isSupportCanvas());

十二、檢測是否是微信瀏覽器

function?isWeiXinClient()?{

????var?ua?=?navigator.userAgent.toLowerCase();

????if?(ua.match(/MicroMessenger/i)=="micromessenger")?{

????????return?true;

????}?else?{

????????return?false;

????}

}


alert(isWeiXinClient());

十三、檢測是否移動端及瀏覽器內核

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('移動端');

}

十四、檢測是否電腦端/移動端

var?browser={

????versions:function(){

????????var?u?=?navigator.userAgent,?app?=?navigator.appVersion;

????????var?sUserAgent?=?navigator.userAgent;

????????return?{

????????trident:?u.indexOf('Trident')?> -1,

????????presto:?u.indexOf('Presto')?> -1,

????????isChrome:?u.indexOf("chrome")?> -1,

????????isSafari: !u.indexOf("chrome")?> -1?&&?(/webkit|khtml/).test(u),

????????isSafari3: !u.indexOf("chrome")?> -1?&&?(/webkit|khtml/).test(u)?&&u.indexOf('webkit/5')?!= -1,

????????webKit:?u.indexOf('AppleWebKit')?> -1,

????????gecko:?u.indexOf('Gecko')?> -1?&&?u.indexOf('KHTML')?== -1,

????????mobile: !!u.match(/AppleWebKit.*Mobile.*/),

????????ios: !!u.match(/\(i[^;]+;(?U;)??CPU.+Mac?OS?X/),

????????android:?u.indexOf('Android')?> -1?||?u.indexOf('Linux')?> -1,

????????iPhone:?u.indexOf('iPhone')?> -1,

????????iPad:?u.indexOf('iPad')?> -1,

????????iWinPhone:?u.indexOf('Windows Phone')?> -1

????????};

????}()

}

if(browser.versions.mobile?||?browser.versions.iWinPhone){

????window.location?=?"http:/www.baidu.com/m/";

}

十五、檢測瀏覽器內核

function?getInternet(){????

????if(navigator.userAgent.indexOf("MSIE")>0)?{????

??????return?"MSIE";?//IE瀏覽器??

????}??


????if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){????

??????return?"Firefox";?//Firefox瀏覽器??

????}??


????if(isSafari=navigator.userAgent.indexOf("Safari")>0)?{????

??????return?"Safari";??????//Safan瀏覽器??

????}??


????if(isCamino=navigator.userAgent.indexOf("Camino")>0){????

??????return?"Camino";?//Camino瀏覽器??

????}??

????if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){????

??????return?"Gecko";????//Gecko瀏覽器??

????}????

}

十六、強制移動端頁面橫屏顯示

$(?window?).on(?"orientationchange",?function(?event?)?{

????if?(event.orientation=='portrait')?{

????????$('body').css('transform',?'rotate(90deg)');

????}?else?{

????????$('body').css('transform',?'rotate(0deg)');

????}

});

$(?window?).orientationchange();

十七、電腦端頁面全屏顯示

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

十八、獲得/失去焦點

1、JavaScript實現(xiàn)

// JavaScript

window.onload?=?function(){

????var?oIpt?=?document.getElementById("i_input");


????if(oIpt.value?==?"會員卡號/手機號"){

????????oIpt.style.color?=?"#888";

????}else{

????????oIpt.style.color?=?"#000";

????};


????oIpt.onfocus?=?function(){

????????if(this.value?==?"會員卡號/手機號"){

????????????this.value="";

????????????this.style.color?=?"#000";

????????????this.type?=?"password";

????????}else{

????????????this.style.color?=?"#000";

????????}

????};


????oIpt.onblur?=?function(){

????????if(this.value?==?""){

????????????this.value="會員卡號/手機號";

????????????this.style.color?=?"#888";

????????????this.type?=?"text";

????????}

????};

}



十九、正則表達式

//驗證郵箱

/^\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)$)/


//匹配字母、數(shù)字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/


//匹配中文字符

/[\u4e00-\u9fa5]/


//匹配雙字節(jié)字符(包括漢字)

/[^\x00-\xff]/

二十、限制字符數(shù)

//字符串截取

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

????}

});


二十一、AJAX調用錯誤處理

當 Ajax 調用返回 404 或 500 錯誤時，就執(zhí)行錯誤處理程序。如果沒有定義處理程序，其他的 jQuery 代碼或會就此罷工。定義一個全局的 Ajax 錯誤處理程序

二十二、鏈式插件調用

jQuery 允許“鏈式”插件的方法調用，以減輕反復查詢 DOM 并創(chuàng)建多個 jQuery 對象的過程。

通過使用鏈式，可以改善

還有一種方法是在（前綴$）變量中高速緩存元素

鏈式和高速緩存的方法都是 jQuery 中可以讓代碼變得更短和更快的最佳做法。

本文在GitHub的地址 Common-code

閱讀更多

參考文章 『總結』web前端開發(fā)常用代碼整理（https://segmentfault.com/a/1190000011087315#articleHeader21）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容