MooTools: uso de matrices

MooTools es una biblioteca JavaScript liviana que ayuda a crear páginas web dinámicas. Mientras administramos el elemento DOM, debemos seleccionar todos los elementos DOM de una página web. Esta colección se puede manejar mediante matrices.

Este capítulo explica cómo usar matrices para administrar elementos DOM.

cada método ()

Este es el método básico para trabajar con matrices. Repite todos los elementos a través de una lista. Puede utilizar este método según los requisitos. Por ejemplo, si desea seleccionar todos los elementos div de una página, siga la secuencia de comandos que se proporciona a continuación. Eche un vistazo a la siguiente página html que contiene múltiples divs.

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

Puede utilizar el siguiente script para seleccionar each individual divde una colección de divs en la página. El script seleccionará cada div y pasará una alerta. Eche un vistazo al siguiente guión.

Guión

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

Puede utilizar la siguiente sintaxis para manejar el ejemplo anterior. Eche un vistazo a la página HTML.

Guión

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

Aquí, los dos divs están encerrados con otro div - body_div. Al diseñar un script, tenemos que seleccionar solo un div externo. Más tarde, usando el método getElements (), podemos seleccionar los dos divs internos. Eche un vistazo al siguiente guión.

Guión

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

Puede utilizar un método diferente para escribir el script anterior de la siguiente manera. Aquí, estamos usando una variable separada para seleccionar elbody_div.

Guión

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

Seleccionar elementos específicos de una matriz

Mientras manipulamos una matriz de elementos, podemos seleccionar un elemento específico de una matriz de elementos. Los siguientes son algunos métodos importantes que se utilizan para manipular los elementos DOM:

obtener ultimo()

Este método devuelve el último elemento de una matriz. Configuremos una matriz para comprender este método.

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

Ahora podemos tomar el último elemento dentro de la matriz.

var lastElement = myArray.getLast();

La variable lastElement ahora representa el último elemento dentro de myArray.

getRandom ()

El método getRandom () funciona de manera similar al método getLast (), pero obtendrá un elemento aleatorio de la matriz.

Syntax

var randomElement = myArray.getRandom();

La variable randomElement ahora representa un elemento elegido al azar dentro myArray.

Copia de una matriz

MooTools proporciona una forma de copiar una matriz usando la función $ A (). La siguiente es la sintaxis de la función $ A ().

Sintaxis

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

Agregar un elemento a una matriz

Hay dos métodos diferentes para agregar elementos a una matriz. El primer método le permite agregar elementos uno por uno o puede fusionar dos matrices diferentes en una.

incluir()

El método include () se utiliza para agregar un elemento a una matriz de elementos DOM. Por ejemplo, considere el siguiente código HTML que contiene dos elementos div y un elemento span bajo un div único y cerrado:body_div.

Syntax

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

En el código anterior, si llamamos al método getElements ('div') en el body_div, obtenemos uno y dos div pero el elemento span no está incluido en la matriz. Si desea agregarlo a la matriz, llamainclude()método en la variable de matriz. Eche un vistazo al siguiente guión.

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);

Ahora, myArray contiene elementos divs y span.

combinar()

Este método se utiliza para combinar los elementos de una matriz con los elementos de otra matriz. Esto también se encarga del contenido duplicado. Por ejemplo, considere el siguiente código HTML que contiene dos elementos div y dos elementos span bajo div único y cerrado: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>

En el código anterior, llame al método getElements ('div') en el body_divelemento. Obtienes uno y dos div. La llamada al método $$ ('. Class_name') selecciona los dos elementos del intervalo. Ahora tiene una matriz de elementos div y otra matriz de elementos span. Si desea fusionar estas dos matrices, puede utilizar el método de combinación (). Eche un vistazo al siguiente guión.

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 );

Ahora, myArray contiene todos los elementos de la variable newArrayToArray.

Example

Esto le ayudará a comprender las matrices en MooTools. Supongamos que aplicamos el color de fondo a la matriz de elementos que contiene divs y span. Eche un vistazo al siguiente código. Aquí, la segunda matriz de elementos no pertenece a ningún id o grupo de clase y es por eso que no refleja ningún color de fondo. Eche un vistazo al siguiente código.

<!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>

Recibirá el siguiente resultado:

Output

↰ Previous page Next page ↱