Entries

jsがメッサ楽しくなるフレームワークjQuery(1)

HATENA-TUBEで使っている、jQueryというjsフレームワークが楽しすぎる件について。

jQueryは、ちょっとダーティだけどスゴイお手軽に、色々なことができるステキライブラリっす。小さい実験でのプロダクティビティはもうprototype.jsの100倍ぐらいスゴイっす。

色々実験中なのでそのメモ。


まず、最新版を右クリックから保存して適当なフォルダに入れる。

まず、jQueryではdobument.body.onloadに相当する部分が、ちょっと独特なのでおまじないのつもりで以下のように書きます。

初期化

$(document).onready( function(){
  //ここに初期化系の処理
})

で、jQueryもプロトタイプみたいに$()関数を多様するのだけど、その強力さが半端ありません。例えば、ノードの一括定義とかができちゃいます。

全ての<p>ノードの中身を”Hello World”にする

$("p").html("Hello World");

さらに複数のエレメントに同時に設定変更を行ったり、

全ての<p>と<div>ノードの中身を”Hello World”にする

$("p,div").html("Hello World");

さらに複数のノードの絞込み検索

全ての<p>タグの中にある<b>タグの中にある<a>タグのリンクを変更

$("p").find("b").find("a").set("src", "http://www.fladdict.net");

全ての<p>タグのcssのフォント設定を一括変更

$("p").css("font","14px Arial");

そしてなんかXPATHにも対応、物凄い無茶なノード指定ができます。

class名がfooで、中に<a>タグを持っている<p>タグを、フェードアウト

$("p.foo[a]").fadeOut("slow");

なんつぅか、あんなことやこんなことが、というかたいていの処理が1行でできてしまいますよ(コードがダーティですが)。しかもまた、Ajax系やイベントハンドリング系も強力なんですよ。
もう、jQuery最高!! flashにも是非欲しいdeath

続く