jQueryを使ってみよう
prototype.jsを筆頭に沢山のAjaxフレームワークが開発されてきました。
これらのフレームワークは開発コストが大幅に削減されますので非常に助かります。
今日、紹介するjQueryはデザイナーさんに人気があるようなので、プログラマーの私は全く手を付けてませんでした。しかし、あるきっかけ（仕事です、、、）で使うことになり勉強してみたのですが、あまりの便利さにどっぷりハマっちゃいました＾＾；
「なるほど、デザイナーさんに支持されるわけだ、、、」
ということで、今日はjQueryの基本を紹介します。
今回の筆記で以下のサイトを参考にさせて頂きました。
・Ajaxの最新レポートBlog
まずは、下記のサイトからjQueryをダウンロードしてください。
・jQuery本家（英語）
*「Download jQuery」リンクをクリックするとダウンロードできます。
ダウンロードしたjQueryファイルを適当なディレクトリに入れます。
今回の説明ように[home]ディレクトリに[js]ディレクトリを作成してその中にjQueryを入れます。
更に[home]ディレクトリ直下に[index.html]を作ります。
最終的に以下のような構成になると思います。
[home]
└─ index.html
│
└─[ js]
└─ jquery.js
早速、jQueryを使ってみましょう。
[index.html]をテキストエディタで開いて、HTMLを適当に書いて行きます。
headタグ内にjquery.jsを読み込ませます。
<script src="./js/jquery.js" type="text/javascript"></script>
次にbodyタグ内にbuttonと空っぽのpタグを記述します。pタグにはid属性「message」を付けます。
<input type="button" value="jQueryテスト">
<p id="message"></p>
buttonタグを以下のように変更します。
<input type="button" value="jQueryテスト" onClick="$('#message').html('メッセージ');">
index.htmlをプレビューして、設置したボタンをクリックするとpタグの中に「メッセージ」というテキストが入ると思います。
jQueryでは、「$」を頭に付けて様々な処理を行います。
$後ろを()で囲んで、その中にid名やname・classの名前を入れます。
上記の例では、$('#message')はpタグのid="message"が対象になります。
class="message"であれば、
$('.message')
と記述します。
つまり、CSSと同じ記述方法でjavascriptを操作できるのです。
上記の例では、もちろん
$('p#message').html('メッセージ')
でも可能です。
.html()は、指定のタグ内のテキストを変更します。
$('#message').html('メッセージ')
上記の例では、「id="message"」のタグに「メッセージ」というテキストを書換なさいという意味になります。
次にAjaxを使ってみましょう。
[home]ディレクトリ内に「message.txt」を準備して、「初めてのjQuery!」等自由に入れてください。
index.html内に以下のスクリプトを記述します。
<input type="button" value="jQueryのAjax" onClick="$('#message').load('message.txt');">
message.txt内に書かれたテキストがpタグ内に表示されると思います。
.load()は指定URLからテキストを取り出して、指定のタグ内のテキストを書換ます。
今度はCSSを変更してみましょう。
$('#message').css('font-size', '20px')このように第一引数にプロパティ、第二引数に値をセットするとCSSを変更できます。
更に、
$('body').css('background-color', '#CCCC33')
とすることで、bodyタグの背景色も変更することができます。
最後にAjaxで外部ファイルから取り出したテキストをHTMLにセットするのではなくて、PHPやCGIに値（postやget）を渡したり、javascriptの変数に格納して自由に扱う方法を紹介します。
index.html内のheadタグ内に以下のスクリプトを記述します。
<script type="text/javascript">
<!--
function jQueryAjax() {
$.get('ajax_get.php', {message: '初めてのjQuery1', id: '104'}, jQueryRequest);
$.post('ajax_post.php', {message: '初めてのjQuery2', id: '113'}, jQueryRequest);
}function jQueryRequest(message, status) {
alert(message + "\n" + "status:" + status);
}//-->
</script>
4行目の
$.get('ajax_get.php', {message: '初めてのjQuery1', id: '104'}, jQueryRequest);
$.get()でフォームのGETを使えます。
第一引数に「URL」を指定して、
第二引数に「値」を指定
第三引数にはコールバックを指定します。
上記の例では、message「初めてのjQuery1」・id「104」という値を「ajax_get.php」にGETで渡しています。
「ajax_get.php」ファイルは、$_GET['message']と$_GET['id']でそれぞれの値を受け取れます。
コールバックは、URLを読み込んだ後に処理を行う関数名を指定します。
$.post('ajax_post.php', {message: '初めてのjQuery2', id: '113'}, jQueryRequest);$.get()を$.post()に変えただけで、引数の意味は同じです。
function jQueryRequest(message, status) {これはコールバック（URLを読み込んだ後の処理）です。
alert(message + "\n" + "status:" + status);
}
第一引数にはURLで取得したテキストが入ります。
第二引数にはURLのステータスが入ります。
ステータスには「success」か「error」のどちらか入ります。
success：正常に処理された
error：処理中にエラーが発生した
指定したURLが存在しなかった場合などは、「error」が表示されます。
次にbodyタグ内に
<input type="button" value="messageをalertで出力" onClick="jQueryAjax();">
と記述します。
ボタンをクリックすると、GETから取得したテキストとPOSTから取得したテキストがalert()で表示されると思います。
ここで紹介したのはjQueryのほんの一部で、もっと沢山の機能があります。
また、勉強したら他の機能も紹介しようと思います。
・関連記事
prototype.jsの使い方
Yahoo! UIライブラリを使ってみよう
HTML_AJAXを使ってみよう