ここでは、jQuery初心者の方へ向けに、jQueryの基本的な使い方、使うメリットなどをまとめていきます。jQueryは簡単なコードで、サイトに大きな効果をつけることが可能ですので、デザイナーさんやコーダーの方も是非、試してみてください☆
この記事は体系的にまとめているので、随時、追加・修正していきます。
目次
jQueryを使う準備
jQueryのソースコードのダウンロード
上記のサイトでjQuery本体を入手します。
サイトの右側の「PRODUCTION (31KB, Minified and Gzipped)」にチェックが入っている状態でダウンロードします。
Minifiedというのは、実行動作が軽くなるように最適化されたファイルです。
日本語リファレンス
分からない事や、各種セレクタ、イベントなどは上記の日本語リファレンスが参考になります。
jQueryの基本的な使い方
1. ダウンロードしたjQuery本体をサーバにアップします。
一般的には、htmlのhead内で、アップしたjQueryを読み込みます。
ただし、script要素はページのどこに記述してもOKです。htmlやcssを先に読ませて表示させ、bodyタグの手前でscriptを読ませるという方法もあります。私はこれがオススメです。
<script src="jquery-1.6.1.min.js?ver=20101129" type="text/javascript"><!--mce:0--></script>
2. 実行したいjQueryが書かれたjsファイルを上記と同じくheadで読み込むか、htmlソースに直接記述します。
3. 実行したいjQueryが対象とするhtml要素をhtmlソースに配置します。実行したいscriptは、htmlソースに直接書く事も、外部から読ませることも可能です。script要素は、タグ内にsrcがある場合は、指定された外部ファイルを参照し、srcがなければ、scriptタグの中のコードを読みます。
多くのブラウザはjavascriptファイルの内容をキャッシュするので、外部ファイルにしておくと、二回目以降の表示を高速化出来ます。後々、他のサイトで、同じファイルを使い回す事も考えると外部ファイルでの使用がオススメです。
簡単な流れは以上で、完了です。これだけで動作します。
jQueryを使うメリット
- ライブラリに魅力がある上に、人気が高くユーザーがダントツで多いので、情報（ネット、本など）も比較的多い。
- 多くの利用者がいるので、開発終了などで、習得した技術が無駄になるリスクが低い。
- javascriptとは違う(簡単な)記述で、javascriptを利用することが出来る。
- cssに近い記述法を採用しているので、webデザイナーやhtmlマークアップエンジニアでも習得しやすい。
- 極めて短いコードでダイナミックな表現が可能になる。
- 非常に軽いライブラリなので、ページの読み込みなどの動作にほとんど影響を与えない。
- クロスブラウザー設計なので、IE 6以上、Firefox 2.0以上、Safari 3以上、Opera 9以上、Google Chromeなど、主要なブラウザに対応している。この点では、既にjavascriptをガンガン使いこなしている方にとっても魅力的かも。
jQueryを使う際の注意点
- prototype.jsやmootoolsなんかと一緒に使う事も可能ですが、コンフリクトを避けるため、基本的には、他のライブラリと併用せず、jQueryのみで使うべき
- javascriptファイルとhtmlファイルは、同じ文字コードにすべきです。特別な理由がなければ、utf-8を選ぶべきです。