====== jQueryとは ======

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です。

<box|jQeury公式サイト>
{{:dombook:jquerycom.png?300|:dombook:jquerycom.png}}

http://jquery.com/
</box>

===== 使い方 =====

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

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

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

====== jQueryの基本的な書き方 ======

===== ドキュメントが読み込まれた際に実行 =====

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

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

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

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

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

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

<code javascript>
 $(function(){
   //初期DOM操作など
 });
</code>

===== クリックした時にコードを実行 =====

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

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

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

===== 要素にクラスを追加・削除する =====

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

<code javascript>
 //a要素のクラス属性にnewClassを追加
 $("a").addClass("newClass");

 //a要素のクラス属性からoldClassを削除
 $("a").removeClass("oldClass");
</code>

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

====== jQueryでの要素の取得 ======

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

===== CSSを記述する際よく使われるセレクタ表記 =====

|$('a')         |a要素                           |
|$('p a')       |p要素の子孫であるa要素          |
|$('p.myClass') |class属性にmyClassが指定されたp要素|
|$('p#myId')    |id属性にmyIdが指定されたp要素   |

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

===== CSS2のセレクタのうちそのまま使える表記 =====

|$('p > a')        |p要素の子供であるa要素         |
|$('p + ul')       |p要素の直後に後続するul要素    |
|$('p:first-child')|先頭の子供であるp要素          |
|$('p:lang(ja)')   |内容が日本語で書かれているp要素|

===== CSS3のセレクタのうちそのまま使える表記 =====

|$('html:root')            |文書のルートであるhtml要素|
|$('p:nth-child(3)')       |子供のうち3番目のp要素|
|$('p:nth-last-child(3)')  |子供のうち最後から数えて3番目のp要素|
|$('p:nth-of-type(3)')     |兄弟のp要素のうち3番目のp要素|
|$('p:nth-last-of-type(3)')|兄弟のp要素のうち最後から数えて3番目のp要素|
|$('p:last-child')         |最後の子供であるp要素|
|$('p:first-of-type')      |兄弟要素のp要素のうち最初のp要素|
|$('p:last-of-type')       |兄弟要素のp要素のうち最後のp要素|
|$('p:only-child')         |兄弟要素のいない単独のp要素|
|$('p:only-of-type')       |兄弟要素のp要素がないp要素|
|$('p:empty')              |空のp要素    |
|$('input:enabled')        |有効にされているユーザインタフェース要素|
|$('input:disabled')       |無効にされているユーザインタフェース要素|
|$('input:checked')        |チェックされているユーザインタフェース要素（チェックボタンやラジオボタン）|
|$('p:not(#header p)')     |#header p以外のp要素|
|$('ul ~ p')               |ulの後に出現するp要素|

===== 属性セレクタを使った表記 =====

|$('p[@title]')                           |title属性を持つp要素|
|$('input[@type="text"]')                 |type属性がtextであるinput要素|
|$('p[@class~="myClass"]')                |class属性のスペースで区切られた内容の中でmyClassを含むp要素|
|<nowiki>$('a[@href^="http://"]')</nowiki>|<nowiki>href属性がhttp://で始まるa要素</nowiki>|
|$('a[@href$=".php"]                      |href属性が.phpで終わるa要素|
|$('a[@href*="company/"]')                |href属性の中にcompany/という文字列を含むa要素|
|$('link[@hreflang｜="en"]')              |hreflang属性がenから始まりenのみ、または次に続く文字が-であるlink要素 |

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

|$('p[a]')  |a要素を含むp要素|

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

===== 独自の擬似クラス =====

|$('li:even')        |li要素のうち偶数個目の要素（0からカウントすることに注意）
|$('li:odd')         |li要素のうち奇数個目の要素（0からカウントすることに注意）
|$('li:nth(3)        |li要素のうち4番目の要素（0からカウントすることに注意）
|$('li:eq(3)         |li要素のうち4番目の要素（0からカウントすることに注意）
|$('li:gt(3)         |li要素のうち4番目以降の要素
|$('li:lt(3)         |li要素のうち4番目以前の要素
|$('li:first')       |li要素のうち最初の要素
|$('li:last')        |li要素のうち最後の要素
|$('li:parent')      |子要素（テキストを含む）を持っているli要素
|$('p:contain("text")')|指定されたテキストを含むp要素
|$('p:visible')      |スタイルのdisplayプロパティがblockまたはinlineのp要素
|$('p:hidden')       |スタイルのdisplayプロパティがnoneのp要素

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

<code javascript>
 element = document.getElementById('myId');
 $(element).addClass('newClass');
</code>

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

<code javascript>
 $('#myId').addClass('newClass');
</code>

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

====== jQueryでのイベント設定 ======

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

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

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

イベント名には次のようなものがあります。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を使います。

<code javascript>
 $('a').unclick();
</code>

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

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

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

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

===== 一度だけ実行されるイベント =====

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

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

===== hover =====

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

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

<code javascript>
 $("p").hover(function(){
   this.$old = this.innerHTML;
   $(this).html("Welcome!");
 },function(){
   $(this).html(this.$old);
 });
</code>

===== イベント設定function内でのthis =====

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

<code javascript>
 $('p').click(function(){
   alert(this.innerHTML);
 }
</code>

====== 各要素を操作する ======

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

===== 属性を追加する =====

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

<code javascript>
 $("p").set("title","test");
</code>

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

<code javascript>
 $("p").set({name:"test",title:"Welcome!"});
</code>

===== 中のHTMLを操作する =====

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

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

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

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

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

<code html>
 <p>元の段落</p>
</code>

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

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

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

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

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

===== 要素を削除する =====

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

<code javascript>
 $('p').remove();
</code>

===== スタイルを適用する =====

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

<code javascript>
 $("p:even").addClass("even");
</code>
クラスを削除する命令も用意されています。

<code javascript>
 $("p").removeClass("even");
</code>

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

<code javascript>
 $("p").css("font","14px Arial");
</code>

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

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

===== 表示、非表示を切り替える =====

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

<code javascript>
 $("p").hide();
</code>

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

<code javascript>
 $("p").show();
</code>

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

<code javascript>
 $("p").toggle();
</code>

====== 取得した要素に関する情報と繰り返し処理 ======

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

<code javascript>
 alert($("p").size());
</code>

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

<code javascript>
 alert($("p").get());
</code>

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

<code javascript>
 alert($("p").get(0));
</code>

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

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

 0番目の[object HTMLParagraphElement]です。

====== jQueryでのアニメーションエフェクト ======

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

<code javascript>
 $('p').show('slow');
</code>

  スクリーンショット入る

<code javascript>
 $('p').hide('fast');
</code>

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

<code javascript>
  $('p').slideUp('fast');

  $('p').slideDown('slow');
</code>

  スクリーンショット入る

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

<code javascript>
 $("p").fadeIn("slow");

 $("p").fadeOut("slow");
</code>

====== Ajax ======

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

===== htmlを取得し、差し替える =====

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

<code javascript>
$("p").load("test.html");
</code>

  test.htmlのソース

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

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

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

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

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

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

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

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

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

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

===== xmlを取得する =====

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

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

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

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

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

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

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

====== プラグインによる拡張 ======

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

===== 入手方法 =====

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

  * http://jquery.com/plugins/

===== プラグインのインストール =====

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

<code html>
<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" />
</code>