jQueryは軽量のAjaxフレームワークです。JavaScriptの標準的なコーディングとは異なりますが、非常に短いコードで大きな効果があるスクリプトを記述できるようになります。prototype.jsがRuby風に記述できるライブラリだとすればjQueryはCSS風にJavaScriptを記述できるライブラリといえるでしょう。

主な特徴としては以下のとおりです。

• CSS 1-3のセレクタやXPathでのNode取得が出来る
• jQuery自体のソースは約16KBと軽量
• Internet Explorer, Firefox, Safari, Operaに対応
• プラグインによる拡張
• MITライセンスで無料かつ自由に利用可能

jQueryの最新版は以下よりダウンロードできます。執筆時点（2007年2月）でこちらのサイトから配布されている最新バージョンは1.1.1です。

最新版を右クリックしてダウンロードし、必要に応じて名前を変え（ここではjquery.js）、使用したいサイトのディレクトリ内にコピーします。以下の要領でscriptタグで読み込めば完了です。

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

prototype.jsと同じようにjQueryの書き方を使えるようになるのは、このscript要素で読み込まれた場所以降です。読み込む前では使えませんのでスクリプトを読み込む順番には注意してください。

日本語のドキュメントではみかげさんのものが非常に充実しています。 http://www.mikage.to/jquery/

また、メソッドなどを調べる場合はVisual jQueryが便利です。 http://www.visualjquery.com/

jQueryはMITライセンスとして配布されています。著作権表示をすれば自由に利用できます。特徴は以下のとおりです。

• 原著作者の著作権表示が必要（そのまま使用すればスクリプト内に入ってます）
• 自由な改変して再配布可能
• 商用利用可能（ソースの販売も可能）
• 改変したソースを公開する義務なし

詳しくは以下のURLで確認してください。原文は英語ですがOpen Source Group Japanにより日本語参考訳が公開されています。

http://www.opensource.org/licenses/mit-license.php http://www.opensource.jp/licenses/mit-license.html

DOMを使って文書を操作するためには対象の要素が読み込まれている必要があります。そこでライブラリを使わない場合はwindowのonloadイベントを使って、ウィンドウ全体が読み込まれた時に実行されるようにスクリプトを記述していました。

 window.onload = function(){
   //初期DOM操作など
 }

ただし、このコードにはいくつかの問題があります。まず、ファイルサイズの大きな画像ファイルなどを配置していると、それが読み込みおわるまでコードは実行されません。jQueryではこれを解決する方法が用意されています。

 $(document).ready(function(){
   //初期DOM操作など
 });

このコードではdocumentが読み込まれるのを監視して、操作できるようになると引数として渡したfunctionが実行されます。

また、1.0からはショートハンドが設定されているため、$関数にそのままfunctionを渡すと$(document).ready()と同じ意味になります。

 $(function(){
   //初期DOM操作など
 });

クリックイベントに対して命令を実行するコードを見てみましょう。

 $("a").click(function(){
   alert("リンクがクリックされました");
 });

jQueryでは取得した要素に対して実行できる命令があります。これらはCSSのように複数の要素を取得した際でも同じように設定することが出来ます。 上記例ではXHTML文書中のすべてのa要素に対してクリック時にアラートボックスが表示されるようになります。

jQueryでは簡単にクラスを追加・削除することができます。次の例ではa要素にnewClassというclass属性を追加し、oldClassというclass属性を削除しています。

 //a要素のクラス属性にnewClassを追加
 $("a").addClass("newClass");
 
 //a要素のクラス属性からoldClassを削除
 $("a").removeClass("oldClass");

CSSに近く、どの要素をどうする、という記述になりますのでCSSに慣れていれば非常にわかりやすいと思います。基本的な書き方がわかったところで要素の取得から詳しく見ていきましょう。

jQueryでのノード取得は非常に強力です。$()命令に対してCSSのセレクタを文字列で渡すことで対象となるノードをすべて取得できます。prototype.jsではid名を渡していましたが、jQueryではCSSのセレクタやXPathを渡します。間違えないように注意してください。

通常のWebデザインでよく使われる上記の他にもCSS2やCSS3の高度なセレクタに対応しています。これらの高度なセレクタはブラウザのCSS実装をそのまま使っているわけではなくjQueryで実装されているものですので、たとえブラウザが対応していないセレクタ表記であっても動作します。（例：IE6での p>aなど） またほとんどのセレクタはCSSでの表記のままですが、属性セレクタに関してのみ、@を加えた表記になりますので注意してください。

@マークがつかない場合は内容にその要素を含む要素となります。

そのほかにもCSSのセレクタに加えてjQueryでは独自の擬似クラスが用意されています。

また、CSSのセレクタではなく直接取得した要素ノードを渡しても動作します。

 element = document.getElementById('myId');
 $(element).addClass('newClass');

これはCSSセレクタで以下のように書くのと同じです。

 $('#myId').addClass('newClass');

なお、XPathでの指定もできますが本書では省略します。 詳しくはhttp://jquery.com/docs/XPath/���参照してください。

