ド素人が作る自分のポートフォリオサイト作成　第４回目　～jqueryへの挑戦編Vol.1～

　今回は、ド素人が作る自分のポートフォリオサイト作成　第４回目　～jqueryへの挑戦編Vol.1～と言う内容で行っていこうと思います。

　ことの始まりは、自分自身が動きのあるサイトを作りたいと思ったからです。

1．jqueryについて

　jqueryは、2006年にジョン・レシグさんが開発しました。

　導入効果としては、アニメーションや特殊効果を実装することが出来るjavascriptのライブラリです。

　導入することでの特徴としては、

・マウスなどで画像の入れ替えアニメーションなどの導入

・文字入力の内容に応じて変わった返事を送れる。

・どんなブラウザでも対応可能！！

などです。

2．基本概念

　jQueryは基本的にHTML要素（DOM要素）に対してどんな処理をしたいか？を書くような特徴です。

（例）：h1要素を文字変換を行いたい

(HTML)

<h1>おはようございます。</h1>

表示：おはようございます。

(jquery)

表示:おはようございます。からこんばんはに変わります。

3．今回の実装

　今回の実装内容としては、自己紹介部分の背景の変換、眼鏡画像を消したり戻したりするアニメーション、自己紹介の所の以下からの現在の状態表示を行っていきました。

（ソースプログラム）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>自己紹介サイト</title>
    <link rel="stylesheet" href="name.css">
  </head>
  <body>
   
    <header>
     <ul id="menu">
       <li><a href="name.html">Home</a></li>
       <li><a href="game.html">ゲームのサイト</a></li>
       <li><a href="baseball.php">自分の好きな野球ぼやき</a></li>
       <li><a href="prog.html">頑張りたいプログラミング</a></li>
     </ul>
    </header>
    <div id="kesu"> 
      <button>眼鏡を消すボタン</button>
    </div>
    <div cla="icon" id="imgs">
      <img  src="img/megane.png
      " width="120" height="120" alt="自分の眼鏡です">
   </div>
   <div class="info" id="info">
     <h1>自己紹介</h1>
     <li>氏名：ド素人太朗</li>
     <li>職業：大学生</li>
     <li>趣味：ゲーム、野球、プログラミング</li>
     <li>今後の目標：もっと自由気ままにプログラミングを出来るようにする。</li>
     <p>以下に自分の趣味について書いたところに飛べるような物があります。</p>
     <button id="ooo">以下</button>
   </div>
    <div class="game" id="game"></div>
    <!-- <p>自分の好きなゲームについてまとめた記事がコチラ</p> -->
    <form action="game.html">
      <input type="submit" value="ゲーム雑談">
    </form>
    <div class="baseball" id="baseball"></div>
    <!-- <p>自分の好きな野球チームについての記事がコチラ</p> -->
    <form action="baseball.php">
      <input type="submit" value="野球雑談">
    </form>
    <div class="prog">
    <!-- <p>・・・
    </p>   -->
    <form action="prog.html" id="id">
      <input type="submit" value="プログラムの記事">
    </form>
<a href="http://mychallengo.hatenablog.com/"><input type="submit" value="個人プログ"></a>
    </div>
    <script src= "jquery-3.4.1.min.js"></script>
    <script>$('#info').css('background-color','#fcc');</script>
    <script> $('#kesu').on('click',function(){
      $('#imgs').slideToggle(2000,function(){alert('眼鏡は消滅した。。。しかしもう一度押してみて欲しい');});
    });</script>
    <script>  $('#ooo').click(function(){
        $('#ooo').html('最近春休みだがコロナのせいで何も出来ないことで怠け者化してきた生徒作成者');
    });
    </script>
  
  </body>

</html>