Mach3.laBlog

jQuery1.4の新機能を紹介するプレゼンテーションスライド

この記事は賞味期限切れです。(更新から1年が経過しています)

この記事の情報は古くなっています。
jQuery現行バージョンのドキュメントをご参照ください。

jQuery1.4の新機能を実例を盛り込みながら紹介するスライドを、
HTML5によるHTML5のプレゼンテーションスライド
のスライドを制作したMatt Nowackさんが公開しています。

jQuery 1.4: What you need to know

jQuery 1.4: What you need to know

jQuery 1.4: What you need to know

スライドの内容は、jQueryの概要から始まり、
1.4で追加された新要素へシフトしていきます。
コードと実例を元に紹介してくれているので、大変分かりやすいです。

1.4になって知らない機能が出てきてしまった方は
是非一度流し見してみると良いかもしれません。

目についた機能を軽く紹介してみます。

新しいエレメント追加法

var div = $('<div />', {
    id: 'example',
    css: {
        height: '100px',
        width:  '100px',
        color:  'blue',
        backgroundColor: 'green'
    },
    click: function() {
        $(this).css('backgroundColor', 'red');
    }
});

この書き方は知らなかったーっ!
属性もCSSもイベントもまとめて指定できるんですね。
これは楽!そしてソースが綺麗になる!
“less write, do more”がさらに進みそうですね。

$.liveを使ったイベントハンドリング

現在 jQuery.fn.live は削除されています。

$.live()は1.3から追加されていましたが、
$.bind()とどう違うのか、私はよく分かっておりませんでした。

例えば、$.bind()を使った次のコードは予想通りに動きません。
$.bind()はDOMに生成された後でないとイベントハンドラを付加出来ない為です。

$("input.mybutton").bind("click", function(){
    alert("Clicked !");
});

$("<input />",{
    "class":"mybutton",
    type:"button",
    value:"click me !"
}).appendTo("body");

ここで、$.bind()ではなく$.live()を使う事で上手く動くようになります。

$("input.mybutton").live("click", function(){
    alert("Clicked !");
});

.live() – jQuery API

Attach a handler to the event for all elements which match the current selector, now or in the future.

DOMに存在する要素でないと働かないbindと異なり、
宣言以降に追加された要素に対してもイベントハンドラを設定出来るというわけですね。
これは便利だ!

jQuery.proxyの件といい、
私はどちらかというと取扱説明書を読まずに物を使うタイプなので、
色々取りこぼしがあります…。
新しくなったら軽くドキュメントに目を通すと良いのかも知れませんね。

cf) Ajaxian » jQuery 1.4 presentation, using Ernest’s HTML5 open source presentation app

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*