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

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

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

トピックス

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

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

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

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

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

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

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

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

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

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

1
2
3
4

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

['
1
','
2
','
3
','
4
']

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

$('#box').append(
  '1',
  '2',
  '3'
);

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

$('#box').after( // .before
  '1',
  '2',
  '3'
);

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

何か役に立つことがあったらシェアしてみてください