ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > ニュータイプなjQueryその2-jQuery導入方法

ニュータイプなjQueryその2-jQuery導入方法

このエントリーをはてなブックマークに追加
2007年12月23日 カテゴリ:プログラミングTIPS
前回、「ニュータイプなJSライブラリjQueryを使ってみよう!」でAjaxライブラリについてとjQueryについての解説をしました。
今回は、「ニュータイプなjQueryその2」として、jQueryの導入方法を解説します。

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を組み込む方法とその効果については、当ブログの などをご覧ください。

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要素アクセス