jQueryのインストール
jQuery JavaScriptライブラリは、Minified版(変数や関数の名前のサイズが縮小されている縮小版)、圧縮版、または非圧縮版のJavaScriptファイルでダウンロードできます。最新バージョンをダウンロードし、それを次のようにしてWebページにインストールします。
<script type="text/javascript" src="jquery1.2.6.js"/>
jQueryでのプログラミング
jQuery APIの中心は、「jQuery」というオブジェクトラッパーです。jQueryの関数、エフェクト、HTMLとCSSコンテンツの処理はすべて、このオブジェクトを通じて行われます。ただし、共通の「$」ショートカットを使用してjQuery関数を呼び出すことが求められます。たとえば「banner」というIDを持つdivの背景色を取得する場合、jQueryオブジェクトを使って次のように記述する代わりに、
jQuery.("#banner").css("background-color");
「$」ショートカットを使って次のように記述することになります。
$("#banner").css("background-color");
ドキュメントとDOM表現の読み込み
jQueryは、他の多くのAJAXライブラリと同様、ページのドキュメントオブジェクトモデル(DOM)表現で動作します。その機能とエフェクトの大部分を実行するには、ページの解析されたDOMツリーが必要です。しかし、ページのDOMモデルは、ブラウザがページを解析するまで有効ではありません。
一般的な解決策として、ページを読み込むときに有効であることが求められるjQuery関数をwindow.onload
イベントに添付する方法があります。この方法の欠点は、イメージや他の外部リソースを含めて、ページが完全に読み込まれるまでエンドユーザーが待たなければ、AJAXエフェクトが有効にならないことです。また、「Unobtrusive JavaScript(控えめなJavaScript)」という考え方に本当に準拠するには、JavaScriptに依存するマークアップをXHTMLコンテンツに含めてはなりません。
したがって、すべてのカスタムJavaScriptコードは外部ファイルに保持する必要があります。Webページのヘッダー(<head>セクション)は、通常、jQueryライブラリへのリンクと、jQueryを利用する1つ以上のカスタムJavaScriptファイルへのリンクを持ちます。
読み込み時にページに添付するjQueryのイベントや関数がある場合、通常は、jQueryを通じてdocument
(ページを表すDOMオブジェクト)でready
呼び出しを行い、他の関数呼び出しを行う(または他の関数呼び出しが埋め込まれている)カスタムの匿名関数を渡します。
$(document).ready( function() { ... your function calls here ... } )
CSSおよびDOM操作
jQueryはHTMLコンテンツのDOM表現の操作とCSSプロパティを徹底的にサポートしており、非常に簡単、簡潔にプログラムできます。実際、jQueryは属性ベースのセレクタなどもサポートしており、たいていのブラウザのCSSサポートよりも充実しています。一部ブラウザのサポートを超える部分もありますが、そのようなブラウザでもjQueryは正しく動作しますし、標準準拠の形式でCSS要素にアクセスするぶんには問題ありません。
jQueryにおけるDOMとCSSの基本的なサポートの統合の例を以下に示します。
ID=sampleの要素にパラグラフを追加する
$("#sample").append("<p>Some paragraph.</p>");
divを非表示にする
$("div#someSection").hide();
最初のパラグラフにクラスを追加する
$("p:first").addClass("highlighted");
パラグラフにテキストを追加する
$("p").html( "Some text");
すべての表の奇数行に交互に色を付ける(別名"ゼブラ"カラー)
$('tr:odd').addClass('odd');
ご覧のように、XHTML要素とCSS要素は、よくご存じのCSSとXHTMLの構文を使用して参照されています。フレームワーク固有の知識は不要です。また、コンテンツの非表示、削除、追加、変更を含めて、jQueryを通じて参照されるHTML/CSS要素を、同じように単純で直観的な方法で完全に操作できます。
非同期呼び出し
AJAXフレームワークであるjQueryは、サーバーサービスに対して非同期呼び出しを行う多くのメソッドをサポートしています。一般的なメソッドに加えて、AJAX呼び出しを行うPOSTとGETという2つの一般的なHTTPメソッドもサポートしています。
次の例は、サーバー側リソースへのGET呼び出しを単純なjQueryスタイルで記述したものです。
$.get("sample.asp", { itemId: "123" }, someCallbackFunction );
パラメータが3つあることに注目してください。URL、パラメータ、そしてAJAX呼び出しの結果を文字列として処理するsomeCallbackFunction()
関数へのコールバックです。
jQueryは、getJSON
という別のスタイルのGETメソッドもサポートしています。サーバーに対してGET呼び出しを行う場合、getJSON()
はサーバーからの文字列応答をJSON(JavaScript Object Notation)オブジェクトとして解釈し、結果をJSONオブジェクトとしてコールバック関数に渡します。これらの処理はすべて透過的に行われます。
$.getJSON("sampleJSON.asp", { itemId: "123" }, someCallbackJSONFunction );
POST呼び出しの構文もほとんど同じです。違うのは関数名だけで、パラメータは同じです。
$.post("samplePostingResource.asp", { itemId: "123" }, somePostProcessingCallbackFunction );
さらにjQueryには、サーバー側リソースを呼び出す汎用のload()
関数が用意されています。構文は同じですが、柔軟性はこちらの方が優れています。また、詳細なAJAX処理を行うことができる特殊な関数も多数取り揃えられています(ajaxStart()
、ajaxSend()
、ajaxSuccess()
など)。