jQuery入門（その1）

DOM操作とjQueryのコア機能

前出の例の拡張

　ここでは前出のグリッドの例を拡張して、クライアントのブラウザが何であれ、ユーザーがグリッドの行をマウスでポイントしたときにグリッドの行が強調表示されるようにします。次のコードで使用しているjQueryの.hover()イベント関数は、ユーザーが要素をポイントするたびに繰り返し実行されます。.hoverイベント関数はパラメータとしてentryとexitの両方のイベント関数ハンドラを受け取ります。

　例えば、前出のセレクタチェインを次のように変更します。

$("#gdEntries>tbody>tr")
    .not(":first,:last")
    .hover( function() {
       $(this).addClass("gridhighlight");
    }, function() {                 
       $(this).removeClass("gridhighlight");
    })
   .filter(":even")
   .addClass("gridalternate");

　この例では元の操作の順序を少し変えて、すべての行にポイント動作を適用しています。その後、リストをフィルタ処理して、1行おきのスタイルを適用できるように偶数番目の行のみが含まれるようにしています。

　.hover()関数はjQueryイベントハンドラの一例です。ただし、他の大部分のイベントハンドラと異なり、パラメータとして2つのコールバック関数を受け取ります。最初のコールバックはmouseenter操作に対応するもので、2番目のコールバックはmouseout操作に対応するものです。jQueryは.hover()を高度なやり方で処理し、マウスポインタがコンテナから出たときに実際のmouseoutイベントのみを検知します（DOMのmouseoutイベントはこれと異なり、子要素に入ったときにも発生します）。

　このページを実行すると、今度はマウスポインタが置かれた行がオレンジ色で強調されるようになります。

　次の例では、行のクリックを処理して、ダイアログをポップアップさせ、そこに3番目の列の値を表示します。これには次のような.click()ハンドラを使用しています。

$("#gdEntries>tbody>tr")
    .not(":first,:last")
    .hover( function() {
        $(this).addClass("gridhighlight");
    },function() {
        $(this).removeClass("gridhighlight");
    })
    .click( function(e) {
        alert("Amount: " +  
           $(this).find("td:nth-child(3)").text());
    })
   .filter(":even")
   .addClass("gridalternate");

　このコードはクリックハンドラをマッチセットのすべての行にフックします。図3はグリッドの見た目がどのように変化したかを示しています。なお、jQueryは常にイベントを発生させた要素のコンテキストでイベントハンドラを呼び出します。従って、thisはその行DOM要素を指します。thisをjQueryオブジェクト$(this)に変え、この単一要素にさらにフィルタ処理を行って、3番目の子セルを見つけてその内容を表示することができます。

図3　マウスによるポイントとクリックのイベント処理を追加した後のグリッド

　ただし、3番目の列の値を表示することは、それほどで有用ではありません。もっと現実的なシナリオとしては、クリックによって、選択された行に基づいて何かのAJAX要求を実行したり別のページに移動したりすることが考えられます。しかし、ASP.NET GridViewはクライアントサイドでいかなる種類のIDもコンテキストも提供しないので、コンテキストに基づいてアクションを行うのは簡単ではありません。何らかの有用なコンテキストで移動したりデータをポストしたりするには、必要なことを自分でやらなければなりません。とはいえ、jQueryを使ってドキュメントのコンテンツに簡単にアクセスできることがわかれば、GridViewコンテキストを作るのは簡単です。1つのセルの生成されたコンテンツにID値を埋め込むだけでよいのです。グリッドには既にテンプレート列があるので、それを次のように変更します。

<asp:TemplateField ItemStyle-
  CssClass="descriptionField">
  <ItemTemplate>
    <div style="display:none">
       <%# Eval("pk") %></div>
    <div id="entrytitle">
       <%# Eval("Title") %></div>
    <div id="entrydescription">
      <%# Eval("Description")) %></div>
  </ItemTemplate>
</asp:TemplateField>

　この変更によって生成された出力にPK値が埋め込まれます。こうすれば、第2列のそのPK値を取得し、最初の<div>タグを調べ、そのテキストを取得することで、.click()イベントを処理できます。

.click( function(e) {
var pk = $(this)
   .find("td:nth-child(2) div:first-child")
   .text();
   window.location=
      "someotherpage.aspx?id="+ pk;
})

