英文原文：jQuery Tips Everyone Should Know
譯文地址：淡忘~淺思 ? [譯]12個(gè)JQuey Tips
今天骆膝，與大家分享一些每個(gè)前端開(kāi)發(fā)者都需要知道的JQuery小貼士音比。開(kāi)發(fā)者們，來(lái)看看你們知道多少呢？
返回頂部
使用JQuery的 animate和 scrollTop方法可以創(chuàng)建簡(jiǎn)單地返回頂部的動(dòng)畫(huà)：
// Back to top
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
HTML中得有一個(gè)按鈕：
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>
可以改變 scrollTop的值來(lái)定位滾動(dòng)條的位置层宫。
圖片預(yù)加載
如果頁(yè)面使用了很多不是最初加載便可見(jiàn)的圖片学密，有必要進(jìn)行預(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');
判斷圖片是否完全加載
有時(shí)需要圖片完全加載才能進(jìn)行后面的操作，下面的這段腳本可以實(shí)現(xiàn)：
$('img').load(function () {
console.log('image load successful');
});
你也可以通過(guò)帶 id或者 class的 img標(biāo)簽來(lái)判斷某張?zhí)囟ǖ膱D片是否完全加載横浑。
自動(dòng)修復(fù)損壞圖片
如果圖片損壞剔桨，可以用另外一張進(jìn)行替換：
$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});
Hover狀態(tài)的類(lèi)切換
當(dāng)用戶(hù)的鼠標(biāo)指針懸浮在一個(gè)可以點(diǎn)擊的元素上時(shí)，你可以通過(guò)添加一個(gè) class改變它的視覺(jué)效果徙融，鼠標(biāo)指針離開(kāi)該元素時(shí)洒缀，就移開(kāi)剛剛添加的 class：
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
一個(gè)更簡(jiǎn)單的方式是使用 toggleClass：
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
貼士：在這種情況下，CSS可能是更快的解決方案欺冀，但仍然值得去了解這個(gè)树绩。
輸入框的不可編輯
有時(shí)，你想要表單的提交按鈕或者文本框變的不可編輯隐轩，直到用戶(hù)完成某個(gè)特定的動(dòng)作饺饭，通過(guò)修改 input元素的disabled屬性來(lái)實(shí)現(xiàn)：
$('input[type="submit"]').prop('disabled', true);
再次調(diào)用 prop方法將 disabled值改為 false，就可以更改元素狀態(tài)：
$('input[type="submit"]').prop('disabled', false);
停止鏈接加載
若你不想點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者重新加載頁(yè)面职车，僅僅只想讓它做點(diǎn)別的事情瘫俊，如觸發(fā)其它腳本，則需要阻止鏈接的默認(rèn)行為：
$('a.no-link').click(function (e) {
e.preventDefault();
});
Fade/Slide切換
Slideing 和 fading 是很常用的 JQuery 動(dòng)畫(huà)悴灵。如果你想要在用戶(hù)產(chǎn)生點(diǎn)擊事件時(shí)顯示一個(gè)元素军援，可以用 fadeIn或者slideDown，若要實(shí)現(xiàn)第一次點(diǎn)擊顯示元素而第二次點(diǎn)擊隱藏元素的效果称勋，可以參考下面的腳本：
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
簡(jiǎn)單地手風(fēng)琴
下面的這段腳本可以簡(jiǎn)單實(shí)現(xiàn)手風(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等高
有時(shí)胸哥，需要讓兩個(gè)Div保持等高，而不管兩個(gè)Div的內(nèi)容如何：
$('.div').css('min-height', $(.main-div).height());
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
在上述的示例中赡鲜，會(huì)循環(huán)一個(gè)元素集合空厌，并將元素的高度設(shè)置成元素集合中高度最高的。若要所有 column保持同樣地高度银酬，則可以這樣：
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});
在新的Tab/Window打開(kāi)外鏈
在瀏覽器的新Tab/Window打開(kāi)外鏈嘲更，并且在同一個(gè)Tab/Window打開(kāi)同源的鏈接：
$('a[href^="http"]').attr('target','_blank');
$('a[href^="http://"]').attr('target','_blank');
$('a[href^="'+window.location.origin+'"]').attr('target','_self');
貼士：window.location.origin不能在IE10上正常工作。
通過(guò)文本查找元素
利用 JQuery 的 contains()選擇器可以查找一個(gè)包含特定文本的元素揩瞪，如果文本不存在赋朦，元素則隱藏：
var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();
