ダウンロードしたjQueryファイルを使う

広告

まず最初にダウンロードしたjQueryファイルを読み込む方法です。

インストールのページで記載した通りjQueryファイルは「jquery-1.5.1.min.js」と「jquery-1.5.1.js」の2種類がありますが、読み込む場合にはファイルサイズが小さい「jquery-1.5.1.min.js」を使用します。まずはこの「jquery-1.5.1.min.js」をインターネットからアクセス可能な場所にアップロードして下さい。

次にjQueryを使用するWebページでjQueryファイルを読み込むように記述します。例えばWebページとライブラリファイルが同じディレクトリ内に設置した場合であれば次のように記述します。 

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

※JavaScriptを記述した外部ファイルを読み込む詳細については「外部ファイルにスクリプトを記述」を参照して下さい。

これでWebページからjQueryで用意された機能を使うことができます。

サンプル

では簡単なサンプルを作成して試して見ます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryテスト</title>

<script type="text/javascript" src="../file/jquery-1.5.1.min.js"></script>
<script type="text/javascript">

$(function() {
  $("p").click(function(){
    alert("Hello!");
  });
});

</script>

</head>
<body>
  <p>Hello!</p>
</body>
</html>

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

「Hello!」と書かれた部分をクリックすると次のようにダイアログが表示されます。

p1-2

以上です。

( Written by Tatsuo Ikura )