Jquery須要掌握的技巧

檢查 jQuery 是否加載

在使用 jQuery 進行任何操做以前，你須要先確認它已經加載：

if (typeof jQuery == 'undefined') {  console.log('jQuery hasn\'t loaded');
} else {  console.log('jQuery has loaded');
}

返回頂部按鈕

利用 jQuery 中的 animate 和 scrollTop 方法，你無需插件就能夠建立簡單的 scroll up 效果:

// 返回頂部$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

<!-- 設置錨 --><a class="top" href="#">Back to top</a>

調整 scrollTop 的值便可改變滾動着陸位置。你實際所作的是在 800 毫秒內不斷設置文檔主體的位置，直到它滾動到頂部。

預加載圖片

若是你的網頁使用了大量並不是當即可見的圖片（例如懸停鼠標觸發的圖片），那麼預加載這些圖片就顯得頗有意義了:

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

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

判斷圖片是否加載完成

在有些狀況下，爲了繼續執行腳本，你須要檢查圖片是否已經徹底加載:

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

即便你暫無任何失效的連接，添加這段代碼也不會有任何損失。

鼠標懸停切換 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 方法, 可是這一次把 disabled 值改成 false：

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

阻止連接加載

有時你不但願連接到指定頁面或者重載當前頁面，而是想讓它們幹些別的，例如觸發其它腳本。這須要在阻止默認動做上作些文章：

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

緩存 jQuery 選擇器

想一想你在項目中一次又一次地寫了多少相同的選擇器吧。每一個 $('.element') 都必須查詢一次整個 DOM,無論它是否曾這樣執行過。做爲代替，咱們只運行一次選擇器，並把結果儲存在一個變量中：

var blocks = $('#blocks').find('li');

如今你能在任何地方使用 blocks 變量而無需每次查詢 DOM 了:

$('#hideBlocks').click(function () {
  blocks.fadeOut();
});

$('#showBlocks').click(function () {
  blocks.fadeIn();
});

緩存 jQuery 的選擇器是種簡單的性能提高。

切換淡出 / 滑動

淡出和滑動都是咱們在 jQuery 中大量使用的效果。你可能只想在用戶點擊後展示某個元素，此時用 fadeIn 和 slideDown 方法就很完美。可是若是你但願這個元素在首次點擊時出現，在再次點擊時消失，這段代碼就頗有用了：

// 淡出$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});// 切換$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

簡單的手風琴效果

這是一個快速實現手風琴效果的簡單方法:

// 關閉全部面板$('#accordion').find('.content').hide();// 手風琴效果$('#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());

這個例子設置了 min-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();

在 visibility 屬性變化時觸發

當用戶的焦點離開或者從新回到某個標籤頁時，觸發 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 調用錯誤處理

當一個 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 中用以簡化和優化代碼的最佳實踐。

這裏收集了一些簡單的竅門，助你玩轉 jQuery。

檢查 jQuery 是否加載

在使用 jQuery 進行任何操做以前，你須要先確認它已經加載：

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

返回頂部按鈕

利用 jQuery 中的 animate 和 scrollTop 方法，你無需插件就能夠建立簡單的 scroll up 效果:

// 返回頂部
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

<!-- 設置錨 -->
<a class="top" href="#">Back to top</a>

調整 scrollTop 的值便可改變滾動着陸位置。你實際所作的是在 800 毫秒內不斷設置文檔主體的位置，直到它滾動到頂部。

預加載圖片

若是你的網頁使用了大量並不是當即可見的圖片（例如懸停鼠標觸發的圖片），那麼預加載這些圖片就顯得頗有意義了:

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

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

判斷圖片是否加載完成

在有些狀況下，爲了繼續執行腳本，你須要檢查圖片是否已經徹底加載:

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

即便你暫無任何失效的連接，添加這段代碼也不會有任何損失。

鼠標懸停切換 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 方法, 可是這一次把 disabled 值改成 false：

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

阻止連接加載

有時你不但願連接到指定頁面或者重載當前頁面，而是想讓它們幹些別的，例如觸發其它腳本。這須要在阻止默認動做上作些文章：

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

緩存 jQuery 選擇器

想一想你在項目中一次又一次地寫了多少相同的選擇器吧。每一個 $('.element') 都必須查詢一次整個 DOM,無論它是否曾這樣執行過。做爲代替，咱們只運行一次選擇器，並把結果儲存在一個變量中：

var blocks = $('#blocks').find('li');

如今你能在任何地方使用 blocks 變量而無需每次查詢 DOM 了:

$('#hideBlocks').click(function () {
  blocks.fadeOut();
});

$('#showBlocks').click(function () {
  blocks.fadeIn();
});

緩存 jQuery 的選擇器是種簡單的性能提高。

切換淡出 / 滑動

淡出和滑動都是咱們在 jQuery 中大量使用的效果。你可能只想在用戶點擊後展示某個元素，此時用 fadeIn 和 slideDown 方法就很完美。可是若是你但願這個元素在首次點擊時出現，在再次點擊時消失，這段代碼就頗有用了：

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

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

簡單的手風琴效果

這是一個快速實現手風琴效果的簡單方法:

// 關閉全部面板
$('#accordion').find('.content').hide();

// 手風琴效果
$('#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());

這個例子設置了 min-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();

在 visibility 屬性變化時觸發

當用戶的焦點離開或者從新回到某個標籤頁時，觸發 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 調用錯誤處理

當一個 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 中用以簡化和優化代碼的最佳實踐。