時が経つのは早いもので、ぼーとしてたらもう1月も終わりそうですね。外村です。
先日リリースされたjQuery1.4で新しく追加されたメソッドや新しい使い方ができるようになった機能を全部ではないですがいくつか紹介します。以下に変更点が全て掲載されているのでそちらも参照するといいと思います。
新規で追加されたメソッド
1. nextUntil()、prevUntil()、parentsUntil()
指定したセレクタまでの要素を返します。以下の例ではitem3とitem4の後ろにテキストが追加されます。
<ul>
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
<li id="item4">item4</li>
<li id="item5">item5</li>
</ul>
$('#item2').nextUntil('#item5').append('[foo]');
nextUntil()は後方、prevUntil()は前方、parentsUntil()だと親要素を探します。
2. delay()
指定の時間処理を遅らせます。アニメーションの途中などに挟んで使うようです。下記のようにするとsilidUpとfadeInのあいだに1000ms時間が空きます。
$('#foo').slideUp(300).delay(1000).fadeIn(400);
3. has()
指定したセレクタの要素がるかどうかを調べます。セレクタが存在したら元のjQueryオブジェクトを返します。
以下のようにした場合、#fooの子要素にli.barがあった場合#fooにbazというclassが追加されます。li.barにつくのではないというのがポイントです。
$('#foo').has('li.bar').addClass('baz');
4. unwrap()
親要素を削除します。wrap()の反対ですね。
$('#foo').unwrap();
5. detach()
要素を削除します。remove()と同じような感じですが、remove()と違うのはイベントや$.dataは残るということです。
以下の例ではdetach()を使っているので、DOM要素は削除されますが、detachする前に設定したイベントや$.dataにデータは残っています。
var $div = $('#foo');
var div = $div.get(0);
$div.click(function() { alert('foo') });
$.data(div, 'foo', 'bar');
$div.detach();
$('#hoge').append($div); // => 再度追加してもクリックイベントは残ってる
console.log( $.data(div, 'foo') ); // => bar
6. focusin()、focusout()
focusin、focusoutというイベントが新規で追加されています。基本的には以前のfocusとblurと同じようなものですが、focus、blurと違うところは指定した要素だけでなく、子要素にもイベントが適用されるというところのようです。
<div id="foo">
<input type="text" />
<input type="text" />
</div>
$('#foo')
.focusin(function() {
// focus時の処理
})
.focusout(function() {
// focusout時の処理
});
7. first()、last()
first()は最初の要素、last()は最後の要素を返します。セレクタの指定で:first-child、:last-childとつけるのと同等ですね。
<ul id="foo">
<li id="item1">list1</li>
<li id="item2">list2</li>
<li id="item3">list3</li>
<li id="item4">list4</li>
<li id="item5">list5</li>
</ul>
console.log( $('#foo li').first().attr('id') ); // => item1
console.log( $('#foo li').last().attr('id') ); // => item5
8. toArray()
jQueryオブジェクトを配列にして返します。get()と等価で、get()を引数なしで呼ぶと内部ではtoArray()が呼ばれているようです。get()よりもこっちのほうが直感的でいいですね。
<ul id="foo">
<li id="item1">list1</li>
<li id="item2">list2</li>
<li id="item3">list3</li>
<li id="item4">list4</li>
<li id="item5">list5</li>
</ul>
console.log( $('#foo li').toArray() ); // => [li#item1, li#item2, li#item3, li#item4, li#item5]
9. $.proxy()
例えば以下の様なコードがあったときに、click時に呼ばれるclickHandlerメソッドのthis.nameのthisは#fooになってしまうので、this.nameはundefinedになっていしまいます。
var app = {
name: 'app name',
clickHandler: function() {
alert( this.name + ' clicked.' );
}
};
$('#foo').click(app.clickHandler);
そこで$.proxyを使って以下のように書くととclickHandlerメソッドのthisをappとして扱うことができます。
$('#foo').click( $.proxy(app, 'clickHandler') );
もしくは
$('#foo').click( $.proxy(app.clickHandler, app) );
のどちらでも同じように動作します。
10. $.isEmptyObject()、$.isPlainObject()
空のオブジェクトか判定するメソッドとオブジェクトかどうかを判定するメソッドが追加されています。挙動は以下のようになるようです。
$.isEmptyObject({}); //=> true
$.isEmptyObject([]); //=> true
$.isEmptyObject(''); //=> true
$.isEmptyObject(0); //=> true
$.isEmptyObject(null); //=> true
$.isEmptyObject(undefined); //=> true
$.isEmptyObject('foo'); //=> false
$.isEmptyObject({foo:'bar'}); //=> false
$.isEmptyObject(new Object); //=> true
$.isPlainObject({}); //=> true
$.isPlainObject([]); //=> false
$.isPlainObject(''); //=> false
$.isPlainObject(0); //=> false
$.isPlainObject(null); //=> false
$.isPlainObject(undefined); //=> false
$.isPlainObject('foo'); //=> false
$.isPlainObject({foo:'bar'}); //=> true
$.isPlainObject(new Object); //=> true
新しい使い方ができるようになったメソッド
11. bind()で複数イベントをまとめて指定
bind()にオブジェクトを指定することで複数のイベントをbindできるようになっています。
$('#foo').bind({
click: function() {
// click event
},
mouseover: function() {
// mouseover event
},
mouseout: function() {
// mouseout event
}
});
12. animate()でプロパティ毎にeasing
animate()のeasingが以下の様にプロパティ毎に設定できるようになっています。これで複雑なアニメーションがより簡単に定義できそうですね。
$('#foo').animate({
left: 500,
top: [500, 'linear']
}, 1000);
13. live()が全イベントに対応
以前までのバージョンのlive()はsubmitやfocusなど、対応してないないイベントもありましたが、今回全てのイベントに対応したようです。ただしfocus、blurはfocusin、focusoutを指定する必要があります。
$('.input-text').live('focusin', function() {
// focus時のイベント
});
14. append()やcss()にfunctionを指定
append()などのDOM操作系のメソッド全般にfunctionが指定できるようになっています。これでどういうことができるようになったかというと、以下のようにthisで自分の要素を取れたり
$('#foo').append(function() {
return $(this).hasClass('hoge') ? 'hoge' : 'fuga';
});
引数にインデックスと値をとるので、以下のような処理も書けけるようになっています。
$('#foo li').css('color', function(i, val) {
return i % 2 ? 'red' : 'blue';
});
以上です。新しい機能だけでなく1.4では速度も劇的に速くなっているようなのでぜひ使ってみるといいと思います。
