TetsuakiBaba

workshop/website/jQuery

jQuery入門

HTMLの紹介ページで簡単なhtml,css,それらを手早く構築するサービスやライブラリ等を紹介しました.このページでは,動的なサイト作成に欠かせないjQueryに関して紹介します.jQueryはあくまでJavascriptのライブラリになります.ですので記述方法はJavascriptをベースに,一部jQuery風な記述をすることで,Javascriptだけでは大変な機能をお手軽に実装することができます.このページはhttps://learn.jquery.com/about-jquery/をベースにお話を進めていきます.

動かしてみる

ではまず下のコードを動かしてみます.test.htmlとして,下記コードを貼り付けてブラウザで開いてみましょう.

最初のコード

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>

    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "Hello jQuery" );
            //$( this ).hide( "slow" );
            //event.preventDefault();
        });
    });

    </script>
</body>
</html>

CSSのスタイル操作

jQueryを利用するとCSSのスタイルを動的に変更できます.次の例はaのタグに対し,事前に指定したスタイルの適用の変更を行っています.また,この例ではconsole.logという関数を利用しています.これはJavascriptによる開発をする場合,便利な機能で,ブラウザ上にはなにも表示されませんが,エラーコンソールに文字列を出力するこtができます.Processing等におけるprint関数のようなものです.

スタイルの追加と削除

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
a.test {
    font-weight: bold;
}
</style>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>

      $( document ).ready(function() {
      $( "a" ).on({
      mouseenter: function() {
        $( "a" ).addClass( "test" );
          console.log( "hovered over a" );
      },
      mouseleave: function() {
        $( "a" ).removeClass( "test" );
          console.log( "mouse left a" );
      },
      click: function() {
          console.log( "clicked on a" );
      }
      });
    });

    </script>
</body>
</html>

クリックで任意の要素の可視を変更する

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
a.test {
    font-weight: bold;
}
</style>
</head>
<body>
    <p>Click me</p>
    <a href="http://jquery.com/">jQuery</a>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>

    $( document ).ready(function() {
      $( "p" ).on({
      click: function() {
          console.log( "clicked on a" );
          $( "a" ).toggle( "slow" );
          //$( "a" ).slideToggle( "slow" );
          //$( "a" ).fadeToggle( 5000 );
      }
      });
    });

    </script>
</body>
</html>

これまでのコードを参考にして,Click meのテキストをクリックすると,画像表示の切り替えが行われるコードを記述してください.ただし画像はどのようなものでも構いません.

animate()を利用する

これまではtoggle, slideToggle等の関数で自動的に要素をアニメーション出来ましたが,animate()を利用することで,アニメーションをカスタマイズできます.

練習で作成したコードに対して下記を適用することで,クリックすることで画像が右方向に動いていきます

$( "img" ).animate(
            {
              marginLeft:500,
              opacity: 0.0
            }, 3000
          );

マウスを置くと拡大されるイメージ

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
body{ 
    text-align: center;
}
</style>
</head>
<body>
    <img src="./test.jpg">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>


    $( document ).ready(function() {
    $( "img" ).on({
    mouseenter: function() {
          $( "img" ).animate({width:200,opacity: 1.0}, 100,);
    },
    mouseleave: function() {
          $( "img" ).animate({width:100,opacity: 1.0}, 100,);
    },
    click: function() {
        console.log( "clicked on a" );
    }
    });
  });


    </script>
</body>
</html>