JavaScriptでのDOMイベントはすべて命令として用意されています。基本的な書き方で出てきた以下の構文のように$().イベント名(実行したいfunction);と記述するとそのイベントに設定が出来ます。

$().イベント名(実行したいfunction);

 $('a').click(function(){
   alert("リンクがクリックされました");
 });

イベント名には次のようなものがあります。blur, focus, contextmenu, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mouseenter, mouseleave, mousemove, mouseover, mouseout, change, reset, select, submit, keydown, keypress, keyup, abort, error. 各イベントの詳細についてはDOMイベントの章を参照してください。 また、ノードのプロパティに代入するのとは違い、AddEventListenerと同じように同じイベント名でも複数のfunctionを設定することが出来ます。

なお、jQueryではbindという記述方法もあります。以下のようにイベント名を文字列として渡して設定します。

$().bind(イベント名, 実行したいfunction);

この方法はスクリプトで動的にイベントの種類を変更する場合に便利です。うまく使い分けてください。

設定したイベントは解除することも出来ます。解除するには「un」をつけたイベント名のfunctionを使います。

 $('a').unclick();

複数のイベントが設定されていた場合も設定されていたイベントすべてが解除されます。もし特定のイベントだけを解除するためには以下のように解除したいfunctionと同じ物を渡します。

 $('a').unclick(function(){
   alert("リンクがクリックされました");
 });

これもbindと同じようにunbindという命令でも同じことができます。

$().unbind(イベント名, 解除したいfunction);

イベントの解除に「un」をつけるのと同じように「one」をつけることで1度しか実行されないイベントを設定することができます。

 $('p').oneclick(function(){
   alert("1回目がクリックされました!");
 });

そのほかにhoverというイベント設定ができます。これはマウスが乗ったときとマウスが離れたときに実行されるfunctionを同時に設定するものです。

$().hover(マウスが乗ったときのfunction, マウスが離れたときのfunction);

 $("p").hover(function(){
   this.$old = this.innerHTML;
   $(this).html("Welcome!");
 },function(){
   $(this).html(this.$old);
 });

