[jQuery] 基本的な使い方

jQueryはJavaScriptを簡単に使うことができるようになるライブラリで、WebページにリッチなUIを実装することができます。

「あんなに長かったJavaScriptのコードがこれだけ？」って思うことが多く、使い始めて少しするとその便利さが良くわかります。

少々のJavaScriptの知識とCSSの知識があればOK。Webに実装したい機能をネットで調べながら構築していくと、いつの間にかjQueryを使いこなせるようになっています。

今回はjQueryの基本的な使い方を説明します。

Contents

1 AをBする
2 AをBしたとき、CをDする
3 連続変化

AをBする

$(function(){
    $('A').B()
});

$(function(){

$('A').B()

});

２行目の部分は

$(‘セレクタ’).メソッド(パラメータ)

という構文になっており、AをBするという意味になります。

使用例

$(function(){
    $('#sample').css('background-color','red')
});

$(function(){

$('#sample').css('background-color','red')

});

これで id=”sample”(Divなどの要素）のCSSで背景色を red にするという意味になります。

AをBしたとき、CをDする

$(function(){
    $('A').B(function(){
        $('C').D()
    });
});

$(function(){

$('A').B(function(){

$('C').D()

});

こちらはセレクタAをBした時、CをDするという２段構造になっています。
ウェブサイトで実際に使うのはこのパターンが多いでしょう。

$(function(){
    $('#sample2').click(function(){
        $(this).css('background-color','red')
    });
});

$(function(){

$('#sample2').click(function(){

$(this).css('background-color','red')

});

id=”sample2″(Divなどの要素）がクリックされたら、その要素(sample2)のCSSで背景色を red にするという意味になります。thisは同じセレクタを意味するので、この場合は sample2 になります。

連続変化

前項の例だと、一度クリックして背景色が変わってしまうとその後変化がありません。
クリックされる度に背景色を変えたい場合は toggle を使います。

toggle() は指定された要素が表示状態である場合は非表示に、非表示状態である場合は表示状態にします。

$(function(){
    $("#sample3").toggle(function(){
            $(this).css('background-color','red')
        },function(){
            $(this).css('background-color','green')
        },function(){
            $(this).css('background-color','blue')
    });
});