RubyistのためのjQuery入門 by サイロス誠さん

Rails3.1のjavascriptライブラリはjQueryに移行する
prototype.jsからjQuery
インターフェイス実装の大変革が起こる

jQueryのおおきな特徴
1.セレクタ
2.イベント
エフェクト
アニメーション
ajax
3.Deffer
プラグイン

rubyにおけるjQueryの書き方

coffeescriptでjQueryを書ける

$("li[id='1']").css "color", "red"

という風に書く。
jQueryだと

$("li[id='1']").css("color", "red");

DOMをオブジェクトに包んで返す
(CSSの書き方を踏襲している)
liとかの場合、DOM要素を配列オブジェクトにして返している。
なので、"li[id='1']"みたいな書き方になる(キーからアクセスしている)。

$("li").css "color", "red"

とすると、li全てが赤になる。
偶数飛ばし

$("li:even").css "color", "red"

奇数飛ばし

$("li:odd").css "color", "red"

jQueryの日本語レファレンスが余裕で使える

セレクタ+スペースで、木構造の子孫にアクセス出来る

$("li gt(1)").css "color", "red"

gt(1) より大きい要素のときだけ実行する

#("se_area).html "<input type='button' value='click!' id='x' />"

clickやmouseoverだとかのイベントハンドラを再定義するのがjQueryである。

$("#x").click () ->
  $("li[id='2']").css "color", "red"

みたいな書きかたが出来る

$("#x").click () ->
  alert 'OK'
$("#x").unbind ()
$("#x").click () ->
  $("li[id='2']").css "color", "red"

不要になったイベントハンドラをunbindで解除できる

Deffer
Defferを使うことで、onloadのタイミングをコントロールできる

まとめ
jQueryはJavascriptの弱点を克服する
フロントエンドに特化
インターフェイス開発に余裕

by shigemk2