click()などを使いイベントを設定する際、設定している要素ノードを参照したい場合があります。 その場合はthisを使います。thisには要素ノードが設定されてますので例えば中身のHTMLをテキストで取得することも出来ます。

 $('p').click(function(){
   alert(this.innerHTML);
 }

各要素にCSSを適用したりHTMLを変更したりといった操作にはそれぞれメソッドが用意され簡単に記述できるようになっています。順番にみていきましょう。

setを使うことで属性を追加できます。以下の例ではp要素のtitle属性に”test”と設定します。

 $("p").set("title","test");

複数の値をセットする場合は{}を使ってオブジェクトで渡します。

 $("p").set({name:"test",title:"Welcome!"});

innerHTMLのように中身のHTMLを差し替えるためのhtmlという命令が用意されています。

 $("p").html("Some text <b>and bold!</b>");

また、要素の前や後にHTMLを追加する命令としてappend,prepend,before,afterの4つが用意されています。それぞれHTMLの以下の場所に追加されます。

1. -before–<p>–prepend–元のテキスト–append–</p>–after–

次の例ではこのように追加されます。

 <p>元の段落</p>

 $('p').append('<a href="#">追加リンク</a>');

 <p>元の段落<a href="#">追加リンク</a></p>

そのほかにも元の要素を囲むためのwrapという命令があります。htmlタグを渡すことで自動的にもとの要素をくるんでくれます。

 $("p").wrap("<div class='wraper'></div>");

 <div class='wraper'><p>元の段落</p></div>

removeを使えば要素を完全に削除することが出来ます。以下を実行するとページ内のp要素がすべてなくなります。見えなくなるだけでなく、DOMツリー上から削除されます。

 $('p').remove();

クラスをセットする場合はaddClassを使うと便利です。すでにセットされていた場合、元のクラスはそのまま維持してスペースで区切った状態で設定してくれます。

 $("p:even").addClass("even");

クラスを削除する命令も用意されています。

 $("p").removeClass("even");

直接スタイルを設定するcssという命令も用意されています。引数としてプロパティ名、値の順番で指定します。

 $("p").css("font","14px Arial");

複数のスタイルを設定する場合はオブジェクトで渡します。

 $('p').css({
   font:"14px Arial",
   border:"1px solid #000"
 });

スクリプトで操作頻度の高いものにdisplayプロパティの操作があります。これを簡単にするための命令が用意されています。要素を隠すにはhide()を使います。スタイルのdisplayに”none”をセットすることによって要素を隠します。

 $("p").hide();

隠されているものを表示するにはshow()を使うと簡単です。hide()とは逆にスタイルのdisplayに対して’‘を設定することでデフォルトの表示に戻す。もしCSSでblockのものをinlineにセットしていたとしてもhide()を使って隠していれば、正しくinlineに戻せます。

 $("p").show();

また、隠れているものを表示し、表示されているものを隠すのに便利なtoggle()という命令もあります。toggle()を使うと自動的に現在のdisplayを見て表示を変更できます。

 $("p").toggle();

$()を使用して取得した要素の数などの情報は簡単に取得することができます。取得した要素の数を得るにはsize()を使います。次の例ではp要素がいくつあるかを表示します。

 alert($("p").size());

要素ノードをそのものを取得したい場合はget()を使います。get()を使うと要素ノードを配列で取得することができます。

 alert($("p").get());

また、get()に引数として何番目の要素ノードかを指定するとその要素ノードを取得することができます。順番は0から始まることに注意してください。一番最初のノードは0になります。

 alert($("p").get(0));

取得した要素に対して、イベント設定などをするわけではなく、順番にスクリプトを適用したい場合があります。このような場合はeach()を利用するとよいでしょう。each()では実行したい処理を引数として渡します。渡すfunctionには引数として変数を指定しておきます。引数になる変数は通常iにしておけばよいでしょう。iには今処理している要素が何番目か、数字が入ります。次の例ではp要素の内容をすべて何番目の要素かに置き換えます。

 $("p").each(function(i){
   $(this).html(i + "番目の" + this + "です。");
 });

0番目の[object HTMLParagraphElement]です。

jQueryには表示、非表示を切り替える際に使える簡単なアニメーションエフェクトがあります。使い方はshow()やhide()の引数として速度を文字列で渡すだけです。 速度にはslowとfastのどちらかを指定します。速度を渡すとshow()ならば表示する際、hide()なら隠す際に、幅、高さ、透明度が変化してアニメーションします。

 $('p').show('slow');

スクリーンショット入る

 $('p').hide('fast');

幅は変えずに高さと透明度のみを変更する命令も用意されています。slideUp()とslideDown()です。slideDown()が出てくるアニメーション、slideUp()は隠れるアニメーションになります。

  $('p').slideUp('fast');
 
  $('p').slideDown('slow');

スクリーンショット入る

他にもサイズは変えず透明度のみのを変更してフェードイン、フェードアウトさせる命令があります。

 $("p").fadeIn("slow");
 
 $("p").fadeOut("slow");

jQueryはAjaxライブラリでもあります。用意されている命令を使うと、簡単に非同期通信を使って情報をとってくることが出来ます。まずは簡単な例から見ていきましょう。

同じサーバーにあるhtmlを取得し、現在表示されているhtmlの一部を差し替えるにはload()という命令を使います。引数にはuriを指定します。load()で引数にurlを渡した場合には要素の中身がuriのファイルで置き換わります。

$("p").load("test.html");

test.htmlのソース

実行前のソースとスクリーンショット

実行後のソースとスクリーンショット

CGIやphpなどから取得する場合には取得したいデータに応じてパラメータを渡したい場合があります。uriの後ろに?data=testなどとつけることでGETでパラメータを渡すことも出来ますが、POSTで渡す方法もサポートされています。POSTでパラメータを渡すには二つ目の引数としてオブジェクト形式で送ります。

$("p").load("test.cgi",{
   date: "2006-09-02",
   category: "test"
});

三つ目の引数としてfunctionを指定することで読み込み完了時に指定の処理をさせることができます。

load(URI,Params,読み込み完了後に実行されるfunction)

$("p").load("test.cgi",{
   date: "2006-09-02",
   category: "test"
},function(){
   $("p").show("fast");
});

パラメータが必要ない場合は2つめの引数としてfunctionを渡しても大丈夫です。

load(URI,読み込み完了後に実行されるfunction)

$("p").hide("fast");
$("p").load("/test/ajax-test.html",function(){
   $("p").show("fast");
});

外部のファイルがxmlの場合はxmlのまま取得して、読み込まれたタイミングでそのxmlを使って任意のfunctionを実行することが出来ます。

$.get(URI,読み込み完了後に実行されるfunction)

/test/ajax-test.xmlを読み込み、読み込まれたタイミングでfunctionを実行するには次のように記述します。functionの()に指定した変数に読み込まれたxmlが代入されます。$()を使ってそのxmlを指定することで簡単にxmlを処理できます。

$.get("/test/ajax-test.xml",function(xml){
  alert( $("title",xml).text() );
});

$.post(URI,パラメータ,読み込み完了後に実行されるfunction)

POSTでパラメータと共にXMLを読み込む場合は$.post()を使います。URL,パラメータ,functionの順で指定し、パラメータはオブジェクトの形式で渡します。

$.post("test.cgi",{
  name: "John",
  address: "123 Main St."
},function(xml){
  alert( $("title",xml).text() );
});

jQueryにはプラグインによる拡張機能があります。本書ではプラグインの書き方までは扱いませんが、プラグインの種類と使い方をご紹介します。

jQueryのプラグインは公式サイトで紹介されています。

• http://jquery.com/plugins/

インストールは簡単です。jQueryを読み込むときのようにscript要素を使って読み込みます。jQuery本体より後に読み込む必要があるので注意してください。また、プラグインによってはCSSを読み込む必要がある場合もあります。詳細はプラグインのページで確認してください。

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />