jQuery DIV Click

jQuery(ジェイクエリー)で <DIV>タグの Click を検出します。
jQuery は、JavaScript を簡単に記述するための JavaScript ライブラリです。
jQuery を使わない方法は DIV のクリックを検出するを参照して下さい。

次のリンクをクリックすると jqdivclick1.html が呼び出されます。
マウスでクリックすると「TEXT表示」が変わります。
jQuery DIV Click

プログラムの説明

jquery.js をダウンロードして、環境を整えて下さい。
詳細は jQuery サンプルを参照して下さい。
jQuery 関係のファイルは utf-8 に統一することにします。

jqdivclick1.html のソースコードです。
マウスでクリックすると $("div").click(function() 関数が呼び出されて文字が変わります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>jQuery Click</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  <!--
  $(function()
  { $("div").click(function()
    { $("div").text("クリックされました");
    });
  });
  // -->
  </script>
</head>
<body>
  <h1>jQuery DIV Click</h1>
  <div>ここをクリックして下さい</div>
</body>
</html>

JQuery を使わない方法 Text chenge と比べてみて下さい。
$() は HTMLエレメント(タグ)へのアクセス用として使われています。
document.getElementById() のショートカットと考えると解り易いでしょうか。

次のリンクをクリックすると jqdivclick2.html が呼び出されます。
マウスでクリックすると文字が消えます。
jQuery DIV Click

プログラムの説明

jqdivclick2.html のソースコードです。
マウスでクリックすると $("div").click(function() 関数が呼び出されて文字が消えます。
省略可能なコードを削除して、ソースコードを整理してみました。

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>jQuery Click</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  $(function()
  { $("div").click(function()
    {
      $("div").hide();
    });
  });
  </script>
</head>
<body>
  <h1>jQuery hide</h1>
  <div>クリックすると表示が消えます</div>
</body>
</html>

$("div").hide(); で DIV を見えなくしています。
次のように書いても同じことです。
jQuery("div").hide();
$("div").hide(); を次のように書き変えて下さい。
文字が徐々に薄くなってフェードアウトします。
jQuery("div").fadeToggle();
次のように書き変えるとフェードアウトの速度が 3000ミリ秒になります。
jQuery("div").fadeToggle(3000);

次のリンクをクリックすると jqdivclick3.html が呼び出されます。
クリックした文字の色が黄色に変わります。
jQuery DIV Click

プログラムの説明

jqdivclick3.html のソースコードです。
DIV タグを３個並べてみました。

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>jQuery Click</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  $(function()
  { $("div").click(function()
    { this.style.backgroundColor = "yellow";
    });
  });
  </script>
</head>
<body>
  <h1>jQuery Color</h1>
  <div>[1] ここをクリック</div>
  <div>[2] ここをクリック</div>
  <div>[3] ここをクリック</div>
</body>
</html>

JQuery を使わない方法文字サイズと文字の色と比べてみて下さい。
$() は HTMLエレメント(タグ)へのアクセス用として使われています。

jquery.js では fadeOut, fadeToggle メソッドは次のように定義されています。

  jQuery.each(
  {
    slideDown: genFx("show"),
    slideUp: genFx("hide"),
    slideToggle: genFx("toggle"),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" },
    fadeToggle: { opacity: "toggle" }
  },
  function( name, props )
  {
    jQuery.fn[ name ] = function( speed, easing, callback )
    {
        return this.animate( props, speed, easing, callback );
    };
  });

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)