jqueryの入門 (1)

エレメントへのアクセス

エレメント内容の読み出し

$("div").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)

  $(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");
  });

スタイルシートを交互に切り替える

１秒ごとに交互に切り替えるサンプルを見る

.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 サンプルを見る

#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");
    });
  });

画像に点線枠を付ける

画像に４ピクセルの赤い点線枠を付けるサンプルを見る

  $(function(){
    $("div img").css("border","4px dotted red");
  });

指定したクラス名の画像に点線枠を付ける

指定したクラス名の画像に４ピクセルの赤い点線枠を付けるサンプルを見る

  $(function(){
    $("img[class='waku']").css("border","4px dotted red");
  });