幫助提高你jQuery應用的簡單小技巧。
- 回到頂部按鈕
- 圖片預載入
- 判斷圖片是否載入完
- 自動修補破損影像
- Hover切換class類
- 禁用輸入
- 停止正在載入的連結
- toggle fade/slide
- 簡單的手風琴
- 使兩個DIV同等高度
- 在瀏覽器標籤/新視窗開啟外部連結
- 根據文字獲取元素
- 可見變化的觸發
- Ajax呼叫錯誤處理
- 鏈式操作
回到頂部按鈕
利用jQuery裡的animate和scrollTop方法，你便不需要使用外掛建立簡單的滾動到頂部動畫。
|
1 2 3 4 5 6 7 |
// Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top |
通過scrollTop的值來改變你想要滾動到的位置。其實你就是做了：在接下來的800毫秒中讓頁面滾動，直到它滾動到文件的頂部。
備註：來看一些scrollTop的調皮行為 。
圖片預載入
如果你的網頁使用了很多隱藏圖片檔案（例如：滑鼠懸停展示的圖片），那麼圖片的預載入是有意義的：
|
1 2 3 4 5 6 |
$.preloadImages = function () { for (var i = 0; i ').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png'); |
判斷圖片是否載入完
有時候你可能需要檢查影像是否已經載入完成，以便於可以繼續執行相應的js程式碼：
|
1 2 3 |
$('img').load(function () { console.log('image load successful'); }); |
你還可以檢查一個特定的圖片是否載入完並且被帶有Id或者class的
自動修補破損影像
如果你碰巧發現在你的網站上發現破損的影像連結，一個個去替代他們是痛苦的。這個簡單的程式碼可以節省很多的麻煩：
|
1 2 3 4 5 |
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } }); |
即使你沒有任何斷開的連結，加入這程式碼也不會有任何影響。
Hover切換class類
比方說，當使用者將滑鼠懸停在你頁面上的元素時，你想改變其視覺效果。當使用者滑鼠懸停在元素上，你可以在該元素上新增一個class類，當滑鼠停止懸停事件時移除此class類：
|
1 2 3 4 5 |
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); |
如果你想要一個更簡單的方式使用toggleClass方法，則僅僅需要新增必要的CSS：
|
1 2 3 |
$('.btn').hover(function () { $(this).toggleClass('hover'); }); |
備註：CSS在這種情況下使用是一個快速的解決方案，但要知道這點知識依舊是值得去了解下的。
禁用輸入
有時你可能需要用表單的提交按鈕或者某個輸入框直到使用者執行了某個動作（比如：檢查“我已閱讀條款”核取方塊）。在你的輸入框上設定disabled屬性，然後當你需要的時候啟用該屬性：
|
1 |
$('input[type="submit"]').prop('disabled', true); |
你需要做的只是需要在輸入框上再次執行prop方法，但設定的被禁用值是false：
|
1 |
$('input[type="submit"]').prop('disabled', false); |
停止正在載入的連結
有時你不想連結到特定的網頁或者重新載入頁面；你可能想讓他們做一些其他事情，如觸發一些其他的指令碼。這是防止違約行動的技巧：
|
1 2 3 |
$('a.no-link').click(function (e) { e.preventDefault(); }); |
toggle fade/slide
滑動和淡入/淡出 是我們在jQuery中經常大量使用的動畫。你可能僅僅想在使用者做某些點選事件的時候顯示一個元素，這時候需要淡入/淡出或者滑動方法。但是如果你需要那個元素在你第一次點選的時候出現，在第二次點選的時候消失，程式碼如下：
|
1 2 3 4 5 6 7 8 9 |
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); }); |
簡單的手風琴
這是個簡單快速的方法建立一個手風琴：
|
1 2 3 4 5 6 7 8 9 10 |
// 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操作在你的頁面上。
使兩個DIV同等高度
有時你會想要兩個DIV有相同的高度，無論他們都有什麼內容：
|
1 |
$('.div').css('min-height', $('.main-div').height()); |
這個例子設定了DIV的最小高度，這意味著它的高度只可以比這個設定的高度大而不能小。然而，一個更靈活的方法是迴圈的一組元素，並設定將最高元素的高度作為高度：
|
1 2 3 4 5 6 7 8 |
var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height); |
如果你想要所有的列有相同的高度：
|
1 2 3 4 |
var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); }); |
在瀏覽器標籤/新視窗開啟外部連結
在新的瀏覽器標籤或視窗中開啟外部連結，並確保在同一個標籤或視窗中開啟的是同一個源的連結：
|
1 2 3 |
$('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); |
備註：window.location.origin 在IE10不工作。
根據文字獲取元素
通過jQuery中的contains()選擇器，你能找到一個元素內的文字內容。如果文字不存在，則這個元素將被隱藏：
|
1 2 |
var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); |
可見變化的觸發
當使用者不再聚焦或者重新聚焦一個標籤時觸發javascript指令碼：
|
1 2 3 4 5 6 7 |
$(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呼叫錯誤處理
當一個Ajax呼叫返回一個404或500的錯誤時，將執行該錯誤處理。如果該處理未定義，則其他jQuery程式碼便可能不會執行了。定義一個全域性Ajax錯誤處理程式：
|
1 2 3 |
$(document).ajaxError(function (e, xhr, settings, error) { console.log(error); }); |
鏈式操作
jQuery允許通過鏈式操作來減輕反覆查詢DOM和建立多個jQuery物件的過程。比如下面是你的方法呼叫：
|
1 2 3 |
$('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff(); |
這程式碼可以通過鏈式大大的提高：
|
1 2 3 4 |
$('#elem') .show() .html('bla') .otherStuff(); |
另一個方法是在一個可變的元素快取（$作為前置）：
|
1 2 3 4 |
var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff(); |
鏈式和jQuery快取方法是最好的做法，導致更短、更快的程式碼。