jQuery小技巧

回到頂部的按鈕

經過使用jQuery中的animate 與 scrollTop 方法能夠建立一個很是簡易的帶有平滑滾動的回到頂部的按鈕：

// Back to top$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});<!-- Create an anchor tag --><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或者類選擇器來判斷某個特定的圖片是否加載完成。

Fix Broken Images Automatically

在頁面上若是發生某些圖片加載失敗是一個很是常見而且噁心的事情，以下的一小段代碼能夠在某種程度上解決這個問題：

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

即便沒有發現任何的壞鏈的狀況，也是建議將這段代碼添加到頁面中。

Toggle Classes on Hover

不少時候須要的響應是在用戶懸浮在某個元素上時改變其的可見性或者狀態，換言之，便是在用戶將鼠標懸浮在某個元素上時修改其的類屬性，而在用戶中止懸浮時移除該類:

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

固然，更簡單的就是利用 toggleClass 方法:

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

Note: CSS的hover僞類多是更方便的作法，不過知曉這種用法也是值得的。

禁用輸入框

不少狀況下咱們但願提交按鈕可以在部分文本框未填入的狀況下處於禁用狀態直到用戶執行了某個動做，此時咱們就須要爲這個按鈕添加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種最多見的動畫之一，不少時候咱們但願能在用戶點擊某個元素以後將其漸隱漸出或者滑動出現：

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

將兩個DIV設置爲統一高度

有時候但願不管兩個DIV種包含怎樣的內容都能保持統一高度：

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

也可使用以下更靈活一點的方法：

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');

Note: window.location.origin 在IE10下沒法工做. 這個修復 專門處理這個問題。

根據文本選擇元素

經過使用 contains() 選擇器能夠根據內容搜索對應的元素，下述代碼的做用就是在文本不存在的時候隱藏元素：

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

可見性變化時候的觸發

在某個Tab得到焦點或者失去焦點的時候：

全選複製放進筆記

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