jQueryの実行検証

カテゴリー︎： 【jQuery】

jQueryの実行検証メモ

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <style>
  h1 {
    background: tan;
  }
  </style>
  <h1>html表示</h1>
  <button id="btn">ボタン</button>
  <button id="btn2">ボタン2</button>
  <button id="btn3">ボタン3</button>
  <button id="btn4">ボタン4</button>
  <p class="text4">クリック後にここを変更</p>
  <script>
  $(document).ready(function() {
    // alert("準備　オッケー");
    // console.log("準備　オッケー");

    $('#btn').click(function() {
      alert("準備万端");
      $('#btn').css('background', "tan");
    });

  });

  $('#btn2').click(function() {
    $('#btn2').css("color", "red");
    alert("readyの外側です");
  });


  $('#btn3').click(function() {
    $('#btn3').css({
      color: 'green',
      background: 'snow'
    });
    $('#btn3').hide();
  });


</script>



  <script>
    $(function() {
      // alert("読み込み完了しました！（即時関数を実行）");
      console.log("読み込み完了しました！（即時関数を実行）");
    })
  </script>
</body>

</html>
PAGE TOP