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

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

.pushStack( )要素を追加した新しいjQueryオブジェクトの作成

構文

要素を追加した新しいjQueryオブジェクトの作成返値:jQueryオブジェクト
jQo.pushStack( 要素配列 )ver1.0〜
jQo.pushStack( 要素配列, 名前, 引数 )ver1.3〜

機能

pushStackメソッドはjQueryオブジェクトで指定した要素の参照に、要素を追加した新しいjQueryオブジェクを作成します。引数にはDOM要素を持つ配列「要素配列」を設定します。

v1.3では新しいメソッドを作りやすいように、第2引数に新しく作成するメソッド名、第3引数にメソッドが受け取る引数の設定ができるようになりました。

これは開発者向けのメソッドで、新しいTraversingのメソッドを作成する時などに利用するのだと思います。正直、理解できていません...

解説

要素を追加した新しいjQueryオブジェクトの作成

サンプル(pushStack/01.html)を開いてbody内にbutton要素とdiv要素が5つあることを確認してください。div要素にはid属性やclass属性が設定されています。

<div id="n1">#n1</div>
<div id="n2">#n2</div>
<div id="n3">#n3</div>
<div class="test">.test</div>
<div class="test">.test</div>

jQueryは以下の様に記述されています。2行目でclass属性がtestの要素にマッチしたjQueryオブジェクトにgetメソッドを利用して要素配列に変換しています。3行目ではpushStackメソッドの引数に2行目で作成した要素配列を設定し新しいjQueryオブジェクトを作成し、それに対してcssメソッドを利用して背景色をピンクに変更しています。

$("button").click(function(){
	var addArray = $(".test").get();
	$("#n1").pushStack(addArray).css("background-color", "#fcd");
});

結果として、buttonをクリックするとclass属性がtestの要素の背景色がピンクに変わります。最初のjQueryオブジェクトであるid属性がn1の要素は背景色が変更されません。

よく分かりません...

本家サイトでは、ほとんど説明がないためよく分かりません。しかしjQuery.jsのソースを確認すると、Traversingのメソッドで良くpushStackメソッドが利用されています。例えばfilterメソッドは以下の様に記述されていました。なので新しいTraversingのメソッドを作成する時に使えるのだと思います。

filter: function( selector ) {
 return this.pushStack( winnow(this, selector, true), "filter", selector );
}

pushStackメソッドを理解するためにはjQuery.jsのソースを解読するしかなさそうです。

メモ

ほとんど理解できていないので、理解できたら追記しようと思います。