你應該知道的jQuery技巧

幫助提高你jQuery應用的簡單小技巧。

1. 回到頂部按鈕
2. 圖片預加載
3. 判斷圖片是否加載完
4. 自動修補破損圖像
5. Hover切換class類
6. 禁用輸入
7. 停止正在加載的鏈接
8. toggle fade/slide
9. 簡單的手風琴
10. 使兩個DIV同等高度
11. 在瀏覽器標籤/新窗口打開外部鏈接
12. 根據文本獲取元素
13. 可見變化的觸發
14. Ajax調用錯誤處理
15. 鏈式操作

回到頂部按鈕

利用jQuery裏的animate和scrollTop方法，你便不需要使用插件創建簡單的滾動到頂部動畫。

// 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的調皮行爲 。

圖片預加載

如果你的網頁使用了很多隱藏圖片文件（例如：鼠標懸停展示的圖片），那麼圖片的預加載是有意義的：

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

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

判斷圖片是否加載完

有時候你可能需要檢查圖像是否已經加載完成，以便於可以繼續執行相應的js代碼：

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

你還可以檢查一個特定的圖片是否加載完並且被帶有Id或者class的<img>標籤代替。

自動修補破損圖像

如果你碰巧發現在你的網站上發現破損的圖像鏈接，一個個去替代他們是痛苦的。這個簡單的代碼可以節省很多的麻煩：

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

即使你沒有任何斷開的鏈接，加入這代碼也不會有任何影響。

Hover切換class類

比方說，當用戶將鼠標懸停在你頁面上的元素時，你想改變其視覺效果。當用戶鼠標懸停在元素上，你可以在該元素上添加一個class類，當鼠標停止懸停事件時移除此class類：

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

如果你想要一個更簡單的方式使用toggleClass方法，則僅僅需要添加必要的CSS：

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

備註：CSS在這種情況下使用是一個快速的解決方案，但要知道這點知識依舊是值得去了解下的。

禁用輸入

有時你可能需要用表單的提交按鈕或者某個輸入框直到用戶執行了某個動作（比如：檢查“我已閱讀條款”複選框）。在你的輸入框上設置disabled屬性，然後當你需要的時候啓用該屬性：

$('input[type="submit"]').prop('disabled', true);

你需要做的只是需要在輸入框上再次運行prop方法，但設置的被禁用值是false：

$('input[type="submit"]').prop('disabled', false);

停止正在加載的鏈接

有時你不想鏈接到特定的網頁或者重新載入頁面；你可能想讓他們做一些其他事情，如觸發一些其他的腳本。這是防止違約行動的技巧：

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

toggle fade/slide

滑動和淡入/淡出 是我們在jQuery中經常大量使用的動畫。你可能僅僅想在用戶做某些點擊事件的時候顯示一個元素，這時候需要淡入/淡出或者滑動方法。但是如果你需要那個元素在你第一次點擊的時候出現，在第二次點擊的時候消失，代碼如下：

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

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

簡單的手風琴

這是個簡單快速的方法創建一個手風琴：

// 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有相同的高度，無論他們都有什麼內容：

$('.div').css('min-height', $('.main-div').height());

這個例子設置了DIV的最小高度，這意味着它的高度只可以比這個設置的高度大而不能小。然而，一個更靈活的方法是循環的一組元素，並設置將最高元素的高度作爲高度：

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());
});

在瀏覽器標籤/新窗口打開外部鏈接

在新的瀏覽器標籤或窗口中打開外部鏈接，並確保在同一個標籤或窗口中打開的是同一個源的鏈接：

$('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()選擇器，你能找到一個元素內的文本內容。如果文本不存在，則這個元素將被隱藏：

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

可見變化的觸發

當用戶不再聚焦或者重新聚焦一個標籤時觸發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!');
  }
});

Ajax調用錯誤處理

當一個Ajax調用返回一個404或500的錯誤時，將執行該錯誤處理。如果該處理未定義，則其他jQuery代碼便可能不會執行了。定義一個全局Ajax錯誤處理程序：

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

鏈式操作

jQuery允許通過鏈式操作來減輕反覆查詢DOM和創建多個jQuery對象的過程。比如下面是你的方法調用：

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

這代碼可以通過鏈式大大的提高：

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

另一個方法是在一個可變的元素緩存（$作爲前置）：

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

鏈式和jQuery緩存方法是最好的做法，導致更短、更快的代碼。