MooTools - Utilizzo di array

MooTools è una libreria JavaScript leggera che aiuta a creare pagine web dinamiche. Durante la gestione dell'elemento DOM, dobbiamo selezionare tutti gli elementi DOM di una pagina web. Questa raccolta può essere gestita utilizzando gli array.

Questo capitolo spiega come utilizzare gli array per gestire gli elementi DOM.

metodo each ()

Questo è il metodo di base per gestire gli array. Itera tutti gli elementi attraverso un elenco. È possibile utilizzare questo metodo in base al requisito. Ad esempio, se desideri selezionare tutti gli elementi div di una pagina, segui lo script fornito di seguito. Dai un'occhiata alla seguente pagina html che contiene più div.

<div>One</div>
<div>Two</div>

È possibile utilizzare il seguente script per selezionare each individual divda una raccolta di div nella pagina. Lo script selezionerà ogni div e trasmetterà un avviso. Dai un'occhiata al seguente script.

Script

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

È possibile utilizzare la seguente sintassi per gestire l'esempio sopra indicato. Dai un'occhiata alla pagina HTML.

Script

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

Qui, i due div sono racchiusi con un altro div - body_div. Durante la progettazione di uno script, dobbiamo selezionare solo un div esterno. Successivamente, utilizzando il metodo getElements (), possiamo selezionare i due div interni. Dai un'occhiata al seguente script.

Script

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

È possibile utilizzare un metodo diverso per scrivere lo script precedente come segue. Qui, stiamo usando una variabile separata per selezionare il filebody_div.

Script

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

Seleziona elementi specifici da un array

Durante la manipolazione di un array di elementi, possiamo selezionare un elemento specifico da un array di elementi. Di seguito sono riportati alcuni metodi importanti utilizzati per manipolare gli elementi DOM:

getLast ()

Questo metodo restituisce l'ultimo elemento di un array. Impostiamo un array per comprendere questo metodo.

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

Ora possiamo prendere l'ultimo elemento all'interno dell'array.

var lastElement = myArray.getLast();

La variabile lastElement ora rappresenta l'ultimo elemento all'interno di myArray.

getRandom ()

Il metodo getRandom () funziona in modo simile al metodo getLast (), ma otterrà un elemento casuale dall'array.

Syntax

var randomElement = myArray.getRandom();

La variabile randomElement ora rappresenta un elemento scelto a caso all'interno myArray.

Copia di un array

MooTools fornisce un modo per copiare un array utilizzando la funzione $ A (). La seguente è la sintassi per la funzione $ A ().

Sintassi

var <variable-name> = $A ( <array-variable>);

Aggiungi un elemento a un array

Esistono due metodi diversi per aggiungere elementi a un array. Il primo metodo ti consente di aggiungere elementi uno per uno oppure puoi unire due array diversi in uno.

includere()

Il metodo include () viene utilizzato per aggiungere un elemento in un array di elementi DOM. Ad esempio, considera il seguente codice HTML che contiene due elementi div e un elemento span sotto un div singolo e racchiuso:body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span id = "add_to_array">add to array</span>
</div>

Nel codice precedente, se chiamiamo il metodo getElements ('div') sul file body_divelement, otteniamo uno e due div ma l'elemento span non è incluso nell'array. Se vuoi aggiungerlo all'array che chiamiinclude()metodo sulla variabile array. Dai un'occhiata al seguente script.

Script

//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');

//first add your element to a var
var newToArray = $('add_to_array');

//then include the var in the array
myArray.include(newToArray);

Ora, myArray contiene sia divs che span element.

combinare ()

Questo metodo viene utilizzato per combinare gli elementi di un array con gli elementi di un altro array. Questo si prende cura anche dei contenuti duplicati. Ad esempio, considera il seguente codice HTML che contiene due elementi div e due elementi span sotto un div singolo e racchiuso:body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span class = "class_name">add to array</span>
   <span class = "class_name">add to array, also</span>
   <span class = "class_name">add to array, too</span>
</div>

Nel codice precedente, chiama il metodo getElements ('div') sul file body_divelemento. Ottieni uno e due div. La chiamata al metodo $$ ('. Class_name') seleziona i due elementi span. Ora hai un array di elementi div e un altro array di elementi span. Se vuoi unire questi due array, puoi usare il metodo di combinazione (). Dai un'occhiata al seguente script.

Script

//create your array just like we did before
var myArray= $('body_wrap').getElements('div');

//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

Ora, myArray contiene tutti gli elementi della variabile newArrayToArray.

Example

Questo ti aiuterà a capire gli array in MooTools. Supponiamo di applicare il colore di sfondo all'array di elementi che contiene div e span. Dai un'occhiata al seguente codice. Qui, il secondo array di elementi non appartiene a nessun id o gruppo di classi ed è per questo che non riflette alcun colore di sfondo. Dai un'occhiata al seguente codice.

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </div>
   </body>
   
</html>

Riceverai il seguente output:

Output