　この例のように、jQueryとその柔軟なセレクタ構文を使用することでHTMLとDOMにデータを簡単に格納することができ、HTMLに状態コンテンツを直接挿入して、セレクタでそこにアクセスできます。また、GridViewのような柔軟性のないコンポーネントでさえも、より動的に拡張できます。このようなアプローチを採ると、クライアントUIと対話性の目的に対する見方がすっかり変わるかもしれません。例えば、ブラウザでコンテンツのインプレース編集を行い、そのコンテンツを後から取り出して、AJAXまたはpostbackでサーバーにポストすることができます。可能性は無限です。

新しいHTMLの作成とDOMへの埋め込み

　既存のDOMオブジェクトを操作するだけでなく、jQueryオブジェクトを作成することもできます。それには、jQueryオブジェクトにパラメータとしてHTML文字列を渡します。HTMLを作成してドキュメントに追加するのは簡単です。

$("<div></div>")
    .attr("id","_statusbar") 
    .addClass("statusbar")
    .appendTo(document.body)   

　HTMLは.appendTo()関数や.prependTo()関数を使ってドキュメントのどこにでも挿入できます。これらの関数はセレクタ要素の子アイテムを挿入します。あるいは、.append()やprepend()で、現在選択されている要素の後ろや前に挿入することもできます。

　既存のノードを簡単に.clone()することもできます。上の例でこれを試してみてください。

$("#gdEntries").clone()
   .appendTo(document.body)
   .attr("id","gdEntries2");

　これを行うと、GridView全体がページ内に複製されます。だからどうなんだと思う方もいるかもしれませんが、複製が意味を持つ状況はいろいろ考えられます。例えば、一種のテンプレートメカニズムとして使用できるでしょう。新しいコンテンツを持つ新しい行を上のテーブルに挿入するには、次のようなコードを使用します。

var row = 
   $("#gdEntries>tbody>tr:nth-child(2)").clone();
row.find("td:first-child")
   .text(new Date().formatDate("MMM dd));
row.find("td:nth-child(2)")
   .html(new Date().formatDate("hh:mm:ss"));
row.find("td:last-child")
   .text( 199.99.formatNumber("c"));
row.insertBefore(
   "#gdEntries>tbody>tr:nth-child(2)")
   .show();

　 ''著者注：''これらのフォーマット関数はヘルパー関数であり、本稿のサンプルコードにも含まれています。このアプローチの良いところは、クライアントでHTMLを作成する必要がないことです。テキストやデータと、たぶんHTML文字列ではなく少しのマークアップを挿入するだけです。HTML構造は複製されたDOM要素からもたらされるので、「空白を埋める」だけで済みます。

　コンテンツがあらかじめ存在している必要もありません。ページ上またはスクリプトブロックの内部に埋め込まれた可視でないHTML要素から「テンプレート」コンテンツをロードすることができます。

　上の例は極端に単純化されていますが、これは静的なコンテンツを挿入するだけだからです。しかし、AJAXコールバックまたはフォーム入力フィールドからコンテンツを取得し、それを複製した「テンプレート」にロードすることも簡単にできます。

　テンプレートメカニズムは強力な機能なので、次回の記事でも取り上げ、jQueryと組み合わせて使用できるテンプレートツールについて考察します（すぐにでも知りたい方は、jTemplatesまたはJohn ResigのMicro-Templateエンジンを参照してください）。

jQueryのエフェクトとUI機能

　jQueryには単純ながら非常に効果的なエフェクトメソッドがいくつか含まれています。例えば、先ほどの例でドキュメントに追加した新しい要素の見え方をもう少し凝ったものにしたければ、.show()を呼び出す代わりに、要素をフェードインさせるという方法が考えられます。これは次のような単純なコードで実現できます。

row.insertBefore(
   "#gdEntries>tbody>tr:nth-child(2)")
   .css("background", "paleyellow")
   .hide()
   .fadeIn(1000);

　.fadeIn()関数と.fadeOut()関数は、まさに名前のとおりのことを行います。これらの関数を使用すれば、ページ上の何かの変化を示す視覚的な効果を簡単に実現することができます。この他に、コンテンツを一番上または下から現在の絶対位置までスライドさせるメソッドとして.slideUp()と.slideDown()があります。また、低レベルのアニメーションとして.animate()があります。この関数を使用すると、CSSの数値プロパティを新しい値まで指定の時間だけアニメーション的に表示できます。さらに、あらゆる種類のフェードエフェクトとトランジションエフェクトを提供するアニメーションプラグインもあります。非常にわずかな手間ですごいことができますが、基本的な組み込み関数でもWebページに生気を与えるようなことがいろいろとできます。ただし、簡潔さを保つことが大切で、ページにノイズを追加することになってはいけません。