本文主要匯總自己收集與總結(jié)的一些jquery代碼片段與心得體會(huì)颊乘，與大家分享，如果有錯(cuò)誤醉锄，請(qǐng)輕拍磚~
-
返回頂部按鈕
// Back to top
$('.top').click(function(e){
e.preventDefault();
$('html,body').animate({scrollTop:0});
});
Note：再加這段代碼的時(shí)候乏悄，可以先判斷滾輪劃過(guò)屏幕多少才顯示處返回Top的按鈕，比如知乎上面的文章就是如此恳不，還可以通過(guò)設(shè)置scrollTop來(lái)達(dá)到你想要滾動(dòng)到的地方,讓animate自己計(jì)算動(dòng)畫(huà)時(shí)間檩小。 -
使用jQuery插件Preload Images
用途：當(dāng)你的頁(yè)面需要加載很多圖片的時(shí)候，比如外觀360車(chē)圖烟勋，一般至少需要36張圖片规求，還有瀑布流需要大量的圖片加載，這個(gè)時(shí)間通過(guò)插件可以將這些圖片預(yù)加載或者點(diǎn)擊的時(shí)候在預(yù)加載卵惦，提高網(wǎng)站訪(fǎng)問(wèn)速度阻肿，適用場(chǎng)景自己用后體驗(yàn)。
$.preloadImages = function(){
for(var i = 0; i < arguments,length; i++){
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('images/1.jpg','images/2.jpg',...);
//這塊可以將arguments轉(zhuǎn)換成數(shù)組傳進(jìn)去:
var srcList = [
'images1.jpg',
''...
] -
判斷圖片是否加載成功
$('img').load(function(){
console.log('image load successful!');
})
Note：注意 console在ie8下不識(shí)別沮尿，會(huì)報(bào)錯(cuò)哦. -
給圖片加上error事件丛塌，當(dāng)圖片破碎替換成其他的圖片，不至于太難看
$('img').on('error', function(){
if(!$(this).hasClass('broken-image') ){
$(this).prop('src', 'omg/broken.png').addClass('broken-image');
}
}); -
使用Toggle畜疾，在hover的時(shí)候增加class姨伤，鼠標(biāo)移出后刪除class
應(yīng)用場(chǎng)景一般是給當(dāng)前的對(duì)象加css動(dòng)畫(huà)的class
$('.btn').hover(function(){
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
//簡(jiǎn)寫(xiě)：
$('.btn').hover(function(){
$(this).toggleClass('active');
})
Note：當(dāng)然css也是可以解決的，不過(guò)這樣做在很多時(shí)候還是有優(yōu)勢(shì)的. -
禁用文本框
$('input[type="submit"]').prop('disabled', true); -
使用:selected選擇器來(lái)獲取option的值庸疾，并且其只適用于<option>
$('select option:selected').val();
Note：這里提到主要是為了避免和其他幾個(gè)表單取值混淆了. -
阻止a標(biāo)簽跳轉(zhuǎn)
$('a.no-link').click(function(e){
e.preventDefault();
}) -
類(lèi)似于5一樣，使用fadeToggle和slideToggle
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
}); -
手風(fēng)琴效果
//close all panels
$('#accordion').find('.content'.hide();
//Accordion
$('#accordion').find('.accordion-header').click(function(){
var $next = $(this).next();
$next.slideToggle('fast');
$('.content').not($next).slideUp('fast');
return false;
}); -
使兩個(gè)div的高度相等
var $columns = $('.column');
var height = 0;
$columns.each(function(){
if($(this).height() > height){
height = $(this).height();
}
});
$columns.height(height);
//當(dāng)然当编，我們也可以使用css來(lái)解決届慈，更方便，比如我們要使右側(cè)的列始終與左側(cè)相等忿偷，可以這樣搞金顿；
.box { overflow: hidden;} //這個(gè)是父級(jí)
.box .aside { padding-bottom: 2000px; margin-bottom:-2000px;}//側(cè)欄
//這樣側(cè)欄aside會(huì)始終與左側(cè)等高，其中說(shuō)明的這些屬性是必須屬性鲤桥。 -
查找文本元素
利用contains()選擇器揍拆，你可以找到一個(gè)元素的文本內(nèi)容，如果元素的文本是不存在茶凳，則將不存在文本的元素隱藏
var search = $('.search').val();
$('div:not(:contains("'+search+'"))').hide();
Note：應(yīng)用場(chǎng)景暫時(shí)還沒(méi)有想到 -
可見(jiàn)標(biāo)簽的觸發(fā)事件
當(dāng)用戶(hù)切換瀏覽器選項(xiàng)卡的時(shí)候會(huì)觸發(fā)javascript
$(document).on('visibilitychange', function(e){
if(e.target.visibilityState=== 'visible'){
console.log("是當(dāng)前標(biāo)簽");
}else if( e.target.visibilityState === 'hidden' ){
console.log('當(dāng)前頁(yè)面被隱藏');
}
});
Note：這里解釋一下嫂拴，visibilitychange是html5新增的屬性播揪，主要用來(lái)判斷是否在當(dāng)前tab下，document.hidden屬性筒狠，它顯示頁(yè)面是否為用戶(hù)當(dāng)前觀看的頁(yè)面猪狈，值為ture或false；visibilityState的值要么是visible(表明頁(yè)面為瀏覽器當(dāng)前激活tab辩恼，而且窗口不是最小化狀態(tài))雇庙，要么是hidden(頁(yè)面不是當(dāng)前激活tab頁(yè)面，或者窗口最小化了灶伊。)疆前，或者prerender(頁(yè)面在重新生成，對(duì)用戶(hù)不可見(jiàn)聘萨。)
應(yīng)用場(chǎng)景：
什么時(shí)候需要使用visibilitychange事件呢竹椒？比如，如果你的頁(yè)面上有嵌入視頻正在播放匈挖，當(dāng)用戶(hù)切換到其它標(biāo)簽頁(yè)時(shí)碾牌，你的標(biāo)簽頁(yè)上的視頻應(yīng)自動(dòng)暫停播放，當(dāng)用戶(hù)切換回來(lái)時(shí)繼續(xù)接著播放儡循。再比如舶吗，如果你的頁(yè)面有自動(dòng)刷新動(dòng)作，當(dāng)用戶(hù)切換到其它標(biāo)簽頁(yè)時(shí)择膝，你就應(yīng)該停止刷新誓琼，而當(dāng)用戶(hù)切換回來(lái)時(shí)繼續(xù)之前的動(dòng)作。
-
定義全局的Ajax請(qǐng)求錯(cuò)誤處理函數(shù)肴捉，捕捉ajax請(qǐng)求錯(cuò)誤
$(document).ajaxError(function(e,xhr,setting,error){
console.log('error')
}); -
反序訪(fǎng)問(wèn)jQuery對(duì)象的元素
在某些場(chǎng)景下腹侣，我們可能需要反序訪(fǎng)問(wèn)通過(guò)JQuery選擇器獲取到的頁(yè)面元素對(duì)象，這個(gè)怎么實(shí)現(xiàn)呢齿穗？
var arr = $(.nav'').find('li').get().reverse();
arr. each(function(elem,index){
//code
}); -
訪(fǎng)問(wèn)iFrame里面的元素
var $iframe = $('iframe#id').contents(); -
管理搜索框的值
$('#search')
.focus(function(){
$(this).val(' ');
}).blur(function(){
$(this).val() == ''?$(this).val('請(qǐng)輸入值') : null;
});
Note：當(dāng)然這種方式比較low了傲隶，我們現(xiàn)在都可以通過(guò)html5新增的placeholder屬性來(lái)設(shè)置，這種設(shè)置特別方便窃页，不過(guò)如果你是需要兼容到低版本的話(huà)跺株，比如ie那就得用js咯~ -
部分頁(yè)面加載更新
setInterval(function(){
$('.content').load(url);
}); -
采用data來(lái)緩存數(shù)據(jù)
var cache = {};
$.data(cache, 'key', 'value');
Note：當(dāng)然如果比如說(shuō)你做輪播圖，用到插件一般需要新建對(duì)象脖卖，比如說(shuō)在videojs里面乒省，你將視頻做成tab選項(xiàng)卡這種的時(shí)候，點(diǎn)擊這個(gè)視頻另一個(gè)需要暫停畦木，就需要將其對(duì)象存儲(chǔ)起來(lái)袖扛，我們一般用data存儲(chǔ)，很方便 -
使jquery與其他庫(kù)兼容的方法
//第一種
var $j = jQuery.noConflict();
$j('#id')...
//第二種,推薦使用的方式
(function($){
$(function(){
//code..
})
})(jQuery); -
根據(jù)屏幕尺寸自適應(yīng)的遮罩層
$('.overlay').css({
width: $(window).width(),
height: $(window).height()
});
$(window).on('resize', function(){
var $w = $(window).width();
var $h = $(window).height();
$('.overlay').css({
width: $w,
height: $h
});
}); -
測(cè)試密碼的強(qiáng)度
在某些網(wǎng)站注冊(cè)時(shí)常常會(huì)要求設(shè)置密碼十籍，網(wǎng)站也會(huì)根據(jù)輸入密碼的字符特點(diǎn)給出相應(yīng)的提示蛆封，如密碼過(guò)短唇礁、強(qiáng)度差、強(qiáng)度中等娶吞、強(qiáng)度強(qiáng)等垒迂。這又是怎么實(shí)現(xiàn)的呢？
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
//下面的正則表達(dá)式建議各位收藏哦妒蛇，項(xiàng)目上有可能會(huì)用得著
$('#pass').keyup(function(e) {
//密碼為八位及以上并且字母數(shù)字特殊字符三項(xiàng)都包括
var strongRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\W).$", "g");
//密碼為七位及以上并且字母机断、數(shù)字、特殊字符三項(xiàng)中有兩項(xiàng)，強(qiáng)度是中等
var mediumRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))|((?=.[A-Z])(?=.[0-9]))|((?=.[a-z])(?=.[0-9]))).$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok'; $('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!'); }
return true;
}); -
定時(shí)觸發(fā)resize，scroll等事件
類(lèi)似resize官地，scroll這種事件當(dāng)滾輪滑動(dòng)或者頁(yè)面尺寸在變化畜晰，每一個(gè)像素都會(huì)觸發(fā)一下卿捎，所以導(dǎo)致很多時(shí)候會(huì)出現(xiàn)問(wèn)題，所以一般我們會(huì)加定時(shí)器來(lái)解決
var status;
$(window).on('resize', function(){
if(status){
clearTimeout(status);
}
status = setTimeout(function(){
//code...
}, 500);
});
Note：其實(shí)思路很簡(jiǎn)單：可以分為兩次，第一次調(diào)用是不存在status的，所以會(huì)執(zhí)行下面的泊碑；第二次的時(shí)候會(huì)先干掉第一次執(zhí)行的，這樣毯欣，每次調(diào)用的時(shí)候會(huì)先等待500ms然后執(zhí)行里面的代碼馒过，然后如果用戶(hù)過(guò)快的刷新，會(huì)清除上次的定時(shí)器酗钞；還有另一種方式是通過(guò)開(kāi)關(guān)來(lái)控制的腹忽，先在外面定義一個(gè)開(kāi)關(guān)flag=false；然后在里面判斷滿(mǎn)足條件后砚作，再判斷flag==false窘奏，如果是現(xiàn)將flag=true，然后執(zhí)行代碼葫录，完畢后將flag=false着裹； -
鼠標(biāo)滑動(dòng)加載到一定位置后自動(dòng)加載更多的判斷
//第一種方式
$(window).scrollTop()+$(window).height())+250)>=$(document).height();
//第二種方式,$addMore是加載更多按鈕
$addMore.offset().top - $(window).scrollTop() < $(window).height(); -
使用jQuery重繪圖片
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
}); -
音頻播放，多用在手機(jī)端html5頁(yè)面背景音樂(lè)
$('.music-box').on('click', function(){
var is = $(this).hasClass('pause');
var audio =document.getElementById('myaudio');
if(is){
audio.play();
$(this).removeClass('pause');
}else{
audio.pause();
$(this).addClass('pause');
}
})
var firstPlayedAudio = false; // 解決safari播放問(wèn)題
var audioLoaded = false;
var audio = document.getElementById('myaudio');
$(audio).on('loadeddata', function(){
audioLoaded = true;
audio.play();
});
$('body').on('touchstart', function(){
if(!firstPlayedAudio){
firstPlayedAudio = true;
audio.play();
}
});
document.addEventListener("WeixinJSBridgeReady", function() {
audio.play();
}); - 箭頭向下滑動(dòng)
-webkit-animation: 'wakedown' 1.4s linear infinite alternate;
animation: 'wakedown' 1.4s linear infinite alternate;
/* wakedown */
@-webkit-keyframes wakedown {
0% { opacity: 0.2; -webkit-transform: translateY(0); }
100% { opacity: 1; -webkit-transform: translateY(-8px); }
}
@keyframes wakedown {
0% { opacity: 0.2; transform: translateY(0); }
100% { opacity: 1; transform: translateY(-8px); }
} - fullpage基本配置米同，主要用來(lái)快速完成任務(wù)
最好參看API文檔
$('#container').fullpage({
menu: '#pager',
anchors: ['page1', 'page2', 'page3'],
verticalCentered: true,
sectionSelector: '.section',
resize: true,
css3: false,
easing: 'easeInExpo',
scrollingSpeed: 700
}); - chrome經(jīng)典bug
chrome經(jīng)典bug骇扇，需要強(qiáng)制GPU渲染
-webkit-transform: translateZ(0); transform: translateZ(0);
當(dāng)頁(yè)面進(jìn)入的時(shí)候所有圖片堆到一起的問(wèn)題
.section {
display: table;
table-layout: fixed;
width: 100%;
} - 取data
// 糟糕
$('#id').data(key,value);
// 建議 (高效)
$.data('#id',key,value);
累死了，終于整理了一部分了窍霞，以后積累下來(lái)的將會(huì)繼續(xù)整理和更新，希望能夠幫到需要的人拯坟，另外但金，不要忘記支持小編哦，需要轉(zhuǎn)載或者引用請(qǐng)私信郁季。
