デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

callbacks.add( )コールバックのリストにfunctionを追加

構文

コールバックのリストにfunctionを追加返値:なし
callbacks.add( function )ver1.7〜

機能

コールバックのリストに引数で指定したfunctuionを追加します。複数のfunctionを設定したい場合は、配列の中にfunctionを入れて引数に設定します。登録したfunctionを実行する場合はcallbacks.fireメソッドcallbacks.fireWithメソッドを利用します。このとき引数で情報を渡すことができます。

解説

コールバックのリストにfunctionを追加します

サンプル(add/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の部分を確認してください。1行目でコールバックオブジェクト「myCall」を作成し、2行目でcallbacks.addメソッドを利用してtestFuncをコールバックのリストに追加しています。

var myCall = $.Callbacks();
myCall.add(testFunc);

追加したtestFuncは以下の様に記述され、引数で受け取った情報をappendメソッドを利用してbody要素内に追加します。

function testFunc(str){
	$("body").append(str);
};

実際にコールバックに登録したfunctionを実行するのは以下の部分です。buttonをクリックしたらcallbacks.fireメソッド を実行してcallbacks.addメソッドで登録したfunctionを実行します。このとき引数で情報を送ることができます(サンプルでは「hello!」と送っています)。

$("button").click(function(){
	myCall.fire("hello!");
});

結果として、buttonをクリックするとbody要素内に「hello!」と追加されます。

複数のfunctionをまとめて追加する

複数のfunctionをまとめて追加したい場合は配列の要素としてfunctionを設定します。
サンプル(add/02.html)を開いてbody内に2つのp要素(id属性はpinkとgreen)が追加されていることを確認してください。

<p id="pink"></p>
<p id="green"></p>

jQueryは以下の様に変更され、callbacks.addメソッドの引数に配列が設定されていることを確認してください。要素は2つのfunctionで、pinkFuncとgreenFuncが設定してあります。

var myCall = $.Callbacks();
myCall.add( [ pinkFunc,greenFunc ] );

2つのfunctionは以下の様に記述され、異なるid属性のp要素に引数で受け取った内容を追加します。

function pinkFunc(str){
	$("#pink").append(str);
};
function greenFunc(str){
	$("#green").append(str);
};

buttonをクリックすると2つのp要素にそれぞれ「hello!」と表示され、callbacks.addメソッドによって2つのfunctionがまとめて追加されたことが確認できます。

メモ

配列でなくても複数のfunctionを追加できたよ

本家サイトでは複数のfunctionを登録する場合は配列を使うと記載されていますが、配列を利用しなくてもカンマで区切っただけで登録できました。サンプル(add/test01.html)を開いて、ほとんどadd/02.htmlと同じ事を確認してください。

異なるのは以下の様にcallbacks.addメソッドの引数で配列を利用していない点だけです。

var myCall = $.Callbacks();
myCall.add(pinkFunc,greenFunc);

しかしbuttonをクリックすると、add/02.htmlと同じように機能することが確認できます。