Учебники

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

Сентябрь 8, 2018

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

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

каждый () метод

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

<div>One</div>
<div>Two</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 (), но получает случайный элемент из массива.

Синтаксис 

var randomElement = myArray.getRandom();

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

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

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

Синтаксис 

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

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

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

включают()

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

Синтаксис 

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

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

скрипт 

//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 .

Синтаксис 

<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 . Вы получаете один и два дел. Вызов метода $$ (‘. Class_name’) выбирает два элемента span. Теперь у вас есть один массив элементов div и другой массив элементов span. Если вы хотите объединить эти два массива, вы можете использовать метод объединить (). Посмотрите на следующий скрипт.

скрипт 

//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.

пример

Это поможет вам понять массивы в 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>

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

Выход

43
Share: