MooTools - Использование массивов

MooTools - это легкая библиотека JavaScript, которая помогает создавать динамические веб-страницы. При управлении элементом DOM нам нужно выбрать все элементы DOM веб-страницы. С этой коллекцией можно работать с использованием массивов.

В этой главе объясняется, как использовать массивы для управления элементами DOM.

each () метод

Это основной метод работы с массивами. Он выполняет итерацию всех элементов по списку. Вы можете использовать этот метод в зависимости от требований. Например, если вы хотите выбрать все элементы div на странице, следуйте приведенному ниже сценарию. Взгляните на следующую страницу html, которая содержит несколько блоков div.

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

Вы можете использовать следующий сценарий для выбора each individual divиз коллекции div на странице. Скрипт выберет каждый div и передаст предупреждение. Взгляните на следующий сценарий.

Сценарий

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

Вы можете использовать следующий синтаксис для обработки приведенного выше примера. Взгляните на HTML-страницу.

Сценарий

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

Здесь два div заключены в другой div - body_div. При разработке скрипта мы должны выбрать только один внешний div. Позже, используя метод getElements (), мы можем выбрать два внутренних div. Взгляните на следующий сценарий.

Сценарий

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

Вы можете использовать другой метод для написания вышеуказанного скрипта следующим образом. Здесь мы используем отдельную переменную для выбораbody_div.

Сценарий

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

Выбрать определенные элементы из массива

Управляя массивом элементов, мы можем выбрать конкретный элемент из массива элементов. Ниже приведены некоторые важные методы, используемые для управления элементами DOM.

getLast ()

Этот метод возвращает последний элемент массива. Давайте настроим массив, чтобы понять этот метод.

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

Теперь мы можем взять последний элемент в массиве.

var lastElement = myArray.getLast();

Переменная lastElement теперь представляет последний элемент в myArray.

getRandom ()

Метод getRandom () работает аналогично методу getLast (), но получит случайный элемент из массива.

Syntax

var randomElement = myArray.getRandom();

Переменная randomElement теперь представляет собой случайно выбранный элемент внутри myArray.

Копия массива

MooTools позволяет скопировать массив с помощью функции $ A (). Ниже приводится синтаксис функции $ A ().

Синтаксис

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

Добавить элемент в массив

Есть два разных метода добавления элементов в массив. Первый метод позволяет добавлять элементы по одному или объединять два разных массива в один.

включают()

Метод include () используется для добавления элемента в массив элементов DOM. Например, рассмотрим следующий HTML-код, который содержит два элемента div и один элемент span под одним заключенным div:body_div.

Syntax

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

Если в приведенном выше коде мы вызовем метод getElements ('div') для body_divelement, мы получаем один и два div, но элемент span не входит в массив. Если вы хотите добавить его в массив, который вы вызываетеinclude()для переменной массива. Взгляните на следующий сценарий.

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

Теперь myArray содержит элементы div и span.

комбинировать ()

Этот метод используется для объединения элементов одного массива с элементами другого массива. Это также позаботится о дублировании контента. Например, рассмотрим следующий HTML-код, который содержит два элемента div и два элемента span под одним и закрытым элементом div: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>

В приведенном выше коде вызовите метод getElements ('div') для body_divэлемент. Вы получаете один и два div. Вызов метода $$ ('. Class_name') выбирает два элемента span. Теперь у вас есть один массив элементов div и другой массив элементов span. Если вы хотите объединить эти два массива, вы можете использовать метод объединения (). Взгляните на следующий сценарий.

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

Теперь myArray содержит все элементы переменной newArrayToArray.

Example

Это поможет вам понять массивы в MooTools. Предположим, мы применяем цвет фона к массиву элементов, который содержит div и span. Взгляните на следующий код. Здесь второй массив элементов не принадлежит ни к какому идентификатору или группе классов, поэтому он не отражает никакого цвета фона. Взгляните на следующий код.

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

Вы получите следующий вывод -

Output