Mootools 1.2 チュートリアル (3) arrays_Mootools の使い方の概要-jsチュートリアル-php.cn

今日は、配列を使用して DOM 要素を管理する方法を見ていきます。
基本メソッド
.each();
配列を扱うときは、.each(); メソッドが最適です。これにより、配列の各要素を反復処理し、必要に応じて要素に対して論理処理を実行する簡単な方法が提供されます。たとえば、ページ内の各 div オブジェクトに対してアラートメソッドを呼び出す必要があると想定できます。
参照コード:

コードをコピーコードは次のとおりです:

 
$$('div').each(function() { 
alert('a div'); 
}); 
 

以下の HTML コードを使用する場合、上記の JavaScript コードにより、div ごとに 1 つずつ、合計 2 つの警告ダイアログボックスが表示されます。
参照コード:

コードをコピーコードは次のとおりです。

One< /div>

Two

.each(); メソッドを使用する必要はありません。 (昨日説明したように) 配列を作成するもう 1 つの方法は、.getElements() メソッドを使用することです。
参照コード:

コードをコピーコードは次のとおりです:

$('body_wrap') .getElements( 'div').each(function() { 
alert('a div'); 
}); 

 

参照コード:

コードをコピーしますコードは次のとおりです:

One< /div>

Two

同じタスクを実行する別の方法があります。その変数は .each(); メソッドを使用します:

リファレンスコード:

コードをコピーコードは次のとおりです:

// まず、ステートメント "var VARIABLE_NAME"

// 次に、等価演算子 "= を使用して、この変数に値を割り当てます 
//この例では、これは div 要素を含む変数です Array
var myArray = $('body_wrap').getElements('div'); 
// これで、この変数を配列セレクターとして使用できます 
 myArray.each(function() { 
alert('a div'); 
}); 

 
最後に、関数をセレクターから分離したい場合です。これについては、明日の関数の使用に関するチュートリアルでさらに詳しく説明します。ただし、非常に簡単な例を作成できるようになりました。 

リファレンスコード:

コードをコピーコードは次のとおりです:

var myArray = $('body_wrap').getElements('div');

// 関数を作成するには、前と同じように変数を宣言し、名前を付けることができます 
// 待機中この変数を関数として宣言するには、数値の後に "function()" を使用します。 
// 最後に、{ と } の間に関数コードを記述します。 
var myFunction = function() { 
alert(' a div' ); 
}; 
// これで、 .each(); メソッド 

 
 で関数を呼び出すことができます。先ほどのように .each(); メソッドで関数を呼び出す場合、関数名を引用符で囲む必要はありません。 
配列のコピー 

$A
MooTools は、$A 関数を通じて配列をコピーする簡単な方法を提供します。先ほどと同じように変数を使用して配列を作成しましょう:
リファレンスコード:

コードをコピーコードは次のとおりです: // 配列変数を作成します

var myArray = $('body_wrap').getElements('div');

 
配列をコピーします (配列のコピーを作成します) ): 
参照コード: 

コードをコピーコードは次のとおりです: //新しい変数名を付けて「myCopy」という名前を付け、「myArray」のコピーをそれに割り当てます

var myCopy = $A(myArray );
配列から指定された要素を取得します。
.getLast();
.getLast() メソッドは、配列の最後の要素を返します。まず配列を作成します。
リファレンスコード:

コピーコードコードは次のとおりです:

var myArray = $('body_wrap').getElements('div');

これで、この配列から最後の要素を取得できます:
参照コード:

コードをコピーしますコードは次のとおりです。

var lastElement = myArray.getLast()

変数 lastElement の現在の値は、配列 myArray の最後の要素です。
.getRandom();
.getLast(); と同じですが、配列から要素をランダムに取得します:
参照コード:

コードをコピーコードは次のとおりです:

varrandomElement = myArray.getRandom();

変数randomElementの現在の値がランダムに選択されます。要素の配列 myArray から。
配列に要素を追加します
.include();
このメソッドを使用すると、配列に別の要素を追加できます。要素セレクターを .include() メソッドに渡すだけで、配列に追加されます。次の HTML コードを使用します。
参照コード:

コードをコピーコードは次のとおりです:

1

 array

前と同様に、「body_wrap」の下にあるすべての div を呼び出すことで配列を作成できます:

コードをコピーコードは次のとおりです。

var myArray = $('body_wrap').getElements('div'); 🎜>

 
この配列に別の要素を追加するには、まずこの要素を変数に割り当て、次に include メソッドを使用する必要があります: 
参照コード: 

コードをコピーしますコードは次のとおりです: // まず要素を変数に割り当てます

var newToArray = $('add_to_array') ;

 // それを配列に追加します 
myArray.include(newToArray); 

 
これで、配列には div 要素と spam 要素の両方が含まれます。 
.combine(); 

.include(); と同じですが、内容の重複を気にせずに既存の配列に配列を追加できます。次の HTML から 2 つの配列を取得するとします。
リファレンスコード:

コピーコードコードは次のとおりです:

one

two

配列に追加
配列にも追加
配列にも追加< /span> 

次のように 2 つの配列を作成できます:
参照コード:

コードをコピーします。 > コードは次のとおりです: // 前と同じように配列を作成しますvar myArray= $('body_wrap').getElements('div' );

// 次に、.class_name という名前のすべての CSS クラスを含む要素の配列を作成します

var newArrayToArray = $$('.class_name'); 

 
これで .combine を使用できるようになります() ;2 つの配列をマージするメソッド。このメソッドは重複する要素をそれ自体で処理するため、それを処理する必要はありません: 
リファレンス コード: 

コードをコピー

コードは次のとおりです:

 
// 配列 newArrayToArray を配列 myArray にマージします 
myArray.combine(newArrayToArray); 

これで、myArray には newArraytoArray のすべての要素が含まれます。
コード例
配列を使用すると、すべての項目を含むリストを反復処理し、各要素に対して同じコードを実行できます。この例では、現在の要素の代わりに変数「item」が使用されていることに注意してください。
参照コード:

コードをコピーコードは次のとおりです:

 
// 配列を作成します。この配列には、「body_wrap」
var myArray = $('body_wrap').getElements('.class_name') の CSS クラス名を持つすべての要素が含まれます。
// まず、 array
var addSpan = $('addtoarray'); 
// 次に、マージする配列を作成します 
var addMany = $$('.addMany'); 
// 次に、 element addSpan into the array 
myArray.include(addSpan); 
// 次に、配列 addMany を myArray にマージします 
myArray.combine(addMany); 
// の各要素を必要とする配列を作成します実行する必要がある配列関数 
var myArrayFunction = function(item) { 
// item は配列内の現在の要素を指すようになります 
item.setStyle('background-color', '#eee' ); 
} 
// 配列内の各項目に対して myArrayFunction 関数を呼び出します 
myArray.each(myArrayFunction); 