Mootools 1.2 за 30 дней — День 3 — Введение в использование массивов


Введение в использование массивов в библиотеке Mootools 1.2

На второй день мы изучали селекторы «Mootools 1.2 за 30 дней — День 2 — Селекторы». Многие из них возвращают массивы (специальный список, дающий контроль над его содержимым). Сегодня мы разберемся, как использовать массивы для управления элементами DOM.

Mootools 1.2 за 30 дней

Основы

.each()

Метод .each() — ваш лучший друг в работе с массивами. Он обеспечивает простой способ перебора элементов массива, применяя к каждому из его элементов нужный вам сценарий. Например, вам необходимо для каждого элемента div вызвать функцию alert (функция выводит окно предупреждение с текстом, который передан ей в параметре):

  1. <div>One</div>
  2. <div>Two</div>
  1. //этот код выдаст два предупреждения, для HTML указанного выше
  2. //по одному для каждого div
  3. $$('div').each(function() {
  4.     alert('a div');
  5. });

.each() не обязательно использовать с селектором $$(), еще один способ создать массив (об этом мы говорили во 2 дне) — использовать .getElements().

  1. <div id="body_wrap">
  2.     <div>One</div>
  3.     <div>Two</div>
  4. </div>
  1. $('body_wrap').getElements('div').each(function() {
  2.     alert('a div');
  3. });

Другой способ сохранить массив в переменной, а затем использовать метод .each() с этой переменной:

  1. //сначала мы объявляем переменную "var VARIABLE_NAME"
  2. //затем используя знак равенства, присваиваем переменной
  3. //массив элементов div
  4. var myArray = $('body_wrap').getElements('div');
  5. //сейчас мы можем использовать нашу переменную как селектор
  6. myArray.each(function() {
  7.     alert('a div');
  8. });

И наконец, вы можете использовать свою функцию для вызова из селектора или метода .each(). Более подробно использование функций мы рассмотрим в скудеющем дне. А сегодня просто создадим очень просто пример.

  1. var myArray = $('body_wrap').getElements('div');
  2. //to create a new function, you declare a variable just like before, then name it
  3. //чтобы создать новую функцию, мы объявляем переменную, затем
  4. //даем ей имя, после знака равенства пишем "function()" говоря о том ,что
  5. //определяем функцию и помещаем код функции между фигурными скобками:
  6. // { и }
  7. var myFunction = function() {
  8.     alert('a div');
  9. };
  10. //здесь мы вызываем определенную нами функцию из метода .each().
  11. myArray.each(myFunction);

Замечание: При вызове функции из метода .each() вам не нужно помешать в кавычки название функции.

Создание копии массива

$A

Библиотека Mootools предоставляет простую возможность копирования массивов: функция $A(). Позволяя создать другую переменную содержащую этот же массив.

  1. //создаем переменную содержащую массив
  2. var myArray = $('body_wrap').getElements('div');
  3. //создаем копию массива
  4. //создаем новую переменную "myCopy," и копируем в нее массив
  5. //содержащийся в переменной "myArray"
  6. var myCopy = $A(myArray);
  7. //теперь переменная myCopy содержит все элементы которые были в массиве myArray

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

.getLast()

Метод .getLast() позволяет получить последний элемент в массиве.

  1. //сначала получим массив
  2. var myArray = $('body_wrap').getElements('div');
  3. //теперь мы можем получить последний элмент массива
  4. var lastElement = myArray.getLast();

После выполнения этого кода в переменной lastElement будет содержится последний элемент массива myArray.

.getRandom()

Этот метод работает также как и .getLast(), за исключение того, что возвращает случайный элемент массива.

  1. var randomElement = myArray.getRandom();

Выполнив этот код, в переменной randomElement, вы получите случайный элемент массива myArray.

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

.include() — включить

С помощью этого метода, вы можете добавить новый элемент в массив. Просто вызовите метод .include() для любого селектора, передав в качестве параметра новый элемент. Возьмем следующий html код:

  1. <div id="body_wrap">
  2.     <div>one</div>
  3.     <div>two</div>
  4.     <span id="add_to_array">add to array</span>
  5. </div>

Вы можете создать массив выбрать все элементы div находящиеся внутри элемента div с ID ‘body_wrap’.

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

