にほ録

作業記録です。

40分で覚える！jQuery速習講座

2010-02-24 04:46:38 | Weblog
http://ascii.jp/elem/000/000/498/498710/

一時間掛かった orz.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $("p#first").html("<strong>変更後</strong>");
  $("p#red").css("color", "red");
  $("button#btn1").click(function(){
    $("img#img1").attr("src", "./1.jpg");
  });
  $("button#btn2").click(function(){
    $("div#anm1").show("slow");
  });
  $("dd:not(:first)").css("display", "none");
  $("dl dt").click(function(){
    if($("+dd", this).css("display")=="none"){
      $("dd").slideUp("slow");
      $("+dd",this).slideDown("slow");
    }
  });
});
</script>
<style type="text/css">
div#anm1 {
  width:200px;
  height:200px;
  background:red;
  display:none;
}

dl {
  width:400px;
  margin:50px auto;
  padding:0;

}
dl dt {
  background:#7CADB6;
  border-bottom:1px solid #FFFFFF;
  cursor:pointer;
  margin:0;
  padding:0;
}
dl dd {
  border:1px solid #7CADB6;
  border-top:none;
  height:300px;
  margin:0;
  padding:0;
}
</style>
</head>
<body>
<p id="first">変更前</p>
<p id="red">テキスト</p>
<button id="btn1">画像変更ボタン</button>
<img id="img1" src="./pumpkin_64.png" alt="" />
<button id="btn2">アニメーションボタン</button>
<div id="anm1"></div>
<dl>
<dt>見出し1</dt>
<dd>テキスト1テキスト1テキスト1</dd>
<dt>見出し2</dt>
<dd>テキスト2テキスト2テキスト2</dd>
<dt>見出し3</dt>
<dd>テキスト3テキスト3テキスト3</dd>
</dl>
</body>
</html>