jQueryを使い始めるには
jQueryのダウンロード
まずは、何はともあれjQuery本体を入手する必要があります。jQueryの本家サイトのダウンロードページから、最新版("Current Release"とあるもの)のライブラリを手に入れて下さい。 次の3種類のリンクがあるかと思いますが、用途に応じて好きなものを取得しましょう。
- Minified:
改行コードやインデントを除去して、ファイルサイズを小さくしたものです。
ダウンロードサイズと実行速度のバランスから、通常リリースされるサービスで使うには最も適したものになるでしょう。 - Packed:
最小化したコードにPack処理を施したものです。
ファイルサイズを極端に小さくしたためサーバの負荷は最も軽減されますが、クライアント側で実行できる形式に戻すための処理が発生しますので、トータルではやや遅くなります。
サーバの負荷軽減を第一にしたい場合に適しています。 - Uncompressed:
整形された、最も人間が読み易い形のコードです。
当然ながら、ファイルサイズは最も大きくなります。
jQueryの中身の処理を読み解きたい場合などは、これを用いるのが良いでしょう。
基本HTMLの作成
基本的には、jQueryのコードはDocumentがReady状態になったタイミングで実行させます。通常よく使われるbodyのonloadなどでは、ページ上の画像などもロードされ、レンダリングもされた状態で動作し始めるために、ユーザのオペレーションが開始されてしまう可能性があります。
逆にheadやbodyの中でパース時に実行させてしまっては、DOMが利用可能な状態になっていない場合があるため、思わぬ不具合を発生させる要因になります。
DocumentのReady状態での処理は、次のような構文で記述します。
$(document).ready(function(){
// ここに処理を記述します
});
トータルでは、次のような雛形を用いると良いでしょう。
<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
// ここに処理を記述します。
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
scriptタグのsrcは、先ほどダウンロードしたjquery.jsを参照できるように書き換えましょう。DOCTYPEの宣言などは、自由に行って下さい。