BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

jQuery:Web UIを充実させるためJavaScriptで記述する新しい方法

| 作者: Anil Bhatt フォローする 0 人のフォロワー , 翻訳者 編集部 フォローする 0 人のフォロワー 投稿日 2007年9月9日. 推定読書時間: 2 分 |

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日にリリースされました)

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション
BT