jQueryの便利な小ネタ
はじめに
jQueryとは、HTML文書をより便利に扱うためのJavaScriptライブラリの一つです。JavaScriptを用いたHTML文書の作成・操作が容易になります。今回は、そんなjQueryを使った便利な小ネタについてご紹介いたします。
jQueryで要素を隠す・表示する
$(function(){
$('#hidebutton').click(function() {
$('#hiddendiv').hide();
});
$('#showbutton').click(function() {
$('#hiddendiv').show();
});
})
このコードで、hidebuttonをクリックするとhiddendivが隠れ、showbuttonをクリックすると再び表示されます。hide()とshow()は、要素を隠す・表示するときによく使われるメゾットです。
jQueryで要素をフェードイン・フェードアウトする
$(function(){
$('#fadeinbutton').click(function() {
$('#fadeoutdiv').fadeIn();
});
$('#fadeoutbutton').click(function() {
$('#fadeoutdiv').fadeOut();
});
})
このコードで、fadeinbuttonをクリックするとfadeoutdivがフェードインし、fadeoutbuttonをクリックするとフェードアウトします。fadeIn()とfadeOut()は、フェードイン・フェードアウトするときによく使われるメゾットです。
jQueryで要素をスライドダウン・スライドアップする
$(function(){
$('#slidedownbutton').click(function() {
$('#slideupdiv').slideDown();
});
$('#slideupbutton').click(function() {
$('#slideupdiv').slideUp();
});
})
このコードで、slidedownbuttonをクリックするとslideupdivがスライドダウンし、slideupbuttonをクリックするとスライドアップします。slideDown()とslideUp()は、スライドダウン・スライドアップするときによく使われるメゾットです。
jQueryで要素をトグルする
$(function(){
$('#togglebutton').click(function() {
$('#togglediv').toggle();
});
})
このコードで、togglebuttonをクリックするとtoggledivがトグルします。toggle()は、要素をトグル（表示と非表示を切り替える）するときによく使われるメゾットです。
jQueryで要素にクラスを付けたり外したりする
$(function(){
$('#addbutton').click(function() {
$('#classdiv').addClass('red');
});
$('#removebutton').click(function() {
$('#classdiv').removeClass('red');
});
})
このコードで、addbuttonをクリックするとclassdivにredというクラスが付き、removebuttonをクリックすると外れます。addClass()とremoveClass()は、要素にクラスを付けたり外したりするときによく使われるメゾットです。
jQueryで要素の属性を変更する
$(function(){
$('#changebutton').click(function() {
$('#changediv').attr('src', 'newimage.jpg');
});
})
このコードで、changebuttonをクリックするとchangedivのsrc属性がnewimage.jpgに変更されます。attr()は、要素の属性を変更するときによく使われるメゾットです。
まとめ
今回はjQueryを使った便利な小ネタについてご紹介いたしました。要素の隠し・表示、フェードイン・フェードアウト、スライドダウン・スライドアップ、トグル、クラスの付加・削除、属性の変更など、様々な操作が簡単に行えます。是非、活用してみてください。