【Javascript】jQueryのメソッドチェーンのつなぎ方(2)

このページでは、 前ページのようにライブラリ側へ 直接書き込まなくても、自作関数をjQueryへ組み込める方法を試します。

実は、jQueryには、自作の関数やオブジェクトをjQueryへ取り込んで利用するための仕組みが用意されています。 ここでは、まず、その簡単な使い方から紹介します。

jQueryプラグイン

jQueryには、プラグインといって、jQuery自身へユーザーが機能を追加できる仕組みが用意されています。

jQueryサイトのPluginsページをみると、すでに多くのプラグインが、ユーザーによって 登録されていることがわかります。

また、Authoring には、その プラグインを作成する際のポイントが書かれています。

上記ページには、まず、jQueryオブジェクト(または$ショートカット)配下の jQuery.fnへ jQuery.fn.test などのように追加する方法と、jQuery(または$)直下へ直接 jQuery.test のように追加する方法とが書かれています。

今回は、このうち、jQuery.fnへの代入によってメソッドチェーンをつなぐプラグインを実現してみます。

さて、それでは、さっそく試してみましょう。 jQuery.fn.sampleというメソッドを作ってみます。

<script src="./jquery.js" type="text/javascript"></script>

<div id="testId">testIdです</div>

<script type="text/javascript">

jQuery.fn.sample = function() {  
    alert(this.text()) ; return this ;
}; 

$("#testId").sample(); //「testIdです」が表示されます

</script>

→サンプル

$("#testId").sample()で接続していきなり機能しています。 簡単ですね。

$("#testId")で検索した要素内の文字列をjQueryメソッドtext()で取得し、ダイアログ表示しています。

つまり、jQuery.fn以下へ自作関数を登録するだけで、 前回作った jQueryメソッドとしてメソッドチェーンの中で利用できるようになるということです。

なんと簡単に目標が達成されてしまいました。

さて、それでは、懸案のdrawRedをこの仕組みに当てはめてみます。

<script src="./jquery.js" type="text/javascript"></script>

<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>

<script type="text/javascript">

jQuery.fn.drawRed = function() {
  return  this.css("color","red");
};

$("DIV.testClass").drawRed();

</script>

→サンプル

できました。 「DIVでtestClassです」だけが赤くなり、成功です。

では、animeteも連結してみましょう。

jQuery.fn.drawRed = function() {
  return this.css("color","red");
};

$("DIV.testClass")
    .drawRed()
    .animate({fontSize: "5em"},1000 );

</script>

→サンプル

大きくなりましたね。これで、もう drawRed は jQuery メソッドとして、メソッドチェーンの中で自由に 使うことができるようになりました。

少し簡単すぎて拍子抜けな気もしますが、このシンプルさがjQueryなのです。

自作の関数をプラグインとして作成することで、 jQueryの機能そのものを簡単に拡張することができ、 コードはさらにシンプルに、 再利用も楽になります。

次回は、プラグインを作成する作法といいますか、いくつかのTipsを少し試してみます。