ZAPAブログ2.0

jQueryの導入方法

jQueryを導入するのは、とても簡単です。
以下の3ステップでjQueryが利用できるようになります。

• 1. jQuery公式サイトにアクセス
• 2. jQuery最新版のMinified and Gzippedバージョンをダウンロード
• 3. HTMLからダウンロードしたjsファイルを読み込む

jQuery公式サイトにアクセスし、トップページの「Download jQuery」のところから最新版jQueryをダウンロードします。
基本的には、Uncompressedバージョンを最適化したMinifiedバージョンを利用します。

jQuery公式サイトから 最新版のMinified and Gzippedをダウンロード

jQueryの種類の違い

jQueryにはいくつかの種類が存在します。

・Uncompressedバージョンは、素のjQueryファイルで、jQueryの中身を理解したい場合に利用します。
・Packedバージョンは、サイズが小さいものの実行速度が遅くなってしまうため、利用しないようにします。
・Minifiedバージョンは、約45KBでprototype.jsの約128KBと比べると、とても軽量なことがわかります。
基本的には、このMinifiedバージョンを利用します。

gzip圧縮について

サーバーがgzip圧縮に対応していれば、jQueryのMinifiedバージョンが、なんと14KBで通信が可能になります。
サーバーでgzip圧縮を利用する方法としては、Apacheでmod_deflateを組み込む方法などがあります。
mod_deflateを組み込む方法とその効果については、当ブログの

• ファイルを圧縮するmod_deflateの効果

などをご覧ください。

HTMLからjQueryの読み込み

jQueryをダウンロードしたら、HTMLからjsファイルを読み込みます。
jsファイルは、jquery-1.2.1.min.jsなどとされているので、そのまま読み込むか、jquery.jsなどにリネームして読み込みます。
読み込む方法は通常のjsファイルと同様に、次の1行で読み込みます。

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

srcにjquery.jsのパスを指定して読み込めば、jQueryを利用する準備は完了です。
外部に公開する場合は、jquery.jsをアップロードするのを忘れないようにしてください。

続き

次回からは、HTML要素アクセス、CSS操作、Ajax、イベント、jQueryエフェクトなどの解説をする予定です。


追記：ニュータイプなjQueryその3-HTML要素アクセス