2006年初頭にJohn Resigが生み出したjQuery(サイト・英語)には、JavaScriptでの開発を簡素化する次のような主な特長がある。
- jQueryセレクターを使い、選択したエレメントをイベントに結びつける、容易なHTML DOMトラバーサル
- 特殊な視覚効果を作るためのAPI
- 簡素化したAJAX開発のためのAPI
JQueryセレクター
jQueryの基本前提はjQueryセレクターである。これはHTML DOMからエレメントを選択し、それらのエレメントで作業をするために使うことができる。例えば次のjQueryコードの抜粋は、ページ上のリンクがクリックされたら常に警告メッセージを示すようになっている。
$("a").click(function() { alert("You are leaving this page!");});
$("a")がjQueryセレクターである。この場合、すべてのアンカーエレメントを選択する。$自体はjQueryの「クラス」のエイリアスであり、したがって$()は新しいjQueryオブジェクトを構成する。click()という関数は、jQueryオブジェクトのメソッドであり、クリックイベントを選択したすべてのエレメント(この場合は単独のアンカーエレメント)に結び付け、イベントが生じたら提供された関数を実行する。
もちろん、特定のリンクに関してのみ警告を示したい場合は、フィルターをかけることができる。
従来のJavaScriptであれば、次のような形で上記と同じ内容を実現する。
<a href="http://www.infoq.com" onclick="alert('You are leaving this page!')">infoQ</a>
jQueryの場合、1つ1つのエレメントに対してonclickを書く必要がない。構造(HTML)とふるまい(JavaScript)をきれいに分けることができるのである。
特殊効果
jQueryにおける特殊効果の別の一例をこちらに示す。次のコード抜粋は、"surprise"のクラスを持つパラグラフをすべて探し、"shock"をそれに追加し、ゆっくりとそれを示す。
$("p.surprise").addClass("shock").show("slow");
Ajax開発
Ajaxは、かなりの量のHTMLをページのある領域にロードするときに使うのが一般的である。jQueryでは、ただ必要なエレメントを選択し、load()関数を使うだけである。一部の統計データを更新する例をこちらに示す。
$('#stats').load('stats.html');
最近リリースされた最新バージョンのjQuery 1.1.3(source)は、1.1.2と比べてDOMトラバーサルが8倍以上速くなっている。その他の主要な機能強化(source)として、イベントシステムが書き直され、キーボードイベントの扱いがより巧みになり、特殊効果のシステムが書き直された。
原文はこちらです:http://www.infoq.com/news/2007/07/jquery
(原文は2007年7月11日にリリースされました)