jQuery常用的一些技巧總結_jquery

引子

jQuery的存在，讓學習前端開發的人感到前端越來越容易入門了，用簡單的幾行程式碼就可以實現需求，但是，你真的會用jQuery麼，當程式碼運行後無法看到自己預期的效果，是不是覺得jQuery出了問題，其實，問題還是出在了自己會不會用上面。以下列舉一些開發中常遇到的應用實例，發現另一個不同的jQuery世界。

回到頂部按鈕

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

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

透過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');<br />

判斷圖片是否已載入

有時候你可能需要檢查圖片是否已經載入完成，以便於可以繼續執行對應的js程式碼：

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

曾經遇到的使用場景：有些元素需要以圖片的實際尺寸來設定其大小，以絕對佈置方式放置。元素的大小設定可以在圖片載入完成後計算。

自動修補破損影像

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

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

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

停用輸入

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

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

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

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

對地不了解prop函數的jQuery開發者來說，最常使用的是attr函數，可能開發很多程式都沒有發現什麼問題，但是，在開發例如checkbox、radio、select時，會發現使用attr無法讓屬性生效，以為是jQuery的bug，下面來說說attr和prop的使用建議:

遇到要取得或設定checked,selected,readonly和disabled等屬性時，用prop方法顯然比較好

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

依文字取得元素

透過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!');
 }
});