(譯)你應該知道的jQuery技巧

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

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

回到頂部按鈕

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

// 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毫秒中讓頁面滾動，直到它滾動到文檔的頂部。html

備註：來看一些scrollTop的調皮行爲。java

圖片預加載

若是你的網頁使用了不少隱藏圖片文件（例如：鼠標懸停展現的圖片），那麼圖片的預加載是有意義的：jquery

$.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代碼：git

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

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

自動修補破損圖像

若是你碰巧發如今你的網站上發現破損的圖像連接，一個個去替代他們是痛苦的。這個簡單的代碼能夠節省不少的麻煩：ajax

$('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緩存方法是最好的作法，致使更短、更快的代碼。

翻譯：野獸

英文原文地址：https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know。