jqueryの入門 (1)
エレメントへのアクセス
エレメント内容の読み出し
$("div").text()
$("#main").text()
$(".note").text()
$(".note:first").text()
$(".note:last").text()
$(".note:eq(1)").text()
$("#main").text()
$(".note").text()
$(".note:first").text()
$(".note:last").text()
$(".note:eq(1)").text()
$(function(){ alert($("div").text()); });
$(function(){ alert($("div").html()); });
エレメント内容の書き込み
$("#mainName").text("jquery")
$("#date").text(20090505)
$("#date").text(20090505)
$(function(){ $("div").text("2009/08/01"); });
$(function(){ $("div").html("<i>2009/08/01</i>"); });
スタイルシートの読み出し
$("#mainName").css("background-color")
$(function(){ alert($("#mainName").css("background-color")); });
スタイルシートの書き込み
$("#mainName").css("background-color","yellow")
$(function(){ $("#mainName").css("background-color","yellow"); });
$(function(){ $("#mainName").css({"background-color":"yellow","color":"red"}); });
スタイルシートクラスの追加
$("#mainName").addClass("note")
$(function(){ $("#mainName").addClass("note"); });
$(function(){ $("#mainName").addClass("note caution"); });
スタイルシートクラスの削除
$("#mainName").removeClass("note")
$(function(){ $("#mainName").removeClass("note"); });
スタイルシートを交互に切り替える
1秒ごとに交互に切り替える
サンプルを見る
.note { color:red; } .caution { color:white; background-color:black; } $(function(){ setInterval("change()",1000); }); function change(){ $("p.note").toggleClass("caution"); }
ボタンのクリックイベント
ボタンをクリックしたらスタイルシートを切り替える
サンプルを見る
$(function(){ $("#btnA").click(change); $("#btnA").click(msg); }); function change(){ $("p.note").toggleClass("caution"); } function msg(){ alert($("p.note").css("color")); }
$(function(){ $("#btnA").click(function(){ $("p.note").toggleClass("caution"); }); $("#btnA").click(function(){ alert($("p.note").css("color")); }); });
マウスホバー時処理
マウスホバー時にスタイルシートを切り替える
サンプルを見る
$(function(){ $("p.note").hover( function(){ $(this).addClass("caution"); }, function(){ $(this).removeClass("caution"); } ); });
クリックごとに処理を切り替える
クリックするたびにスタイルシートクラスを切り替える
サンプルを見る
$(function(){ $("p.note").toggle( function(){ $(this).addClass("caution"); }, function(){ $(this).removeClass("caution"); } ); });
ページが読み込まれた場合のイベント処理
ページが読み込まれた場合のイベント処理
サンプルを見る
$(function(){ $("div:empty").text("読み込みました"); });
表示処理
エレメントを表示する
サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function(){ $("#photo img").show(); }); });
エレメントをエフェクトを付けて表示する
slow,fast,normal サンプルを見る
slow,fast,normal サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function("slow"){ $("#photo img").show(); }); });
ボタンをクリックするたびに表示/非表示を切り替える
クリックするたびに表示/非表示を切り替える
サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function(){ $("#photo img").toggle(); }); });
フェードイン/フェードアウトさせる
画像をフェードイン/フェードアウトさせる
サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function(){ $("#photo img").fadeIn("slow"); }); });
不透明度を設定する
画像に不透明度を設定する
サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function(){ $("#photo img").fadeIn("slow").fadeTo(1000,0.5); }); });
スライドダウン/スライドアップさせる
画像をスライドダウン/スライドアップさせる
サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function(){ $("#photo img").slideDown("slow"); }); });
クリックするたびにスライドダウン/スライドアップさせる
クリックするたびにスライドダウン/スライドアップさせる
サンプルを見る
#photo img { display:none; } $(function(){ $("#btn").click(function(){ $("#photo img").slideToggle("slow"); }); });
独自のエフェクトを実行させる
独自のエフェクトを実行させる
サンプルを見る
$(function(){ $("#btn").click(function(){ $("#photo2 img").animate({ width:"120px", height:"160px", opacity:0.5, borderWidth:"6px" },500,"swing"); }); });
画像に点線枠を付ける
画像に4ピクセルの赤い点線枠を付ける
サンプルを見る
$(function(){ $("div img").css("border","4px dotted red"); });
指定したクラス名の画像に点線枠を付ける
指定したクラス名の画像に4ピクセルの赤い点線枠を付ける
サンプルを見る
$(function(){ $("img[class='waku']").css("border","4px dotted red"); });