jQueryの基本的な形

$(function(){ $(“A”).b() $(“#hoge”) $(“.hogehoge”) $(“li a”) $(“p.hoge,p.hogehoge”)
});

cssを使わずに色を変える

//html
<div class=”hoge1">
このテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキサスは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなります
</div>

//css
.hoge1{ color:#333;
}

//jQuery
$(function(){ $(“.hoge1").css(“color”,”blue”)
});

イベントメソッド

$(function(){ $(“A”).b(function{ $(“c”).d() });
});

クリックすると背景色が変わる

//html
<div class=”hoge2A”>クリックすると緑色になります</div>

//css
.hoge2A{ background-color:#fff; （省略）
}

//jQuery
$(function{ $(“,hoge2A”).click(function(){ //.hoge2Aをクリックした時に、 $(this).css(“background-color”,”green”) //背景色を緑にする。 });
});

$(this)とは「イベント時に前のセレクタを利用する」という意味。

クリックの度に色を変化させる

//html
<div class=”hoge2B”>クリックの度に色が変わります</div>

//css
.hoge2A{ background-color:#fff; （省略）
}

//jQuery
$(function{ $(“hoge2B”).toggle(function(){ //toggleイベントメッソドを使用 $(this).css(“background-color”,”green”) },function(){ //クリックの度に入れ替わる挙動を「,（コンマ）」で区切る $(this).css(“background-color”,”yellow”) },function(){ $(this).css(“background-color”,”red”) },function(){ $(this).css(“background-color”,”orange”) });
});

エフェクトメソッド

クリックすると要素が隠れる

//html
<div class=”hoge2C”>クリックすると消えます</div>

//jQuery
$(function{ $(“hoge2C”).click(function(){ $(this).hide() });
});

クリックするとフェードアウトする

//html
<div class=”hoge2D”>クリックするとフェードアウト</div>

//jQuery
$(function(){ $(“hoge2D”).click(){ $(this).fadeOut(2000) //要素がどれくらいでフェードアウトするのかを記述。 });
});