jQuery是一個快速,輕巧,功能豐富的JavaScript庫。它的功能包含了HTML文檔遍歷和處理,事件處理,動畫、Ajax和一個易於使用的API,跨瀏覽器兼容等。隨著通用性和可擴展性的結合,jQuery的改變數以百萬計的人寫JavaScript的方式。

此篇主要介紹12個jQuery運用的方法:

返回頂部

使用JQuery的動畫的scrollTop的和方法可以創建簡單地返回頂部的動畫:

// Back to top 

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

HTML中生成一個按鈕:


 Back to top

可以改變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').load(function () { console.log('image load successful'); });

你也可以通過帶id或者class的img標籤來判斷某張特定的圖片是否完全加載

自動修復損壞圖片

如果圖片損壞,可以用另外一張進行替換:


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

Hover状态的类切换

當用戶的鼠標懸浮在一個可以點擊的元素上時,你可以通過添加一個class改變它的視覺效果,鼠標離開該元素時,就移開剛剛添加的class:


$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); 一個更簡單的方式是使用toggleClass: $('.btn').hover(function () { $(this).toggleClass('hover'); });

輸入框的不可編輯

有時,你想要表單的提交按鈕或者文本框變的不可編輯,直到用戶完成某個特定的動作,通過修改 input 元素的 disabled 屬性來實現:


$('input[type="submit"]').prop('disabled', true); 再次調用 php 方法將 disabled 值改為 false,就可以更改元素狀態: $('input[type="submit"]').prop('disabled', false);

停止連結加載

若你不想點擊鏈接跳轉到另一個頁面或者重新加載頁面,僅僅只想讓它做點別的事情,如觸發其它腳本,則需要阻止鏈接的默認行為:


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

Fade/Slide切换

Slideing 和 fading 是很常用的 JQuery 動畫。如果你想要在用戶產生點擊事件時顯示一個元素,可以用 fadeIn 或者 slideDown,若要實現第一次點擊顯示元素而第二次點擊隱藏元素的效果,可以參考下面的代碼:


// 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的內容如何:


$('.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); 在上述的示例中,會循環一個元素集合,並將元素的高度設置成元素集合中高度最高的。若要所有 column 保持同樣地高度,則可以這樣: var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); });

在新的Tab/Window打開外鏈

在瀏覽器的新Tab/Window打開外鏈,並且在同一個Tab/Window打開同源的連結:


$('a[href^="http"]').attr('target','_blank'); $('a[href^="//"]').attr('target','_blank'); $('a[href^="'+window.location.origin+'"]').attr('target','_self');

通過文本查找元素

利用 JQuery 的 contains() 選擇器可以查找一個包含特定文本的元素,如果文本不存在,元素則隱藏:


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

Facebook 功能: