さあ！jQueryを使ってみよう
Google Libraries APIより、jQueryを読み込み
まずはjQueryの読み込みから。
下記URLにてGoogleAPIより最新版のｊQueryをお借りすることが出来ます。
当然自分のサーバーに設置してあげる方が効率がいいわけですから、最終的には自分のサーバーへ置くのがいいでしょう。このコーナーのサンプルのjQueryは下記URLのものを利用しています。
http://code.google.com/intl/ja-JP/apis/libraries/devguide.html#jquery
なお、最新版以外も設置することが可能です。
view older versionsのリンクをクリックすると、バージョンが出てきますから、
https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
数字を自分の好みのバージョンに書き換えることで 古いバージョンのjQueryを読み込むことが可能です。
当然古いバージョンのjQueryでは使えないメソッドもありますから注意が必要です。(メソッドが何かは後々やっていきますね)
人気Ajaxライブラリ群を手軽に、そして無制限に貸してくれるのがGoogle AJAX Libraries API
jQuery本家からダウンロードする場合
もちろん、jQueryをダウンロードして、自分のサーバーや、ローカル環境に設置して読み込むことも出来ます。
本家サイトからjQuery本体をダウンロードする場合、必ずMinified and Gzippedをダウンロードします。これは安定かつ、改行を全て排除して圧縮済みのファイルです。反対にUncompressed Codeは改行も、コメントアウトも大量に入っており、ファイルそのものも重たいです。
自分でさらにカスタマイズして使いたいプロフェッショナル向けというところでしょうか。
jQueryの読み込みと簡単なスクリプトの実行
ではｊQueryを読み込んで、簡単なスクリプトを実行してみます。
全体の読み込みが完了してから
の中身をalertの中に呼び出します。
<script type="text/JavaScript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/JavaScript">
jQuery(document).ready(function(){
alert(jQuery('p').text());
});
</script> <p>あああああああああ</p>
jQuery(document).ready(function(){});の意味
多くのWEBデザイナーの方はjQuery(document).ready(function(){});の意味を理解されていません。他ブログの解説には『ｊQueryの書き出しの決まり文句』としている場合がありますが、それは間違いです。
『DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。』とあります。
DOMって何さ
Document Object Modelの略称のことで、HTMLやXML文書を取り扱うためのAPIのことです。
(さらに意味が分かりませんね)
下記のソースコードのあいうえおをかきくけこに変更したい、これがDOM操作です。
ほぼ全てのブラウザでデフォでDOMはあらかじめ扱えるようになってありますから、DOM操作をするにあたって特別な設定はありません。
ready()の解説に戻りますよ～
つまりですね、ready(function(){})の中に書いたものは、jQuery(document)の読み込みを待ってから、処理を実行するということです。
(HTMLやCSS、画像など、WEBページの表示に必要なものを一通り読み込んでから)
window.onloadとの決定的な違い
よく通常のJavascirptで使われる
window.onloadとは決定的な違いがあります。それは、ウィンドウ(ページが)開かれた瞬間に処理を実行されるので、もし重たい処理が実行されてしまえば、処理が完了するまで一切WEBページのHTMLや画像、CSSは読み込まれません。これはユーザビリティを考えると、とてもいいことですね。
jQuery(document).ready(function(){});を使わない方法
ready()を使わなくても、jQuery(document).ready(function(){})と全く同じことをする方法があります。(ソースコードはより短いほうがいいですものね)
それは、欲しい処理を、</body>の直前に書くということです。
HTMLやCSS,もちろんJavascriptは上から順に読まれていきます。
つまり、jQueryでの処理も一番最後に書いてあげればready()メソッドを使わないでjQuery(document).ready(function(){})と同じことが出来るわけです。
<script type="text/JavaScript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<p>あああああああああ</p>
<script type="text/JavaScript">
alert(jQuery('p').text());
</script>
redy() メソッドを使えばどこに処理を書いても、DOMの読み込み完了してから処理が実行できますし、処理を</body>の最後に書くことが出来たら、それもまた同じことです。
どちらも好きなほうを使ってください。
なお、このサイトのサンプルではredyメソッドを使う方向で対応します。
(なんかjQuery使ってる感がするから)