檢查 jQuery 是否加載
在使用 jQuery 進(jìn)行任何操作之前，你需要先確認(rèn)它已經(jīng)加載：
if (typeof jQuery == 'undefined') {console.log('jQuery hasn/'t loaded');} else {console.log('jQuery has loaded');} 返回頂部按鈕
利用 jQuery 中的 animate 和 scrollTop 方法，你無需插件就可以創(chuàng)建簡(jiǎn)單的 scroll up 效果:
// 返回頂部$('a.top').click(function (e) {e.preventDefault();$(document.body).animate({scrollTop: 0}, 800);});<!-- 設(shè)置錨 --><a class="top" href="#">Back to top</a> 調(diào)整 scrollTop 的值即可改變滾動(dòng)著陸位置。你實(shí)際所做的是在 800 毫秒內(nèi)不斷設(shè)置文檔主體的位置，直到它滾動(dòng)到頂部。
預(yù)加載圖片
如果你的網(wǎng)頁使用了大量并非立即可見的圖片（例如懸停鼠標(biāo)觸發(fā)的圖片），那么預(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'); 判斷圖片是否加載完成
在有些情況下，為了繼續(xù)執(zhí)行腳本，你需要檢查圖片是否已經(jīng)完全加載:
$('img').load(function () {console.log('image load successful');}); 同樣，換用一個(gè)帶有 id 或者 class 屬性的 <img> 標(biāo)簽，你也可以檢查特定圖片是否加載完成。
自動(dòng)修復(fù)失效圖片
如果你在你的網(wǎng)站上發(fā)現(xiàn)了失效的圖片鏈接，逐個(gè)去替換它們將會(huì)是個(gè)苦差。這段簡(jiǎn)單的代碼可以很大程度地減輕痛苦：
$('img').on('error', function () {if(!$(this).hasClass('broken-image')) {$(this).prop('src', 'img/broken.png').addClass('broken-image');}}); 即使你暫無任何失效的鏈接，添加這段代碼也不會(huì)有任何損失。
鼠標(biāo)懸停切換 class
如果你希望在用戶將鼠標(biāo)懸停在某個(gè)可點(diǎn)擊元素上時(shí)改變它的視覺效果，你可以在該元素被懸停時(shí)給它添加一個(gè) class，當(dāng)鼠標(biāo)不再懸停時(shí)，移除這個(gè) class：
$('.btn').hover(function () {$(this).addClass('hover');}, function () {$(this).removeClass('hover');}); 如果你還尋求更簡(jiǎn)單的途徑，可以使用 toggleClass 方法，僅需添加必要的 CSS：
$('.btn').hover(function () {$(this).toggleClass('hover');}); 注：在這種情況下，使用 CSS 或許是一個(gè)更快速的解決方案，但這種方法仍然值得稍作了解。
禁用輸入字段
有時(shí)，你可能希望在用戶完成特定操作（例如，勾選“我已閱讀條例”的確認(rèn)框）前禁用表單的提交按鈕或禁用其中某個(gè)輸入框。你可以在你的輸入字段上添加disabled 屬性，而后你能在需要時(shí)啟用它：
$('input[type="submit"]').prop('disabled', true); 你只需在輸入字段上再次運(yùn)行 prop 方法, 但是這一次把 disabled 值改為 false：
$('input[type="submit"]').prop('disabled', false); 阻止鏈接加載
有時(shí)你不希望鏈接到指定頁面或者重載當(dāng)前頁面，而是想讓它們干些別的，例如觸發(fā)其它腳本。這需要在阻止默認(rèn)動(dòng)作上做些文章：
$('a.no-link').click(function (e) {e.preventDefault();}); 緩存 jQuery 選擇器
想想你在項(xiàng)目中一次又一次地寫了多少相同的選擇器吧。每個(gè) $('.element') 都必須查詢一次整個(gè) DOM,不管它是否曾這樣執(zhí)行過。作為代替，我們只運(yùn)行一次選擇器，并把結(jié)果儲(chǔ)存在一個(gè)變量中：
var blocks = $('#blocks').find('li'); 現(xiàn)在你能在任何地方使用 blocks 變量而無需每次查詢 DOM 了:
$('#hideBlocks').click(function () {blocks.fadeOut();});$('#showBlocks').click(function () {blocks.fadeIn();}); 緩存 jQuery 的選擇器是種簡(jiǎn)單的性能提升。
切換淡出 / 滑動(dòng)
淡出和滑動(dòng)都是我們?cè)?jQuery 中大量使用的效果。你可能只想在用戶點(diǎn)擊后展現(xiàn)某個(gè)元素，此時(shí)用 fadeIn 和 slideDown 方法就很完美。但是如果你希望這個(gè)元素在首次點(diǎn)擊時(shí)出現(xiàn)，在再次點(diǎn)擊時(shí)消失，這段代碼就很有用了：
// 淡出$('.btn').click(function () {$('.element').fadeToggle('slow');});// 切換$('.btn').click(function () {$('.element').slideToggle('slow');}); 簡(jiǎn)單的手風(fēng)琴效果
這是一個(gè)快速實(shí)現(xiàn)手風(fēng)琴效果的簡(jiǎn)單方法:
// 關(guān)閉所有面板$('#accordion').find('.content').hide();// 手風(fēng)琴效果$('#accordion').find('.accordion-header').click(function () {var next = $(this).next();next.slideToggle('fast');$('.content').not(next).slideUp('fast');return false;}); 通過添加這段腳本，你實(shí)際要做的只是提供必要的 HTML 元素以便它正常運(yùn)行。
使兩個(gè) div 等高
有時(shí)你希望無論兩個(gè) div 各自包含什么內(nèi)容，它們總有相同的高度：
$('.div').css('min-height', $('.main-div').height()); 這個(gè)例子設(shè)置了 min-height，意味著高度可以大于主 div 而不能小于它。然而，更靈活的方法是遍歷一組元素，然后將高度設(shè)置為最高元素的高度：
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());}); 在新標(biāo)簽頁 / 新窗口打開外部鏈接
在一個(gè)新的瀏覽器標(biāo)簽頁或窗口中打開外部鏈接，并確保相同來源的鏈接在同一個(gè)標(biāo)簽頁或者窗口中打開：
$('a[href^="http"]').attr('target', '_blank');$('a[href^="//"]').attr('target', '_blank');$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); 注： window.location.origin 在 IE10 中不可用. 這個(gè)修復(fù)方案 正是關(guān)注于該問題。
通過文本查找元素
通過使用 jQuery 的 contains() 選擇器，你能夠查找元素內(nèi)容中的文本。若文本不存在，該元素將被隱藏：
var search = $('#search').val();$('div:not(:contains("' + search + '"))').hide(); 在 visibility 屬性變化時(shí)觸發(fā)
當(dāng)用戶的焦點(diǎn)離開或者重新回到某個(gè)標(biāo)簽頁時(shí)，觸發(fā) Javasrcipt：
$(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!');}}); Ajax 調(diào)用錯(cuò)誤處理
當(dāng)一個(gè) Ajax 調(diào)用返回 404 或 500 錯(cuò)誤時(shí)，錯(cuò)誤處理程序?qū)⒈粓?zhí)行。若錯(cuò)誤處理未被定義，其它 jQuery 代碼可能不再有效。所以定義一個(gè)全局的 Ajax 錯(cuò)誤處理：
$(document).ajaxError(function (e, xhr, settings, error) {console.log(error);}); 鏈?zhǔn)讲寮{(diào)用
jQuery 允許通過“鏈?zhǔn)?rdquo;插件調(diào)用的方法，來緩解反復(fù)查詢 DOM 和創(chuàng)建多個(gè) jQuery 對(duì)象的過程。例如，下面的代碼代表著你的插件調(diào)用：
$('#elem').show();$('#elem').html('bla');$('#elem').otherStuff(); 通過使用鏈?zhǔn)讲僮鳎辛孙@著的改善:
$('#elem').show().html('bla').otherStuff(); 另一種方法是在變量（以 $ 為前綴）中，對(duì)元素進(jìn)行緩存：
var $elem = $('#elem');$elem.hide();$elem.html('bla');$elem.otherStuff(); 無論是鏈?zhǔn)讲僮鳎€是緩存元素，都是 jQuery 中用以簡(jiǎn)化和優(yōu)化代碼的最佳實(shí)踐。
這里收集了一些簡(jiǎn)單的竅門，助你玩轉(zhuǎn) jQuery。
檢查 jQuery 是否加載
在使用 jQuery 進(jìn)行任何操作之前，你需要先確認(rèn)它已經(jīng)加載：
if (typeof jQuery == 'undefined') {console.log('jQuery hasn/'t loaded');} else {console.log('jQuery has loaded');} 返回頂部按鈕
利用 jQuery 中的 animate 和 scrollTop 方法，你無需插件就可以創(chuàng)建簡(jiǎn)單的 scroll up 效果:
// 返回頂部$('a.top').click(function (e) {e.preventDefault();$(document.body).animate({scrollTop: 0}, 800);});<!-- 設(shè)置錨 --><a class="top" href="#">Back to top</a> 調(diào)整 scrollTop 的值即可改變滾動(dòng)著陸位置。你實(shí)際所做的是在 800 毫秒內(nèi)不斷設(shè)置文檔主體的位置，直到它滾動(dòng)到頂部。
預(yù)加載圖片
如果你的網(wǎng)頁使用了大量并非立即可見的圖片（例如懸停鼠標(biāo)觸發(fā)的圖片），那么預(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'); 判斷圖片是否加載完成
在有些情況下，為了繼續(xù)執(zhí)行腳本，你需要檢查圖片是否已經(jīng)完全加載:
$('img').load(function () {console.log('image load successful');}); 同樣，換用一個(gè)帶有 id 或者 class 屬性的 <img> 標(biāo)簽，你也可以檢查特定圖片是否加載完成。
自動(dòng)修復(fù)失效圖片
如果你在你的網(wǎng)站上發(fā)現(xiàn)了失效的圖片鏈接，逐個(gè)去替換它們將會(huì)是個(gè)苦差。這段簡(jiǎn)單的代碼可以很大程度地減輕痛苦：
$('img').on('error', function () {if(!$(this).hasClass('broken-image')) {$(this).prop('src', 'img/broken.png').addClass('broken-image');}}); 即使你暫無任何失效的鏈接，添加這段代碼也不會(huì)有任何損失。
鼠標(biāo)懸停切換 class
如果你希望在用戶將鼠標(biāo)懸停在某個(gè)可點(diǎn)擊元素上時(shí)改變它的視覺效果，你可以在該元素被懸停時(shí)給它添加一個(gè) class，當(dāng)鼠標(biāo)不再懸停時(shí)，移除這個(gè) class：
$('.btn').hover(function () {$(this).addClass('hover');}, function () {$(this).removeClass('hover');}); 如果你還尋求更簡(jiǎn)單的途徑，可以使用 toggleClass 方法，僅需添加必要的 CSS：
$('.btn').hover(function () {$(this).toggleClass('hover');}); 注：在這種情況下，使用 CSS 或許是一個(gè)更快速的解決方案，但這種方法仍然值得稍作了解。
禁用輸入字段
有時(shí)，你可能希望在用戶完成特定操作（例如，勾選“我已閱讀條例”的確認(rèn)框）前禁用表單的提交按鈕或禁用其中某個(gè)輸入框。你可以在你的輸入字段上添加disabled 屬性，而后你能在需要時(shí)啟用它：
$('input[type="submit"]').prop('disabled', true); 你只需在輸入字段上再次運(yùn)行 prop 方法, 但是這一次把 disabled 值改為 false：
$('input[type="submit"]').prop('disabled', false); 阻止鏈接加載
有時(shí)你不希望鏈接到指定頁面或者重載當(dāng)前頁面，而是想讓它們干些別的，例如觸發(fā)其它腳本。這需要在阻止默認(rèn)動(dòng)作上做些文章：
$('a.no-link').click(function (e) {e.preventDefault();}); 緩存 jQuery 選擇器
想想你在項(xiàng)目中一次又一次地寫了多少相同的選擇器吧。每個(gè) $('.element') 都必須查詢一次整個(gè) DOM,不管它是否曾這樣執(zhí)行過。作為代替，我們只運(yùn)行一次選擇器，并把結(jié)果儲(chǔ)存在一個(gè)變量中：
var blocks = $('#blocks').find('li'); 現(xiàn)在你能在任何地方使用 blocks 變量而無需每次查詢 DOM 了:
$('#hideBlocks').click(function () {blocks.fadeOut();});$('#showBlocks').click(function () {blocks.fadeIn();}); 緩存 jQuery 的選擇器是種簡(jiǎn)單的性能提升。
切換淡出 / 滑動(dòng)
淡出和滑動(dòng)都是我們?cè)?jQuery 中大量使用的效果。你可能只想在用戶點(diǎn)擊后展現(xiàn)某個(gè)元素，此時(shí)用 fadeIn 和 slideDown 方法就很完美。但是如果你希望這個(gè)元素在首次點(diǎn)擊時(shí)出現(xiàn)，再次點(diǎn)擊時(shí)消失，這段代碼就很有用了：
// 淡出$('.btn').click(function () {$('.element').fadeToggle('slow');});// 切換$('.btn').click(function () {$('.element').slideToggle('slow');}); 簡(jiǎn)單的手風(fēng)琴效果
這是一個(gè)快速實(shí)現(xiàn)手風(fēng)琴效果的簡(jiǎn)單方法:
// 關(guān)閉所有面板$('#accordion').find('.content').hide();// 手風(fēng)琴效果$('#accordion').find('.accordion-header').click(function () {var next = $(this).next();next.slideToggle('fast');$('.content').not(next).slideUp('fast');return false;}); 通過添加這段腳本，你實(shí)際要做的只是提供必要的 HTML 元素以便它正常運(yùn)行。
使兩個(gè) div 等高
有時(shí)你希望無論兩個(gè) div 各自包含什么內(nèi)容，它們總有相同的高度：
$('.div').css('min-height', $('.main-div').height()); 這個(gè)例子設(shè)置了 min-height，意味著高度可以大于主 div 而不能小于它。然而，更靈活的方法是遍歷一組元素，然后將高度設(shè)置為最高元素的高度：
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());}); 在新標(biāo)簽頁 / 新窗口打開外部鏈接
在一個(gè)新的瀏覽器標(biāo)簽頁或窗口中打開外部鏈接，并確保相同來源的鏈接在同一個(gè)標(biāo)簽頁或者窗口中打開：
$('a[href^="http"]').attr('target', '_blank');$('a[href^="//"]').attr('target', '_blank');$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); 注： window.location.origin 在 IE10 中不可用. 這個(gè)修復(fù)方案 正是關(guān)注于該問題。
通過文本查找元素
通過使用 jQuery 的 contains() 選擇器，你能夠查找元素內(nèi)容中的文本。若文本不存在，該元素將被隱藏：
var search = $('#search').val();$('div:not(:contains("' + search + '"))').hide(); 在 visibility 屬性變化時(shí)觸發(fā)
當(dāng)用戶的焦點(diǎn)離開或者重新回到某個(gè)標(biāo)簽頁時(shí)，觸發(fā) Javasrcipt：
$(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!');}}); Ajax 調(diào)用錯(cuò)誤處理
當(dāng)一個(gè) Ajax 調(diào)用返回 404 或 500 錯(cuò)誤時(shí)，錯(cuò)誤處理程序?qū)⒈粓?zhí)行。若錯(cuò)誤處理未被定義，其它 jQuery 代碼可能不再有效。所以定義一個(gè)全局的 Ajax 錯(cuò)誤處理：
$(document).ajaxError(function (e, xhr, settings, error) {console.log(error);}); 鏈?zhǔn)讲寮{(diào)用
jQuery 允許通過“鏈?zhǔn)?rdquo;插件調(diào)用的方法，來緩解反復(fù)查詢 DOM 和創(chuàng)建多個(gè) jQuery 對(duì)象的過程。例如，下面的代碼代表著你的插件調(diào)用：
$('#elem').show();$('#elem').html('bla');$('#elem').otherStuff(); 通過使用鏈?zhǔn)讲僮鳎辛孙@著的改善:
$('#elem').show().html('bla').otherStuff(); 另一種方法是在變量（以 $ 為前綴）中，對(duì)元素進(jìn)行緩存：
var $elem = $('#elem');$elem.hide();$elem.html('bla');$elem.otherStuff(); 無論是鏈?zhǔn)讲僮鳎€是緩存元素，都是 jQuery 中用以簡(jiǎn)化和優(yōu)化代碼的最佳實(shí)踐。
