超實(shí)用代碼片段

一、預(yù)加載圖像

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


二、檢查圖像是否加載

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

你也可以使用 ID 或 CLASS 替換<img> 標(biāo)簽來檢查某個(gè)特定的圖像是否被加載。


三、自動(dòng)修復(fù)破壞的圖像

逐個(gè)替換已經(jīng)破壞的圖像鏈接是非常痛苦的。不過，下面這段簡(jiǎn)單的代碼可以幫助你。


四、懸停切換

當(dāng)用戶鼠標(biāo)懸停在可點(diǎn)擊的元素上時(shí)，可添加類到元素中，反之則移除類。

只需添加必要的 CSS 即可。更簡(jiǎn)單的方法是使用 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);


????//獲取元素相對(duì)于頁面的坐標(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();

});


十一、檢測(cè)瀏覽器是否支持svg

function?isSupportSVG()?{

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

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

}

console.log(isSupportSVG());


十二、檢測(cè)瀏覽器是否支持canvas

function?isSupportCanvas()?{

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

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

????}else{

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

????}

}

console.log(isSupportCanvas());


十三、檢測(cè)是否是微信瀏覽器

function?isWeiXinClient()?{

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

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

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

????}?else?{

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

????}

}

alert(isWeiXinClient());


十四、檢測(cè)是否移動(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)端');

}


十五、檢測(cè)是否電腦端/移動(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/";

}


十六、檢測(cè)瀏覽器內(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ì)員卡號(hào)/手機(jī)號(hào)"/>

// JavaScript

window.onload?=?function(){

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

????if(oIpt.value?==?"會(huì)員卡號(hào)/手機(jī)號(hào)"){

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

????}else{

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

????};

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

????????if(this.value?==?"會(huì)員卡號(hào)/手機(jī)號(hào)"){

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

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

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

????????}else{

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

????????}

????};

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

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

????????????this.value="會(huì)員卡號(hào)/手機(jī)號(hào)";

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

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

????????}

????};

}


2、jQuery實(shí)現(xiàn)

<input type="text" class="oldpsw" id="showPwd" value="請(qǐng)輸入您的注冊(cè)密碼"/>

<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?=='請(qǐng)輸入您的注冊(cè)密碼')?{

????????$("#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)建對(duì)象

????????????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ò)誤，請(qǐng)重新上傳');

????????obj.value?=?'';

????}

}


二十二、正則表達(dá)式

//驗(yàn)證郵箱

/^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/


//驗(yàn)證手機(jī)號(hào)

/^1[3|5|8|7]d{9}$/


//驗(yàn)證URL

/^http://.+./


//驗(yàn)證身份證號(hào)碼

/(^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 對(duì)象的過程。

通過使用鏈?zhǔn)?，可以改?/p>

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

鏈?zhǔn)胶透咚倬彺娴姆椒ǘ际?jQuery 中可以讓代碼變得更短和更快的最佳做法。


感興趣的小伙伴可以小編公眾號(hào)【grain先森】，獲取更多驚喜干貨~

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容