10個你應該知道的 JQuery 片斷

JQuery 當前很是流行的js庫。有成千上萬的網站在使用它。大大簡化了咱們的一些經常使用操做。 下面是10個咱們常常會用到的片斷。

10.li的斑馬條文

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

1句話，可以讓li呈現不一樣的列顏色。

9.讓兩個div等高

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

當你須要將兩個div高度相等的時候。能夠用上面的1句話實現。

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

這個片斷能快速的幫你創建一個手風琴樣式的效果。

7.幻燈片切換

// Fade
$( 「.btn」 ).click(function() {
$( 「.element」 ).fadeToggle(「slow」);
});

// Toggle
$( 「.btn」 ).click(function() {
$( 「.element」 ).slideToggle(「slow」);
});

6.中止連接加載

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

5.禁用輸入框

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

4.鼠標懸停效果

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

3.將加載錯誤圖片替換

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

2.檢查圖片加載完成

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

1.回到網站頂部

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

//Create an anchor tag
<a class=」top」 href=」#」>Back to top</a>

譯文原文：[weblink url="http://inspiretrends.com/10-jquery-snippets-designers-know/"]10 jQuery Snippets Designers Should Know[/weblink]