[JavaScript]jQueryに入門 / LiosK-free Blog

[JavaScript]jQueryに入門

2007-10-20
カテゴリ: Client Side
タグ: JavaScript Tips jQuery 入門

jQueryに入門してみましたよっていう話。jQueryの入門記事ではないのであしからず。

以前からjQueryの噂は聞いていたし、ちょこちょことは見たこともあったのだが、なんとなくいい機会なので本格的に勉強してみることにした。

以下はその雑感。

概要

jQuery: The Write Less, Do More, JavaScript Library

jQueryは、CSSセレクタかXPathで要素を指定して、マッチした要素に対して簡潔なメソッドで処理をするというJavaScriptフレームワーク。$()関数にセレクタを渡すと、CSS操作・エフェクト・Ajaxなどのメソッドを備えたjQueryオブジェクトが返される。

$('p.surprise').css('backgroundColor', 'yellow').toggle('slow');

実行してみればたぶんわかる。

プラグインで機能を拡張できるようで、jQuery自体には基本的なメソッドしか備えられていない。それでも下のようなメソッドを備えていて十分に便利。

addClass()
html()
insertAfter()
css()
height()
click()
fadeIn()
load()

名前でなんとなくはわかるだろうけど、詳しくはドキュメントを見てください。

感心した

感心したのは、

setter系のメソッドはjQueryオブジェクトを返す
引数を渡せばsetter、引数を渡さなければgetterとして振舞う

の2点が、ほとんどのメソッドで一貫して採用されていること。

$('#jqSample').click(function() {
    window.alert($(this).html());
}).html('クリック！').css('color', 'red').click();

実行

サンプル

この2点のおかげでコードが短くなる。しかも、覚えなきゃいけないメソッドが減る上に、どのメソッドも同じように使えるから、APIが直感的にわかりやすい。

でも、何よりも、メソッドをつなげて積み木みたいにオブジェクトを組み立てていく感覚とか、ワンラインで済ませている爽快感とかが一番良い。

$(document.createElement('p'))
    .hide()
    .html('新しい要素')
    .css('backgroundColor', 'yellow')
    .css('cursor', 'pointer')
    .insertAfter($('#jq2'))
    .show('fast')
    .click(function() { $(this).hide('fast', function() { $(this).remove(); }); });

実行

難点

オブジェクトを定義してから実行するようなスタイルじゃなくて、無名関数をバンバン作りながらメソッドつなげるようなコーディングスタイルになりそう。気をつけないとスパゲッティする。

でも、

イベントの定義とかがすごく簡単。

$(window).resize(function() {
    var w = $(window);
    window.alert('H: ' + w.height() + 'px * W: ' + w.width() + 'px');
});

実行

複雑なロジックを組むのではなくて、DOMでHTMLをいじりまくってユーザーインターフェースを構築するのだったら、とてつもなく便利だと思われる。

LiosK-free Blog