ニュータイプなjQueryその2-jQuery導入方法
2007年12月23日 プログラミングTIPS
前回、「ニュータイプなJSライブラリjQueryを使ってみよう!」でAjaxライブラリについてとjQueryについての解説をしました。
今回は、「ニュータイプなjQueryその2」として、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行で読み込みます。
srcにjquery.jsのパスを指定して読み込めば、jQueryを利用する準備は完了です。<script type="text/javascript" src="jquery.js"></script>
外部に公開する場合は、jquery.jsをアップロードするのを忘れないようにしてください。
続き
次回からは、HTML要素アクセス、CSS操作、Ajax、イベント、jQueryエフェクトなどの解説をする予定です。追記:ニュータイプなjQueryその3-HTML要素アクセス