jQuery の快適な Dom操作を試してみる

使いやすいと評判のJavascriptライブラリ、jQuery を週末にちょっとさわってみた。script.aculo.usやmootools, Dojoなど、様々なライブラリを利用して、同じ機能を実装するサンプルを公開されている例を見ても、jQuery はなかなか簡潔に記述ができるようです。

Drag & Drop | Diaspar Journal

prototype.js などでもおなじみのDom操作関数は、jQuery でも当然、用意されています。jQuery では、 $("dom指定") という形でHTML内のDomを操作できるのですが、これがかなり快適に使えるように考えられている。例えば、以下のようなHTMLがあったとして、　

<div id="container">
  <ul>
  <li><input type="checkbox" class="imagechoice" id="showIMG_4259jpg" /> select</li>
  <li><input type="checkbox" class="imagechoice" id="showIMG_4260jpg" /> select</li>
  <li><input type="checkbox" class="imagechoice" id="showIMG_4262jpg" /> select</li>
  </ul>
  <textarea cols="80" rows="100" id="target"></textarea>
</div>

Domの指定の仕方は、CSSとXPathを組み合わせて指定。$("#target") で、上記の<textarea>がとれるのは普通ですが、例えば、『 input要素で、typeがcheckbox のもの。さらに class が imagechoice で、かつ チェックボックスがチェックされている 』という要素もこんな感じで簡単に抜き出せる。

var checkedboxes = $("input[@type=checkbox][@checked].imagechoice");  

DOM/Traversing/Selectors - jQuery JavaScript Library

あと、各要素のイベントにメソッドをセットするのも簡単。上記のセレクタに続けて、event の種類を指定してfunctionをbindできる。よく使う onchange などは change というメソッドが容易されています。

 $("input[@type=checkbox].imagechoice").change(function(){
   var checkedboxes = $("input[@type=checkbox][@checked].imagechoice");
   myalbum.generateHtml(this.id, checkedboxes);
 });

API/1.1.2/Events - jQuery JavaScript Library

jQueryにプラグイン形式で機能を追加したり、Lightbox のように手軽にモーダルエフェクトを追加できる、ThickBoxなどもあるので、自分の使っている利用範囲ではほとんど問題なく使えそう。試しにこんなスクリプトを作ってみた。サーバにアップしてある写真を選んで、ブログに貼付けるHTMLソースを表示するもの。（スクリプト用のHTML自体はサーバ側で自動生成。）

jQuery アルバム・サンプル

様々なライブラリの動作速度をチェックできるサイトによると、jQuery の採点はそれほどよくないよう？ですが、どちらにしても趣味の範囲なので、快適さを重視して jQuery にスイッチしてもよいかも。

SlickSpeed Selectors Test