　comeback_avan 　2024/08/31更新

jQuery入門講座

jQueryを書いてみた。やったことは下記の通り。

ボタンクリック時にdivタグの範囲の背景色を変える
ボタンクリック時にdivタグの範囲を表示・非表示にする
画面表示時に処理を行う（readyイベント）
マウスを上に置いた時の処理を行う(mouseoverイベント）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-3.6.0.js"></script>
  <title>jquery sample</title>
</head>
<body>
  <div id="div1" style="background: aqua;">div1</div>
  <input type="button" id="button1" value="ボタン1">
  <input type="button" id="button2" value="ボタン2">
  <script>
    $("#button1").click(function(){
      // $("#div1").hide();
      // $("#div1").fadeOut();
      $("#div1").css('background','red');
    });
    $("#button2").click(function(){
      // $("#div1").show();
      // $("#div1").fadeIn();
      $("#div1").css('background','aqua');
    });
    $("#button2").mouseover(function(){
      // $("#div1").show();
      // $("#div1").fadeIn();
      $("#div1").css('background','aqua');
    });

    //readyイベント
    $(function() {
      alert("!!");

    } )
  </script>
</body>

</html>