jQueryではじめるAjax

第2回 jQueryによるAjax実装

この記事を読むのに必要な時間:およそ 7 分

jQueryによるAjax実装

Ajaxに関する基礎的な説明を終えたところで,いよいよjQueryによるAjax実装を解説します。

jQueryってなに?

jQueryとは,John Resigによって開発された Javascriptライブラリです。WebブラウザによるJavascriptの実装の違いを吸収し,AjaxやDOMプログラミングコードを簡潔に書くことができます。

2008年1月現在の最新バージョンは,1.2.1です。バージョン1.2からJSONPがネイティブにサポートされ,ますます使い勝手が良くなりました。

参考

jQueryを使う準備

まず,jQueryを,http://jquery.com/からダウンロードします。jQueryには,Minified(縮小版)⁠Packed(圧縮版)⁠Uncompressed(非圧縮版)があります。本連載では解説のため,可読性が最も高い,非圧縮版(Uncompressed)を使います※1)⁠

※1
ライブラリの読み込みを速くするため,通常は,Minified(コメントや空白を除去したり,変数名等を短くして縮小したもの)や,Packed(Packerという圧縮ツールを使用して圧縮したもの)を使います。

あとは,ソースコードからダウンロードしたjQueryを指定するだけです。

リスト4

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        // jQueryを利用してコードを書く
    </script>
</head>
<body>

    <script type="text/javascript">
        // jQueryを利用してコードを書く
    </script>
</body>
</html>

基本的な使い方

$()でjQueryオブジェクトを生成し,jQueryのメソッドを実行するのが基本的な使い方です。$()の引数には,HTML,DOM,CSSセレクタなど,いろいろな引数を受け入れDOMを走査してくれます。プラグインを使えば,XPathセレクタを使用することもできます。

jQueryオブジェクトの生成例をいくつか挙げてみます。

<p>Hello world!</p> というDOM要素のjQueryオブジェクトを生成します。

$("<p>Hello world!</p>")

id=frmSearchで定義されるDOM要素のjQueryオブジェクトを生成します。idの値を指定してjQueryオブジェクトを生成するには,次のように「#」をつけます。

$("#frmSearch")

p要素の子要素であるstrong要素のjQueryオブジェクトを生成します。

$("p > strong")

p要素の子孫要素のうち,'jQuery' という文字列を含むstrong要素のjQueryオブジェクトを生成します。

$("p strong:contains('jQuery')")

jQueryオブジェクトを生成すれば,あとはjQueryのメソッドを実行するだけです。 たとえば,p要素の子要素であるstrong要素を非表示にするには,hide()メソッドを使用して次のように記述します。

$("p > strong").hide();

jQueryの詳細については,Documentationを参考にしてください。また,拙作サイトのjQuery - StackTraceでは,日本語での情報を提供しています。よろしければご覧ください。jQueryのより詳しい使い方は,サンプル実装の解説とともに適宜おこないます。

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。