jQuery Guid

jQuery(ジェイクエリー)は、JavaScript コードをより容易に記述するために設計された JavaScript ライブラリです。
外部ファイル(jquery.js)を組み込んでライブラリとして活用します。
外部ファイルの組み込みは File Input や Class File を参照して下さい。

次のリンクをクリックすると JQuery.html が呼び出されます。
「書き替え」ボタンをクリックすると「テキスト表示」が変わります。
JQuery サンプル

プログラムの説明

  1. jQuery のページから jquery.js をダウンロードして下さい。
    2015/09/07 私は uncompressed, development jQuery 1.11.3 をダウンロードしました。
    compressed の方がサイズが小さいのですが、勉強するときは uncompressed の方が良いでしょう。
    ホームページは utf-8 を使っているので、jQuery 関係のファイルも utf-8 に統一することにします。
  2. js ファイルを格納するサブフォルダー(js)を javascript のフォルダーに作成します。
    javascript\js に jquery-1.11.3.js を jquery.js に変更して格納します。
  3. jquery.js を利用する JQuery.html のソースコードです。
    javascript\ のフォルダーに utf-8 で格納して下さい。
    src="js/jquery.js" で jquery.js が組み込まれています。
    changeText() 関数を呼び出して id="about" のタグを書き変えます。
    <!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 Sample</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  <!--
  function changeText()
  {  $("#about").html("<b>軽量/高速</b>なライブラリです");
  }
  // -->
  </script>
</head>
<body>
  <h1>jQuery サンプル</h1>
  <p id="about">jQueryとは？</p>
  <form>
    <input type="button" value="書き替え" onClick="changeText()">
  </form>
</body>
</html>
  4. changeText() 関数の .html を .text に書き変えると HTMLタグも、ただの文字列として表示されます。
      function changeText()
  {   $("#about").text("<b>軽量/高速</b>なライブラリです");
  }
  5. JQuery を使わない方法 Text chenge と比べてみて下さい。
    $("#about").html("<b>軽量/高速</b>なライブラリです");

document.getElementById("str").innerHTML="<h1>タグ</h1>が有効の書換え";
    $() は単純な HTMLエレメント(タグ)へのアクセス用として使われています。
    要するに document.getElementById() のショートカットと考えると解り易いでしょうか。
    $("#about") を jQuery("#about") と書いても同じことです。
    今回は JQuery を使っても簡単になったとは思えないようです。 (^_^;)
    JQuery になれると本来の書き方を忘れてしまいそうになるので要注意です。

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