jquery最常用的十個程式碼片段

jquery最常用的十個程式碼片段

jQuery被用在無數個網站的頁面上，它是使用最為廣泛的javascript庫之一。

　　

　　jQuery被用在無數個網站的頁面上，它是使用最為廣泛的javascript庫之一。jQuery的受歡迎程度的部分是它的簡單性。它能夠通過簡單的陳述式完成大部分複雜的工作。有許多jQuery片段我們在每天不斷重複的使用，這裡總結了10條你必須知道的jQuery程式碼片段。

　　1.返回頂部

　　html代碼

Back to top

// Back To Top$('a.top').click(function(){$(document.body).animate({scrollTop : 0},800);return false;});

　　如上所示，使用jQuery 的animate和scrollTop 可以十分方便的製作一個返回頂部的特效。

　　通過改變scrollTop 的值我們可以控制捲軸。在上面的例子中值設為0，是為了讓頁面滾動到最頂部。

　　上面的動畫效果是在800ms內從頁面底部滾動到頁面的最頂部。

　　2.檢查圖片是否載入完畢

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

　　有時候你需要檢查圖片是否被完全載入以便與完成後繼的指令碼。上面的三句jQuery語句能夠幫你完成這個任務。

　　3.自動修複破損映像

$('img').error(function(){    $(this).attr('src', ‘img/broken.png’);});

　　我們偶爾會在某些頁面中弄錯一些圖片的連結，這時要想一一的修複它們並不是一件容易的事情。使用上面的代碼可以協助你快速的解決這個問題。

　　即使你沒有任何破損的連結，寫上上面的語句也不會造成任何損失。

　　4.滑鼠滑過時切換CLASS

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

　　這個jQuery片段在使用者用滑鼠滑過連結元素時添加一個滑過樣式，而在滑鼠離開時，將滑過樣式去掉。樣式的控制需要你在CSS檔案中編寫。

　　5.使INPUT欄位不可用

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

　　有時候你可能會希望表單中的某個按鈕或某個input欄位不可用，直到使用者觸發某個條件，例如：點擊了“我同意xxx協議。。。”。通過上面的代碼可以使input欄位不可用。要想input欄位變為可用，需調用下面的代碼：

$('input[type="submit"]').removeAttr("disabled”);

　　

6.阻止超連結跳轉

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

　　有時候我們不希望點擊超連結後跳轉到另一個頁面或者重新載入頁面。我們希望點擊超連結會觸發某些指令碼的執行，這時，可以通過上面的jQuery程式碼片段來阻止瀏覽器的預設行為。

　　7.切換FADE/SLIDE效果

// Fade$( “.btn" ).click(function() {    $( “.element" ).fadeToggle("slow");});// Toggle$( “.btn" ).click(function() {    $( “.element" ).slideToggle("slow");})

　　滑動和淡入淡出效果是我們使用得最多的jQuery動畫效果。

　　8.簡單的手風琴效果

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

　　要使用這個指令碼你所要做的事情是編寫一個必要的html結構代碼。

　　9.使兩個DIV高度相同

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

　　有時候你希望兩個div具有相同的高度和不同的內容，這個jQuery片段可以解決這個問題。它通過設定“min-height”來使div具有相同的高度。

　　10.無序列表隔行變色

$('li:odd').css('background', '#E8E8E8’);

　　通過這句代碼你可以很容易的建立一個隔行變色的無序列表，你也可以將它移植到表格、div或其它元素上去。