あなたが知っているはずのJQueryのクリップ10個

JQueryは現在非常に流行しているjsライブラリです.何千ものサイトが利用しています私たちの一般的な操作を大幅に簡素化しました.次は私たちがよく使う10のクリップです.

10.liのシマウマ条文

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

1つの言葉でliに異なる列の色を見せることができます.

9.2つのdivを等高値にする

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

2つの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.Webサイトのトップに戻る

// 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]