第5回 コア編：連載：jQuery逆引きリファレンス（12/13 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　jQueryオブジェクトを拡張するには、$.fn.extendメソッドを使用します。

　$.extendメソッドにも似ていますが、$.extendメソッドがjQueryオブジェクトそのものに対して機能を追加するのに対して、$.fn.extendメソッドはjQueryオブジェクトのプロトタイプに対して機能を追加します。

　$.extendメソッドが静的メソッドを追加するための、$.fn.extendメソッドがインスタンス・メソッドを追加するための機能であるといい換えてもよいでしょう。

　以下は、jQueryオブジェクトに対して要素セットのすべての背景色をクリアする（白色に戻す）clearBgcolorメソッドの定義例です。

<script type="text/javascript">

// jQueryオブジェクトを拡張し、clearBgcolorメソッドを追加
$.fn.extend({
  clearBgcolor: function() {

    // 要素セットの内容を順に処理し、背景色を白色に設定
    return this.each(function() {
      $(this).css('backgroundColor', 'white');
    });
  }
});

// <li>要素の背景色をすべて白色に
$(function() {
  $('li').clearBgcolor();
});

</script>

  ……中略……

<!--<li>要素の背景色をライムに設定-->
<style>
  li {
    background-color: Lime;
  }
</style>

  ……中略……

<ul>
  <li>ASP.NET MVC実践プログラミング</li>
  <li>10日でおぼえるASP.NET入門教室</li>
  <li>JavaScriptマスターブック</li>
</ul>

リスト089 jQueryオブジェクトにclearBgcolorメソッドを追加（Extend2.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト089の実行結果

　extendメソッドには、オブジェクト・リテラルの形式で、拡張するメソッドを指定できます。ここではclearBgcolorメソッド1つを定義しているだけですが、（もちろん）メソッドの定義を列挙することで、複数のメソッドを同時に追加することも可能です。