jQuery 練習問題

練習問題

1.headerを1秒後hideで消す
2.headerを1秒後showで表示
3.btn_3のボタンをダブルクリックでfooterに文字を入れる
4.btn_4をクリックしたらid="result"に対して点滅するように記述
　追加:"id="resultの下に文字を追加する
5.btn_5をクリックするとliの文字を赤とフォントを10px
6.btn_6をクリックするとliの四角を角丸に変更
7.btn_7をクリックするとliの背景をskyblueに変更
8.btn_8をクリックするとliの背景をgrayにし、クリックをoffにする

1

function hideHeater{
  $("header").hide(1000);
}   

2

function hideHeater{
  $("header").show(1000);
}   

3

$("#btn_3").on("dblclick", function(){
  $("footer").text("文字を入れた");
});

4

$("#btn_4").on("click", function(){
  $("#result").fadeOut(1000).fadeIn(1000);
  $("result").append("<di>文字</div>");
});

5

$("#btn_5").on("click", function(){
  $("li").css( "color","red").css("fontSize", "15px");
});

6

$("#btn_6").on("click", function(){
  $("li").css("border-radius","10px");
});

7

$("#btn_7").on("click", function(){
  $("li").css("background-color","skyblue");
});

8

$("#btn_8").on("click", function(){
  $("li").css("background-color","gray");
  $("#btn_8").off("click");
});