jQuery学習（「jQueryによるJavaScript入門」編）（2）

10-07-28

jQuery学習（「jQueryによるJavaScript入門」編）（2）

demoとmemo

前回のjQuery学習（「jQueryによるJavaScript入門」編）（1）の続きになります。第5～10回を試していきます。

jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

第5回　toggleクリックの制御

クリックでボックスを開く⇒クリックで閉じる: $(function(){
　$("#vol5").toggle(function(){　//クリックで表示、非表示を切り替える
　　$("#vol5 dd").css("display","block");
　},function(){
　　$("#vol5 dd").css("display","none");
　})
})

第6回　Effectの制御

showとhide。showはdisplay:none;を:block;に。hideはdisplayをnoneに。スピードは「fast」「nomal」「slow」「ミリ秒」を設定可能

クリックでボックスを開く⇒クリックで閉じる: $(function(){
　$("#vol6").toggle(function(){
　　$("#vol6 dd").show(400);
　},function(){
　　$("#vol6 dd").hide("slow");
　})
})

第7回　Effectの制御2

slideDown、slideUpによるボックスの開閉: $(function(){
　$(".vol7-1").toggle(function(){
　　$(".vol7-1 dd").slideDown("fast");
　},function(){
　　$(".vol7-1 dd").slideUp("slow");
　})
})

slideToggleによるボックスの開閉: $(function(){
　$(".vol7-2").click(function(){
　　$(".vol7-2 dd").slideToggle(1000);
　})
})

fadeIn、fadeOutによるボックスの開閉: $(function(){
　$(".vol7-3").toggle(function(){
　　$(".vol7-3 dd").fadeIn("fast");
　},function(){
　　$(".vol7-3 dd").fadeOut(1000);
　})
})

fadeToによる透過度の変更: $(function(){
　$(".vol7-4 dd").css("display","block");
　$(".vol7-4").toggle(function(){
　　$(".vol7-4 dd").fadeTo("nomal",0.4);
　},function(){
　　$(".vol7-4 dd").fadeTo(1000,1);
　})
})

第8回　click時の$関数の第2引数

thisはクリックされた要素。$("+dd",this)は、クリックされた要素の直後のddを指す。

$関数の第2引数を使った開閉: $(function(){
　$(".vol8 dt").click(function(){
　　$("+dd",this).slideToggle("normal");
　})
})

$関数の第2引数を使った開閉: $(function(){
　$(".vol8 dt").click(function(){
　　$("+dd",this).slideToggle("normal");
　})
})

$関数の第2引数を使った開閉: $(function(){
　$(".vol8 dt").click(function(){
　　$("+dd",this).slideToggle("normal");
　})
})

第9回　hover

jQueryのCSSセレクタはhover擬似クラスに非対応→$("a:hover")とはできない。
jQueryでのhover擬似クラスは全ての要素に設定可能

$(function(){
　$("#vol9 a").hover(function(){
　　$(this).addClass("hover");
　},function(){
　　$(this).removeClass("hover");
　})
})

第10回　hoverとEffectの応用

豚バラ128円／g
牛肩ロース188円／g

$(function(){
　$("#vol10 li a+span").hide();　//hideにスピードを指定しなければ最初から非表示
　$("#vol10 li a").hover(function(){
　　$("+span",this).show("nomal");
　},function(){
　　$("+span",this).hide("fast");
　})
})

jQuery学習（「jQueryによるJavaScript入門」編）（2）

demoとmemo

jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

参考記事