じわじわ便利なjQuery1.4で追加された機能いろいろ+α

1月14日にjQuery1.4がリリースされましたが、なかなか手をつけられずにいること早2ヶ月･･･。ようやくちゃんと使ってみようということで色々見てると、それにしても痒いところに手が届くというかなんというか、すばらしいですね。

いまさら感満載なので、みなさん既に知ってると思いますがいくつかメモしておくのと、もしかしたらあんまり知られてないかも知れないjQueryの機能も少し紹介しておきます。

トピックス

• 属性などをまとめて指定+ついでにイベントなどもまとめて指定
• 複数イベントをまとめてbind
• 個別にeasing指定
• アニメーションを指定時間待機させる.delay()
• DOMオブジェクトを丸ごと配列に入れる.toArray()
• .offset()で値を書き込めるようになった
• 1.4じゃないけど、もしかしたらあんまり知られていない機能
  • .append()メソッドで複数個のオブジェクトをappendする
  • jQueryのメソッドのアクセス方法
  • .hover()の真相

属性などをまとめて指定+ついでにイベントなどもまとめて指定

これかなり便利というか、すっきり書けます。

今までも属性はまとめて指定できたのですが、テキストとかイベントとかCSSとかはチェーンで繋いで書いてましたよね。こんな感じに。分かりやすいと言えば分かりやすいけど、やっぱりどうしても読みにくいですね。

$('<a/>')
  .attr({
    id: 'sample',
    name: 'sample',
    href: 'http://5509.me'
  })
  .click(function() {
    alert('clicked');
  })
  .css({
    paddingBottom: '2.5em',
    fontSize: '14px'
  })
  .text('click me!');

1.4ではこう書けます。。

$('<a/>', {
  id: 'sample',
  name: 'sample',
  href: 'http://5509.me',
  click: function() {
    alert('clicked');
  },
  css: {
    paddingBottom: '2.5em',
    fontSize: '14px'
  },
  text: 'click me!'
});

すっきり！みやすくなりました。

複数イベントをまとめてbind

そうそう、イベントも何回もチェーンで繋ぐと見にくくなって仕方なかったんですよね。下記のようにチェーンを使わずまとめて指定できます。

$('#box').bind({
  click: function() {
    alert('clicked!!');
  },
  mouseover: function() {
    alert('over!!');
  },
  mousemove: function() {
    alert('move!!');
  }
});

ちなみに1.4ではないですけれど、イベントのhandlerが同じならまとめて指定できますね。

$('#box').bind('click focus blur', function(){
  alert('matometa!');
});

個別にeasing指定

え･･･？縦横バラバラにeasing指定できるんですか･･･

$('#box').animate({
  top: 300,
  left: 300
},{
  duration: 1000,
  specialEasing: {
    top: 'easeInOutCirc',
    left: 'easeOutBounce'
  }
});

ただし、scrollTopとscrollLeftには使えないようです。それはそうか。

アニメーションを指定時間待機させる.delay()

setTimeout()とか使わなくていいんですよ。これまたすっきり書けます。
たとえば、fadeOut()後500ミリセカンド待ってからもう一度fadeIn()させたいときはこんな感じに書けます。

$('#box')
  .fadeOut(400)
  .delay(500)
  .fadeIn(400);

DOMオブジェクトを丸ごと配列に入れる.toArray()

いちいちpushとかする必要ないんです。.toArray()するだけです。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$('ul>li').toArray();

↓このように配列になります。

['<li>1</li>','<li>2</li>','<li>3</li>','<li>4</li>']

.offset()で値を書き込めるようになった

うん、これはそうでもないか･･･

$('#box').offset({
  top: '10px',
  left: '25px'
});

1.4じゃないけど、もしかしたらあんまり知られていない機能

.append()メソッドで複数個のオブジェクトをappendする

.append()はDOMでもjQueryオブジェクトでも何でもつっこめて便利なのですが、これカンマで区切ると複数個入れることができます。

$('#box').append(
  '<a href="#">1</a>',
  '<a href="#">2</a>',
  '<a href="#">3</a>'
);

ちなみに、.after()と.before()でも同じようにカンマ区切りで複数の要素を追加できます。

$('#box').after( // .before
  '<a href="#">1</a>',
  '<a href="#">2</a>',
  '<a href="#">3</a>'
);

jQueryのメソッドのアクセス方法

一般的に.(ドット)で繋いでいきますが、プロパティと同じなので当然、[methodName]でも呼び出せます。

$('#box').click(function() {
  alert('clicked');
});

$('#box')['click'](function() {
  alert('clicked');
});

追記： .hover()の真相

なにかありそうなタイトルにしましたが･･･
.hover()メソッドでは下記のように、マウスオーバーとマウスアウト時のイベントをまとめて指定できて便利ですよね。

$('div').hover(
  function() {
    alert('on');
  },
  function() {
    alert('off');
  }
);

マウスオーバーとマウスアウトと書きましたが、実は.hover()は.mouseover() / .mouseout() のショートカットではなく、.mouseenter() / .mouseleave() のショートカットです。これらの違いについてはjQuery APIのサンプルを見てもらうのが一番早いと思います。

http://api.jquery.com/mouseover/ – ページ真ん中らへんにDemoがあります。

一度領域に入ってしまえば、enterで、領域から出ない限りleaveにはなりません。何気なく使っていても、特に問題はないところですが、挙動がおかしいと思ったときなどに知っていれば、対処方に辿り着きやすいかもしれません。

まとめ

jQueryを使えば、クロスブラウザも（ある程度は）簡単に対応できるし、やりたいこともたった数行で実現できてしまうので、速度の面とかはとりあえず置いておいて、どんどん色んなことをやってみればいいんだと思います。