Чтобы добавить другой элемент в массив, сначала создадим переменную, содержащую этот элемент, а затем вызовем метод .include().

  1. //сначала создадим переменную содержащую добавляемый элмент
  2. var newToArray = $('add_to_array');
  3. //затем добавляем элемент в массив myArray
  4. myArray.include(newToArray);

Теперь массив содержит все элементы div находящиеся внутри элемента div с ID ‘body_wrap’ и элемент span с ID ‘add_to_array’.

.combine() — объединить

Метод .combine(), работает также как и метод .include() за исключением того, что данный метод позволяет добавлять новый массив в существующий массив. При этом нет необходимости беспокоиться о дублировании элементов, об этом позаботится метод .combine().

Например, для того чтобы получить два массива мы будем использовать следующий html код:

  1. <div id="body_wrap">
  2.     <div>one</div>
  3.     <div>two</div>
  4.     <span class="class_name">add to array</span>
  5.     <span class="class_name">add to array, also</span>
  6.     <span class="class_name">add to array, too</span>
  7. </div>

Создать два массива мы можем следующим способом:

  1. //создадим первый массив из элементов div находящихся внутри div с ID 'body_wrap'
  2. var myArray= $('body_wrap').getElements('div');
  3. //затем создадим второй массив из элементов с классом 'class_name'
  4. var newArrayToArray = $$('.class_name');

Теперь мы можем использовать метод .combine(), для объединения этих двух массивов. К тому же этот метод удалить дублирующиеся значения освободив нас от этого.

  1. //объединяем массив newArrayToArray с массивом myArray
  2. myArray.combine(newArrayToArray );

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

На сайте «downloadspeed.ru» Вы можете найти много чего интересного: программы, картинки, фильмы и книги. Много новостей в разделе Новости Hi-Tech индустрии. Присоединяйтесь…

Пример

Массивы позволяют перебрать все элементы и применить к каждому элементу функцию. Обратите внимание на параметр ‘item’, который мы передаем в функцию для получения текущего обрабатываемого элемента.

  1. <div id="body_wrap">
  2.     <div class="class_name">one</div><!— будет серый фон —>
  3.     <div>two</div>
  4.     <div class="class_name">three</div><!— будет серый фон —>
  5.     <span id="addtoarray">add to array</span><!— будет серый фон —>
  6.     <br /><span class="addMany">one of many</span><!— будет серый фон —>
  7.     <br /><span class="addMany">two of many</span><!— будет серый фон —>
  8. </div>
  1. //создаем массив содержащий все элементы с классом 'class_name'
  2. //в элементе div с ID 'body_wrap'
  3. var myArray = $('body_wrap').getElements('.class_name');
  4. //теперь создаем новый элемент для последующего добавления в массив
  5. var addSpan = $('addtoarray');
  6. //а сейчас создадим еще один массив содержащий элементы с классом 'addMany'
  7. var addMany = $$('.addMany');
  8. //добавляем к массиву myArray элемент addSpan
  9. myArray.include(addSpan);
  10. //и объединяем массив myArray с массивом addMany
  11. myArray.combine(addMany);
  12. //создадим функцию, которая будет обрабатывать каждый элемент в массиве
  13. var myArrayFunction = function(item) {
  14.  //в этой функции работаем с элементом item, который является
  15.  //текущим элементом в обрабатываемом массиве
  16.  item.setStyle('background-color', '#eee');
  17. }
  18. //вызываем функцию myArrayFunction для каждого элемента массива
  19. //myArray с помощью метода .each()
  20. myArray.each(myArrayFunction);

Для дальнейшего изучения

Это занятие не претендует на полное описание работы массивов и их возможностей, но надеюсь, что оно дало вам представление о их возможностях. Чтобы узнать больше вы можете обратиться к следующим источникам:

Вы можете скачать zip архив с материалами этого дня.

В архиве содержаться Mootools 1.2 Core, JS файл, HTML файл с примером который вы видите выше.

Перевод статьи: 30 Days of Mootools 1.2 Tutorials — Day 3 — Intro to Using Arrays

Похожие записи:

Tags:

2 комментария to “Mootools 1.2 за 30 дней — День 3 — Введение в использование массивов”

  1. Изучил сегодня день 2! А тут смотрю, уже и день 3 появился! За вами не успеваю!)))

  2. Неплохо неплохо продолжайте в том же духе.

Leave a Reply