幫助提高你jQuery應(yīng)用的15個大家都熟知的jquery小技巧，分享給大家
1、回到頂部按鈕
利用jQuery里的animate和scrollTop方法，你便不需要使用插件創(chuà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>通過scrollTop的值來改變你想要滾動到的位置。其實你就是做了：在接下來的800毫秒中讓頁面滾動，直到它滾動到文檔的頂部。
備注：來看一些scrollTop的調(diào)皮行為 。
2、圖片預(yù)加載
如果你的網(wǎng)頁使用了很多隱藏圖片文件（例如：鼠標(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、判斷圖片是否加載完
有時候你可能需要檢查圖像是否已經(jīng)加載完成，以便于可以繼續(xù)執(zhí)行相應(yīng)的js代碼：
$('img').load(function () { console.log('image load successful');});你還可以檢查一個特定的圖片是否加載完并且被帶有Id或者class的<img>標(biāo)簽代替。
4、自動修補破損圖像
如果你碰巧發(fā)現(xiàn)在你的網(wǎng)站上發(fā)現(xiàn)破損的圖像鏈接，一個個去替代他們是痛苦的。這個簡單的代碼可以節(jié)省很多的麻煩：
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); }});即使你沒有任何斷開的鏈接，加入這代碼也不會有任何影響。
5、Hover切換class類
比方說，當(dāng)用戶將鼠標(biāo)懸停在你頁面上的元素時，你想改變其視覺效果。當(dāng)用戶鼠標(biāo)懸停在元素上，你可以在該元素上添加一個class類，當(dāng)鼠標(biāo)停止懸停事件時移除此class類：
$('.btn').hover(function () { $(this).addClass('hover');}, function () { $(this).removeClass('hover');});如果你想要一個更簡單的方式使用toggleClass方法，則僅僅需要添加必要的CSS：
$('.btn').hover(function () { $(this).toggleClass('hover');});備注：CSS在這種情況下使用是一個快速的解決方案，但要知道這點知識依舊是值得去了解下的。
6、禁用輸入
有時你可能需要用表單的提交按鈕或者某個輸入框直到用戶執(zhí)行了某個動作（比如：檢查“我已閱讀條款”復(fù)選框）。在你的輸入框上設(shè)置disabled屬性，然后當(dāng)你需要的時候啟用該屬性：
有時你不想鏈接到特定的網(wǎng)頁或者重新載入頁面；你可能想讓他們做一些其他事情，如觸發(fā)一些其他的腳本。這是防止違約行動的技巧：
$('a.no-link').click(function (e) { e.preventDefault();});8、toggle fade/slide
滑動和淡入/淡出 是我們在jQuery中經(jīng)常大量使用的動畫。你可能僅僅想在用戶做某些點擊事件的時候顯示一個元素，這時候需要淡入/淡出或者滑動方法。但是如果你需要那個元素在你第一次點擊的時候出現(xiàn)，在第二次點擊的時候消失，代碼如下：
// Fade$('.btn').click(function () { $('.element').fadeToggle('slow');});// Toggle$('.btn').click(function () { $('.element').slideToggle('slow');});9、簡單的手風(fēng)琴
這是個簡單快速的方法創(chuàng)建一個手風(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;});通過添加這個腳本，你需要做的則是必要的HTML操作在你的頁面上。
10、使兩個DIV同等高度
有時你會想要兩個DIV有相同的高度，無論他們都有什么內(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)簽/新窗口打開外部鏈接
在新的瀏覽器標(biāo)簽或窗口中打開外部鏈接，并確保在同一個標(biāo)簽或窗口中打開的是同一個源的鏈接：
$('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ù)文本獲取元素
通過jQuery中的contains()選擇器，你能找到一個元素內(nèi)的文本內(nèi)容。如果文本不存在，則這個元素將被隱藏：
var search = $('#search').val();$('div:not(:contains("' + search + '"))').hide();13、可見變化的觸發(fā)
當(dāng)用戶不再聚焦或者重新聚焦一個標(biāo)簽時觸發(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)用錯誤處理
當(dāng)一個Ajax調(diào)用返回一個404或500的錯誤時，將執(zhí)行該錯誤處理。如果該處理未定義，則其他jQuery代碼便可能不會執(zhí)行了。定義一個全局Ajax錯誤處理程序：
$(document).ajaxError(function (e, xhr, settings, error) { console.log(error);});15、鏈?zhǔn)讲僮?/strong>
jQuery允許通過鏈?zhǔn)讲僮鱽頊p輕反復(fù)查詢DOM和創(chuàng)建多個jQuery對象的過程。比如下面是你的方法調(diào)用：
$('#elem').show();$('#elem').html('bla');$('#elem').otherStuff();這代碼可以通過鏈?zhǔn)酱蟠蟮奶岣撸?/p>
$('#elem') .show() .html('bla') .otherStuff();另一個方法是在一個可變的元素緩存（$作為前置）：
var $elem = $('#elem');$elem.hide();$elem.html('bla');$elem.otherStuff();鏈?zhǔn)胶蚸Query緩存方法是最好的做法，導(dǎo)致更短、更快的代碼。
以上就是本文的全部內(nèi)容，希望幫助大家提高jQuery應(yīng)用能力。
新聞熱點
疑難解答
