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の応用

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

参考記事

otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.