幫助提高你jQuery應(yīng)用的15個(gè)大家都熟知的jquery小技巧，分享給大家

• 回到頂部按鈕
• 圖片預(yù)加載
• 判斷圖片是否加載完
• 自動(dòng)修補(bǔ)破損圖像
• Hover切換class類
• 禁用輸入
• 停止正在加載的鏈接
• toggle fade/slide
• 簡(jiǎn)單的手風(fēng)琴
• 使兩個(gè)DIV同等高度
• 在瀏覽器標(biāo)簽/新窗口打開(kāi)外部鏈接
• 根據(jù)文本獲取元素
• 可見(jiàn)變化的觸發(fā)
• Ajax調(diào)用錯(cuò)誤處理
• 鏈?zhǔn)讲僮?br />

1、回到頂部按鈕

利用jQuery里的animate和scrollTop方法，你便不需要使用插件創(chuàng)建簡(jiǎn)單的滾動(dòng)到頂部動(dòng)畫。

// Back to top

$('.top').click(function (e) {

 e.preventDefault();

 $('html, body').animate({scrollTop: 0}, 800);

});

<!-- Create an anchor tag -->

<a class="top" href="#">Back to top</a>

通過(guò)scrollTop的值來(lái)改變你想要滾動(dòng)到的位置。其實(shí)你就是做了：在接下來(lái)的800毫秒中讓頁(yè)面滾動(dòng)，直到它滾動(dòng)到文檔的頂部。

備注：來(lái)看一些scrollTop的調(diào)皮行為 。

2、圖片預(yù)加載

如果你的網(wǎng)頁(yè)使用了很多隱藏圖片文件（例如：鼠標(biāo)懸停展示的圖片），那么圖片的預(yù)加載是有意義的：

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
}; 
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

3、判斷圖片是否加載完

有時(shí)候你可能需要檢查圖像是否已經(jīng)加載完成，以便于可以繼續(xù)執(zhí)行相應(yīng)的js代碼：

$('img').load(function () {
 console.log('image load successful');
});

你還可以檢查一個(gè)特定的圖片是否加載完并且被帶有Id或者class的<img>標(biāo)簽代替。

4、自動(dòng)修補(bǔ)破損圖像

如果你碰巧發(fā)現(xiàn)在你的網(wǎng)站上發(fā)現(xiàn)破損的圖像鏈接，一個(gè)個(gè)去替代他們是痛苦的。這個(gè)簡(jiǎn)單的代碼可以節(jié)省很多的麻煩：

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

即使你沒(méi)有任何斷開(kāi)的鏈接，加入這代碼也不會(huì)有任何影響。

5、Hover切換class類

比方說(shuō)，當(dāng)用戶將鼠標(biāo)懸停在你頁(yè)面上的元素時(shí)，你想改變其視覺(jué)效果。當(dāng)用戶鼠標(biāo)懸停在元素上，你可以在該元素上添加一個(gè)class類，當(dāng)鼠標(biāo)停止懸停事件時(shí)移除此class類：

$('.btn').hover(function () {
 $(this).addClass('hover');
}, function () {
 $(this).removeClass('hover');
});

如果你想要一個(gè)更簡(jiǎn)單的方式使用toggleClass方法，則僅僅需要添加必要的CSS：

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});

備注：CSS在這種情況下使用是一個(gè)快速的解決方案，但要知道這點(diǎn)知識(shí)依舊是值得去了解下的。

6、禁用輸入

有時(shí)你可能需要用表單的提交按鈕或者某個(gè)輸入框直到用戶執(zhí)行了某個(gè)動(dòng)作（比如：檢查“我已閱讀條款”復(fù)選框）。在你的輸入框上設(shè)置disabled屬性，然后當(dāng)你需要的時(shí)候啟用該屬性：

有時(shí)你不想鏈接到特定的網(wǎng)頁(yè)或者重新載入頁(yè)面；你可能想讓他們做一些其他事情，如觸發(fā)一些其他的腳本。這是防止違約行動(dòng)的技巧：

$('a.no-link').click(function (e) {
 e.preventDefault();
});

8、toggle fade/slide

滑動(dòng)和淡入/淡出 是我們?cè)趈Query中經(jīng)常大量使用的動(dòng)畫。你可能僅僅想在用戶做某些點(diǎn)擊事件的時(shí)候顯示一個(gè)元素，這時(shí)候需要淡入/淡出或者滑動(dòng)方法。但是如果你需要那個(gè)元素在你第一次點(diǎn)擊的時(shí)候出現(xiàn)，在第二次點(diǎn)擊的時(shí)候消失，代碼如下：

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

9、簡(jiǎn)單的手風(fēng)琴

這是個(gè)簡(jiǎn)單快速的方法創(chuàng)建一個(gè)手風(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;
});

通過(guò)添加這個(gè)腳本，你需要做的則是必要的HTML操作在你的頁(yè)面上。

10、使兩個(gè)DIV同等高度

有時(shí)你會(huì)想要兩個(gè)DIV有相同的高度，無(wú)論他們都有什么內(nèi)容：

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

如果你想要所有的列有相同的高度：

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

11、在瀏覽器標(biāo)簽/新窗口打開(kāi)外部鏈接

在新的瀏覽器標(biāo)簽或窗口中打開(kāi)外部鏈接，并確保在同一個(gè)標(biāo)簽或窗口中打開(kāi)的是同一個(gè)源的鏈接：

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="http://"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

備注：window.location.origin 在IE10不工作。

12、根據(jù)文本獲取元素

通過(guò)jQuery中的contains()選擇器，你能找到一個(gè)元素內(nèi)的文本內(nèi)容。如果文本不存在，則這個(gè)元素將被隱藏：

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

13、可見(jiàn)變化的觸發(fā)

當(dāng)用戶不再聚焦或者重新聚焦一個(gè)標(biāo)簽時(shí)觸發(fā)javascript腳本：

$(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
 console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
});

14、Ajax調(diào)用錯(cuò)誤處理

當(dāng)一個(gè)Ajax調(diào)用返回一個(gè)404或500的錯(cuò)誤時(shí)，將執(zhí)行該錯(cuò)誤處理。如果該處理未定義，則其他jQuery代碼便可能不會(huì)執(zhí)行了。定義一個(gè)全局Ajax錯(cuò)誤處理程序：

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

15、鏈?zhǔn)讲僮?/strong>

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

$('#elem')
 .show()
 .html('bla')
 .otherStuff();

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();