WEBING
segmentfault.com/a/1190000014700549
一凝垛、預(yù)加載圖像
如果你的網(wǎng)頁中需要使用大量初始不可見的（例如，懸停的）圖像，那么可以預(yù)加載這些圖像。
二俯邓、檢查圖像是否加載
有時為了繼續(xù)腳本，你可能需要檢查圖像是否全部加載完畢熔号。
三稽鞭、自動修復(fù)破壞的圖像
逐個替換已經(jīng)破壞的圖像鏈接是非常痛苦的。不過引镊，下面這段簡單的代碼可以幫助你朦蕴。
四篮条、懸停切換
當(dāng)用戶鼠標(biāo)懸停在可點(diǎn)擊的元素上時，可添加類到元素中吩抓，反之則移除類涉茧。
只需要添加必要的 CSS 即可。更簡單的方法是使用 toggleClass() 方法疹娶。
五伴栓、鼠標(biāo)滾輪
$('#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');
????}
});
六、鼠標(biāo)坐標(biāo)
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){
????//獲取鼠標(biāo)在圖片上的坐標(biāo)
????console.log('X：'?+?event.offsetX+'\n Y:'?+?event.offsetY);
????//獲取元素相對于頁面的坐標(biāo)
????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();
});
八移斩、阻止默認(rèn)行為
// 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());
十三室琢、檢測是否移動端及瀏覽器內(nèi)核
var?browser?=?{
????versions:?function()?{
????????var?u?=?navigator.userAgent;
????????return?{
????????????trident:?u.indexOf('Trident')?> -1,?//IE內(nèi)核
????????????presto:?u.indexOf('Presto')?> -1,?//opera內(nèi)核
????????????webKit:?u.indexOf('AppleWebKit')?> -1,?//蘋果、谷歌內(nèi)核
????????????gecko:?u.indexOf('Firefox')?> -1,?//火狐內(nèi)核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/";
}
十五盈滴、檢測瀏覽器內(nèi)核
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瀏覽器??
????}????
}
十六、強(qiáng)制移動端頁面橫屏顯示
$(?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);
十八巢钓、獲得/失去焦點(diǎn)
1、JavaScript實現(xiàn)
// JavaScript
window.onload?=?function(){
????var?oIpt?=?document.getElementById("i_input");
????if(oIpt.value?==?"會員卡號/手機(jī)號"){
????????oIpt.style.color?=?"#888";
????}else{
????????oIpt.style.color?=?"#000";
????};
????oIpt.onfocus?=?function(){
????????if(this.value?==?"會員卡號/手機(jī)號"){
????????????this.value="";
????????????this.style.color?=?"#000";
????????????this.type?=?"password";
????????}else{
????????????this.style.color?=?"#000";
????????}
????};
????oIpt.onblur?=?function(){
????????if(this.value?==?""){
????????????this.value="會員卡號/手機(jī)號";
????????????this.style.color?=?"#888";
????????????this.type?=?"text";
????????}
????};
}
十九疗垛、正則表達(dá)式
//驗證郵箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//驗證手機(jī)號
/^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調(diào)用錯誤處理
當(dāng) Ajax 調(diào)用返回 404 或 500 錯誤時咬展，就執(zhí)行錯誤處理程序。如果沒有定義處理程序瞒斩，其他的 jQuery 代碼或會就此罷工破婆。定義一個全局的 Ajax 錯誤處理程序
二十二、鏈?zhǔn)讲寮{(diào)用
jQuery 允許“鏈?zhǔn)健辈寮姆椒ㄕ{(diào)用胸囱，以減輕反復(fù)查詢 DOM 并創(chuàng)建多個 jQuery 對象的過程祷舀。
通過使用鏈?zhǔn)剑梢愿纳?/p>
還有一種方法是在（前綴$）變量中高速緩存元素
鏈?zhǔn)胶透咚倬彺娴姆椒ǘ际?jQuery 中可以讓代碼變得更短和更快的最佳做法烹笔。
本文在GitHub的地址 Common-code
閱讀更多
參考文章 『總結(jié)』web前端開發(fā)常用代碼整理（https://segmentfault.com/a/1190000011087315#articleHeader21）
