[JavaScript]jQueryに入門

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[JavaScript]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をいじりまくってユーザーインターフェースを構築するのだったら、とてつもなく便利だと思われる。

スポンサーサイト

関連記事

トラックバック URL

http://liosk.blog103.fc2.com/tb.php/48-b33ffa61

トラックバック

コメント

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。