細かすぎて伝わらないjQueryの機能5選

実は技術部ではなく、演出部所属のagoです。

先日jQuery 1.3.2のソースを読む機会があり、そのときいくつか気づいたことがあったのでまとめてみました。

1 .addClass, removeClassはスペース区切りで複数のclassを渡せる

.addClass, removeClassにはスペース区切りで複数のclass nameが渡せます。

//classの順番は保持します。
//<div class="hoge gege">があった場合、<div class="hoge gege huga">になります。
$('div').addClass('hoge huga');

//<div class="hoge gege huga">があった場合、<div class="gege">になります。
$('div').removeClass('hoge huga');

ただし、hasClassにはスペース区切りでclass nameを渡すと一切一致しないのでご注意ください。

//以下は<div class="hoge huga">にも一致しません!
$('div').hasClass('hoge huga');

2 $('<div>')は閉じタグを自動的に補完する

.appendや$()でhtmlを生成するmethodに<div>等の閉じタグのない不完全なhtmlが渡された場合、自動的に<div></div>といった形へ閉じタグを補完してくれます。（imgやbr等の閉じタグが必要ない要素の場合補完しません）

$('body').append('<div>');
//上記のコードは最終的に以下のコードと同じ処理になります
$('body').append('<div></div>');

またこれは.wrap系でも同じ補完が行われるので以下のような記述も可能です。

$('h1').wrap('<div>');
//<h1></h1>を<div><h1></h1></div>に置き換えます

3 設定済みのevent handlerに名前を設定する

.click(function () {})や.bind('click', function () {})等で設定したfunctionは.data('events')内に{ 'click': { 'event id':function () {}... } }という形で保存されています。

このことから以下のように一度設定したeventを削除することもできます。

$('a:first').click(function () { alert(1); });
//$.event.guidは直前に設定されたevent id + 1が保持されています
delete $('a:first').data('events')['click'][$.event.guid - 1];

これだけだとイベントネームスペースで十分な気もしますが、.data('events')の中にはnamespaceの名前も含まれているので、以下のように設定済みのeventに対して後からnamespaceを設定することが可能です。

$('a:first').click(function () { alert(1) });

//namespaceは.typeに保存されています
$('a:first').data('events')['click'][$.event.guid - 1].type = 'hoge';

//最後に設定したeventのみ削除
$('a:first').unbind('.hoge');

無理やり用途を考えると、namepaceを指定しないPluginのeventに名前をつける場合などに使えるかもしれません。（ただし、マニュアルには記述がないのでversionによっては使えないかもしれません）

また、このことから、.data('events', '')を行うと設定済みのeventがすべて削除される(!)のでご注意ください。

4 複数eventの同時張り付け

.bind()を使った場合、複数のeventを同時に貼り付けることが可能です。

//focusの出入りを監視
$('a').bind('focus blur', function () { alert(1); });

//とにかくclickを監視
$('a').bind('click dblclick mousedown mouseup', function () { alert(1); });

//とにかくkey操作を監視
$('a').bind('keydown keypress keyup', function () { alert(1); });

さらにイベントネームスペースと共存も可能なので以下のような記述を行うことが可能です。

//namespaceは一つずつ設定する必要があります。
$('a').bind('keydown.key keypress.key keyup.key', function () { alert(1); });

//上記3つのeventを一気に削除
$('a').unbind('.key');

5 IE6の.getAttribute()でフルパスが取得できない問題の対応

IE6にはimg[src]に相対パスを設定しても、img.getAttribute('src')でフルパスが返るバグ仕様があり、他のブラウザと同じようにDOM上で指定された形でパスを取得するにはimg.getAttribute('src', 2)のように.getAttributeの第2引数に「2」をつけて呼び出す必要があります。（ちなみにa[href]にも同じ問題があります）

しかし、jQueryはこの点が正しく修正されており、IE6であっても他のブラウザと同じようにhtmlに書かれた値と同じものを取得することができます。

// /img/title.pngを表示
alert($('img:first').attr('src'));

// http://tech.kayac.com/img/title.pngを表示
alert($('img:first').get(0).getAttribute('src'));

/img/title.pngを表示

IE6のみhttp://tech.kayac.com/img/title.pngを表示

カヤックではフレームワークのソースを読むことも厭わない技術者も募集しています！

KAYAC engineers' blog