一、預(yù)加載圖像
如果你的網(wǎng)頁中需要使用大量初始不可見的（例如，懸停的）圖像，那么可以預(yù)加載這些圖像。
二、檢查圖像是否加載
有時(shí)為了繼續(xù)腳本，你可能需要檢查圖像是否全部加載完畢。
你也可以使用 ID 或 CLASS 替換<img> 標(biāo)簽來檢查某個(gè)特定的圖像是否被加載。
三、自動(dòng)修復(fù)破壞的圖像
逐個(gè)替換已經(jīng)破壞的圖像鏈接是非常痛苦的。不過，下面這段簡單的代碼可以幫助你。
四、懸停切換
當(dāng)用戶鼠標(biāo)懸停在可點(diǎn)擊的元素上時(shí)，可添加類到元素中，反之則移除類。
只需添加必要的 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實(shí)現(xiàn)
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
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實(shí)現(xiàn)
$('#ele').click(function(event){
????//獲取鼠標(biāo)在圖片上的坐標(biāo)
????console.log('X：'?+?event.offsetX+' Y:'?+?event.offsetY);
????//獲取元素相對于頁面的坐標(biāo)
????console.log('X：'+$(this).offset().left+' Y:'+$(this).offset().top);
});
八、禁止移動(dòng)端瀏覽器頁面滾動(dòng)
1、HTML實(shí)現(xiàn)
<body ontouchmove="event.preventDefault()" >
2、JavaScript實(shí)現(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());
十四、檢測是否移動(dòng)端及瀏覽器內(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.*/),?//是否移動(dòng)終端
????????????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('移動(dòng)端');
}
十五、檢測是否電腦端/移動(dòng)端
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)制移動(dò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實(shí)現(xiàn)
<input id="i_input" type="text" value="會(huì)員卡號/手機(jī)號"/>
// JavaScript
window.onload?=?function(){
????var?oIpt?=?document.getElementById("i_input");
????if(oIpt.value?==?"會(huì)員卡號/手機(jī)號"){
????????oIpt.style.color?=?"#888";
????}else{
????????oIpt.style.color?=?"#000";
????};
????oIpt.onfocus?=?function(){
????????if(this.value?==?"會(huì)員卡號/手機(jī)號"){
????????????this.value="";
????????????this.style.color?=?"#000";
????????????this.type?=?"password";
????????}else{
????????????this.style.color?=?"#000";
????????}
????};
????oIpt.onblur?=?function(){
????????if(this.value?==?""){
????????????this.value="會(huì)員卡號/手機(jī)號";
????????????this.style.color?=?"#888";
????????????this.type?=?"text";
????????}
????};
}
2、jQuery實(shí)現(xiàn)
<input type="text" class="oldpsw" id="showPwd" value="請輸入您的注冊密碼"/>
<input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>
// jQuery
$("#showPwd").focus(function()?{
????var?text_value=$(this).val();
????if?(text_value?=='請輸入您的注冊密碼')?{
????????$("#showPwd").hide();
????????$("#password").show().focus();
????}
});
$("#password").blur(function()?{
????var?text_value?=?$(this).val();
????if?(text_value?==?"")?{
????????$("#showPwd").show();
????????$("#password").hide();
????}
});
二十、獲取上傳文件大小
<input type="file" id="filePath" onchange="getFileSize(this)"/>
// 兼容IE9低版本
function?getFileSize(obj){
????var?filesize;
????if(obj.files){
????????filesize?=?obj.files[0].size;
????}else{
????????try{
????????????var?path,fso;
????????????path?=?document.getElementById('filePath').value;
????????????fso?=?new?ActiveXObject("Scripting.FileSystemObject");
????????????filesize?=?fso.GetFile(path).size;
????????}
????????catch(e){
????????????// 在IE9及低版本瀏覽器，如果不容許ActiveX控件與頁面交互，點(diǎn)擊了否，就無法獲取size
????????????console.log(e.message);?// Automation 服務(wù)器不能創(chuàng)建對象
????????????filesize?=?'error';?// 無法獲取
????????}
????}
????return?filesize;
}
二十一、限制上傳文件類型
1、高版本瀏覽器
<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"/>
2、限制圖片
<input type="file" class="file" value="上傳" accept="image/*">
3、低版本瀏覽器
<input type="file" id="filePath" onchange="limitTypes()">
/* 通過擴(kuò)展名，檢驗(yàn)文件格式。
* @parma filePath{string} 文件路徑
* @parma acceptFormat{Array} 允許的文件類型
* @result 返回值{Boolen}：true or false
*/
function?checkFormat(filePath,acceptFormat){
????var?resultBool=?false,
????????ex?=?filePath.substring(filePath.lastIndexOf('.')?+?1);
????????ex?=?ex.toLowerCase();
????for(var?i?=?0;?i?<?acceptFormat.length;?i++){
???? if(acceptFormat[i]?==?ex){
????????????resultBool?=?true;
????????????break;
???? }
????}
????return?resultBool;
};
function?limitTypes(){
????var?obj?=?document.getElementById('filePath');
????var?path?=?obj.value;
????var?result?=?checkFormat(path,['bmp','jpg','jpeg','png']);
????if(!result){
????????alert('上傳類型錯(cuò)誤，請重新上傳');
????????obj.value?=?'';
????}
}
二十二、正則表達(dá)式
//驗(yàn)證郵箱
/^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//驗(yàn)證手機(jī)號
/^1[3|5|8|7]d{9}$/
//驗(yàn)證URL
/^http://.+./
//驗(yàn)證身份證號碼
/(^d{15}$)|(^d{17}([0-9]|X|x)$)/
//匹配字母、數(shù)字、中文字符
/^([A-Za-z0-9]|[u4e00-u9fa5])*$/
//匹配中文字符
/[u4e00-u9fa5]/
//匹配雙字節(jié)字符(包括漢字)
/[^x00-xff]/
二十三、限制字符數(shù)
<input id="txt" type="text">
//字符串截取
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);
????}
});
二十四、驗(yàn)證碼倒計(jì)時(shí)
<input id="send" type="button" value="發(fā)送驗(yàn)證碼">
// JavaScript
var times = 60, // 時(shí)間設(shè)置60秒
?timer = null;
document.getElementById('send').onclick = function () {
?// 計(jì)時(shí)開始
?timer = setInterval(function () {
?times--;
?if (times <= 0) {
?send.value = '發(fā)送驗(yàn)證碼';
?clearInterval(timer);
?send.disabled = false;
?times = 60;
?} else {
?send.value = times + '秒后重試';
?send.disabled = true;
?}
?}, 1000);
}
var?times?=?60,
????timer?=?null;
$('#send').on('click',?function?()?{
????var?$this?=?$(this);
????// 計(jì)時(shí)開始
????timer?=?setInterval(function?()?{
????????times--;
????????if?(times?<=?0)?{
????????????$this.val('發(fā)送驗(yàn)證碼');
????????????clearInterval(timer);
????????????$this.attr('disabled',?false);
????????????times?=?60;
????????}?else?{
????????????$this.val(times?+?'秒后重試');
????????????$this.attr('disabled',?true);
????????}
????},?1000);
});
二十五、時(shí)間倒計(jì)時(shí)
<p id="_lefttime"></p>
var?times?=?60,
????timer?=?null;
$('#send').on('click',?function?()?{
????var?$this?=?$(this);
????// 計(jì)時(shí)開始
????timer?=?setInterval(function?()?{
????????times--;
????????if?(times?<=?0)?{
????????????$this.val('發(fā)送驗(yàn)證碼');
????????????clearInterval(timer);
????????????$this.attr('disabled',?false);
????????????times?=?60;
????????}?else?{
????????????$this.val(times?+?'秒后重試');
????????????$this.attr('disabled',?true);
????????}
????},?1000);
});
二十六、倒計(jì)時(shí)跳轉(zhuǎn)
<div id="showtimes"></div>
// 設(shè)置倒計(jì)時(shí)秒數(shù)??
var?t?=?10;??
// 顯示倒計(jì)時(shí)秒數(shù)??
function?showTime(){??
????t?-=?1;??
????document.getElementById('showtimes').innerHTML=?t;??
????if(t==0){??
????????location.href='error404.asp';??
????}??
????//每秒執(zhí)行一次 showTime()??
????setTimeout("showTime()",1000);??
}??
showTime();
二十七、時(shí)間戳、毫秒格式化
function?formatDate(now)?{
????var?y?=?now.getFullYear();
????var?m?=?now.getMonth()?+?1;?// 注意 JavaScript 月份+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?nowDate?=?new?Date(1442978789184);
alert(formatDate(nowDate));
二十八、當(dāng)前日期
var?calculateDate?=?function(){
????var?date?=?new?Date();
????var?weeks?=?["日","一","二","三","四","五","六"];
????return?date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
????date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
????$("#dateSpan").html(calculateDate());
});
二十九、判斷周六/周日
<p id="text"></p>
function?time(y,m){
????var?tempTime?=?new?Date(y,m,0);
????var?time?=?new?Date();
????var?saturday?=?new?Array();
????var?sunday?=?new?Array();
????for(var?i=1;i<=tempTime.getDate();i++){
????????time.setFullYear(y,m-1,i);
????????var?day?=?time.getDay();
????????if(day?==?6){
????????????saturday.push(i);
????????}else?if(day?==?0){
????????????sunday.push(i);
????????}
????}
????var?text?=?y+"年"+m+"月份"+"<br />"
????????????????+"周六："+saturday.toString()+"<br />"
????????????????+"周日："+sunday.toString();
????document.getElementById("text").innerHTML?=?text;
}
time(2018,5);
三十、AJAX調(diào)用錯(cuò)誤處理
當(dāng) Ajax 調(diào)用返回 404 或 500 錯(cuò)誤時(shí)，就執(zhí)行錯(cuò)誤處理程序。如果沒有定義處理程序，其他的 jQuery 代碼或會(huì)就此罷工。定義一個(gè)全局的 Ajax 錯(cuò)誤處理程序
三十一、鏈?zhǔn)讲寮{(diào)用
jQuery 允許“鏈?zhǔn)健辈寮姆椒ㄕ{(diào)用，以減輕反復(fù)查詢 DOM 并創(chuàng)建多個(gè) jQuery 對象的過程。
通過使用鏈?zhǔn)?，可以改?/p>
還有一種方法是在（前綴$）變量中高速緩存元素
鏈?zhǔn)胶透咚倬彺娴姆椒ǘ际?jQuery 中可以讓代碼變得更短和更快的最佳做法。
感興趣的小伙伴可以小編公眾號【grain先森】，獲取更多驚喜干貨~
