実は技術部ではなく、演出部所属の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'));
IE6のみhttp://tech.kayac.com/img/title.pngを表示
カヤックではフレームワークのソースを読むことも厭わない技術者も募集しています!