jQuery メソッドチェーンとは 学習用メモ

jQuery メソッドチェーンとは

メソッドチェーンとは、下記文のようにメソッドを鎖(チェーン)のようにつなげて記述し、実行するプログラムの手法のこと。

$('セレクタ').メソッドA().メソッドB().メソッドC()...

メソッドチェーンを使用しない場合

$(function() {
  $(#title).on('mouseover',  function() {
    $('#title').css({
      color: 'yellow',
      backgroundColor: 'blue';
    });
  });
  $('#title').on('mouseout', function() {
    color: '',
    backgroundColor: ''
  });
});

メソッドチェーンを使用する場合

$(function() {
  $('#title')
    .on('mouseover', function(){
      $('#title').css({
        color: 'yellow',
        backgroundColor: 'blue'
      });
    .on('mouseout', function(){
      $('#title').css({
        color: '',
        backgroundColor: ''
    });
  });
});

メソッドチェーンのメリット

・$() 関数の記述が1回で済むためコードがシンプルになる

・プログラムの処理速度が向上する

www.sbcr.jp

学習教材
jQuery 最高の教科書
2013年12月3日 初版第1刷発行
著者　株式会社シフトブレイン