jQuery的提示大家應該知道

簡單的竅門的集合，以幫助您的jQuery的遊戲。

提示

1. 使用 noConflict()
2. 檢查是否載入的jQuery
3. 使用.on()繫結.click()代替
4. 返回頂部按鈕
5. 預先載入影象
6. 檢查，如果影象載入
7. 自動修復破碎的形象
8. 釋出的AJAX表單
9. 懸停切換類
10. 禁用輸入欄位
11. 停止路徑的負載
12. 快取jquery選擇
13. 淡入淡出切換/幻燈片
14. 簡單手風琴
15. 讓兩個div相同的高度
16. 開啟外部連結在新標籤/視窗
17. 查詢元素通過簡訊
18. 可見性改變觸發器
19. Ajax呼叫錯誤處理
20. 連鎖外掛呼叫
21. 排序列表項按字母順序
22. 禁用右鍵單擊

使用 noConflict()

其他JavaScript庫也使用jQuery使用的$別名。 為了確保jQuery不會與不同庫的$物件發生衝突，請在文件的開頭使用noConflict()方法：

jQuery.noConflict();

現在，您將使用jQuery變數名稱而不是$來引用jQuery物件（例如，jQuery('div p').hide()）。

檢查如果載入的jQuery

之前，你可以使用jQuery做任何事情，你首先需要確保它載入：

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

現在你是關閉…

使用.on()繫結.click()代替

使用.on()給你幾個優點比使用.click()，如新增多個事件的能力…

.on('click tap hover')

…繫結適用於動態建立的元素，以及（有沒有必要動態新增到DOM元素每一個元素手動繫結）…

…和可能性來設定一個名稱空間:

.on('click.menuOpening')

名稱空間給你解除對特定事件（例如，.off（'click.menuOpening'））的權力。

返回頂部按鈕

通過使用jQuery中的animate和scrollTop方法，你並不需要一個外掛來建立一個簡單的滾動到頂部動畫：

// Back to top
$('.container').on('click', '.back-to-top', 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');

檢查如果影象載入

有時你可能需要檢查，如果您的影像出現，以便繼續與指令碼滿載：

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

您也可以檢查，如果一個特定的形象已被用一個ID或類替換<img>標籤載入。

自動修復破碎的形象

如果你碰巧發現網站上的殘缺的影象連結一個取代他們可以是一個痛苦。這一段簡單的程式碼可以節省很多麻煩：

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

另外，如果你想簡單地隱藏破碎的形象這個片段將利用該護理：

$('img').on('error', function () {
  $(this).hide();
});

釋出的AJAX表單

jQuery的AJAX方法來請求文字，HTML，XML或JSON的常用方法。如果你想通過AJAX傳送的形式，你可以通過val()方法收集使用者輸入：

$.post('sign_up.php', {
  user_name: $('input[name=user_name]').val(),
  email:     $('input[name=email]').val(),
  password:  $('input[name=password]').val(),
});

然而，所有這些val()呼叫的是昂貴的。收集使用者輸入的一個更好的辦法是使用’的serialize()函式，它收集使用者輸入一個字串：

$.post('sign_up', $('#sign-up-form').serialize());

切換懸停類

比方說，你想改變視覺可點選元素的頁面上，當使用者將滑鼠懸停在它。您可以將類新增到你的元素，當使用者徘徊;使用者停止徘徊時刪除類：

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

你只需要新增必要的CSS。如果你想要一個更simpler方式使用toggleClass方法：

$('.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').on('click', function (e) {
  e.preventDefault();
});

快取記憶體jquery選擇

想想有多少次你一遍又一遍地在任何專案中再次寫入相同的選擇。每個$('.element')選擇有每次搜尋整個DOM，如果不管選擇以前有執行。相反，執行一次選擇器和儲存在變數的結果：

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

現在你可以使用任何你想要的blocks變數，而不必每次搜尋DOM：

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

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

快取jQuery選擇器是一種簡單的效能增益。

切換淡入/幻燈片

滑動和衰落都是我們用很多東西在我們使用jQuery的動畫。你可能只是想表明一個元素，當使用者點選的東西，這使得fadeIn和slideDown方法完善。但是，如果你想要的元素出現在第一次點選，然後消失在第二本會工作得很好：

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

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

簡單手風琴

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

// Close all panels
$('#accordion').find('.content').hide();

// Accordion
$('#accordion').find('.accordion-header').on('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這意味著它可以比主分割槽越大，但從來沒有變小。然而，更靈活的方法是迴圈在一組的元素，並設定高度最高的元件的高度：

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

如果希望all列具有相同的高度：

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

注：這是可以做到幾個方面在CSS，但根據您的需要是什麼，知道如何在jQuery中做到這一點還是值得的。

在新標籤中開啟外部連結/窗

開啟外部連結在新的瀏覽器標籤或視窗，並確保在同一起源於同一個標籤或視窗開啟連結：

$('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).on('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的快取方法是導致更短，更快的程式碼的最佳實踐。

排序列表項按字母順序

比方說，你結束了在列表中的專案太多。也許內容是由CMS生成並希望他們字母順序：

var ul = $('#list'),
lis = $('li', ul).get();

lis.sort(function (a, b) {
  return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
});

ul.append(lis);

你去那裡！

禁用右鍵單擊

如果要禁用右鍵單擊，您可以對整個頁面進行操作…

$(document).ready(function (){
  $(document).bind('contextmenu', function (e){
    return false;
  })
})

…但是您也可以為特定元素做同樣的事情：

$(document).ready(function (){
  $('#submit').bind('contextmenu', function (e){
    return false;
  })
})