Mootools 1.2 за 30 дней — День 2 — Селекторы


Селекторы Mootools 1.2

Если вы еще не прочитали Mootools 1.2 за 30 дней — День 1 — Введение в библиотеку, то самое время это сделать. В первый день мы изучили, как установить Mootools 1.2 и как вызывать ваши скрипты из обработчика события domready.

Mootools 1.2 за 30 дней

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

Основы

$()

Функция $ основной селектор в Mootools. С ее помощью вы можете выбрать DOM элемент по ID.

  1. <div id="body_wrap">
  2. </div>
  1. //выбрать элмент с ID 'body_wrap'
  2. $('body_wrap');

.getElement()

.getElement() расширяет возможности $, что позволяет уточнить свой выбор. Например, вы можете выбрать элемент по ID с помощью $, а затем выбрать первую ссылку, содержащуюся в этом элементе. .getElement() — выбирает только один элемент и возвращает первый, даже если существует несколько вариантов. Если передать .getElement() имя класса, то получим первый элемент, содержащий этот класс, а не массив всех элементов с этим классом. Для выбора нескольких элементов существует .getElements(), которая будет рассмотрена ниже.

  1. <div id="body_wrap">
  2.         <a href="#">ссылка</a>
  3.         <a href="#">другая ссылка</a>
  4.         <a id="special_anchor" href="#">ссылка с ID 'special_anchor'</a>
  5.         <a class="special_anchor_class" href="#">ссылка с классом 'special_anchor_class'</a>
  6.         <a class="special_anchor_class" href="#">другая ссылка с классом 'special_anchor_class'</a>
  7. </div>
  1. //выбрать первую ссылку внутри элемента с ID 'body_wrap'
  2. $('body_wrap').getElement('a');
  3. //выбрать элемент с ID 'special_anchor' внутри элемента с ID 'body_wrap'
  4. $('body_wrap').getElement('#special_anchor');
  5. //выбрать первый элемент с классом 'special_anchor_class' внутри элемента с ID 'body_wrap'
  6. $('body_wrap').getElement('.special_anchor_class');

$$()

Функция $$() позволяет быстро выбрать несколько элементов и поместить их в массив (вид списка, позволяющий вам управлять его элементами, извлекать элементы и сортировать различными способами). Вы можете выбрать элемент по имени (например, div, a, img) или по ID, также возможно сочетание нескольких способов.

  1. <div>
  2.     <div>DIV</div>
  3.     <span id="id_name">SPAN</span>
  4. </div>
  1. //выбрать все элементы div на странице
  2. $$('div');
  3. //выбрать элемент с ID 'id_name' и все элементы div на странице
  4. $$('#id_name', 'div');

.getElements()

.getElements() аналогична уже рассмотренной выше .getElement(), за исключением того, что .getElements() возвращает все элементы, соответствующие критериям выборки, и помещает их в массив. Вы можете использовать .getElements() так же как бы вы использовали .getElement().

  1. <div id="body_wrap">
  2.         <a href="#">ссылка</a>
  3.         <a href="#">другая ссылка</a>
  4.         <a id="special_anchor" href="#">ссылка с ID 'special_anchor'</a>
  5.         <a class="special_anchor_class" href="#">ссылка с классом 'special_anchor_class'</a>
  6.         <a class="special_anchor_class" href="#">другая ссылка с классом 'special_anchor_class'</a>
  7. </div>
  1. //выбрать все ссылки внутри элемента с ID 'body_wrap'
  2. $('body_wrap').getElements('a');
  3. //выбрать все элементы с классом 'special_anchor_class' внутри элемента с ID 'body_wrap'
  4. $('body_wrap').getElements('.special_anchor_class');

Включение и исключение из результатов с помощью операторов

Mootols 1.2 поддерживает несколько операторов, которые позволяют вам уточнить условия выбора элементов. Вы можете использовать операторы вместе с .getElements() включая или исключая из выбора определенные элементы. Mootols поддерживает 4 вида операторов (на самом деле их 7, прим. Переводчика), каждый из которых может быть использован для выбора элемента по имени.

  1. <div id="body_wrap">
  2.     <input name="address" type="text" />
  3.     <!— все 4 примера выбирают элемент расположенный ниже —>
  4.     <input name="phone_number" type="text" />
  5. </div>

= : равно

  1. //выбрать элементы input с именем 'phone_number'
  2. $('body_wrap').getElements('input[name=phone_number]');

^= : начинается с

  1. //выбрать элементы input с именем, начинающимся на 'phone'
  2. $('body_wrap').getElements('input[name^=phone]');

$= : оканчивающимся на

  1. //выбрать элементы input с именем, оканчивающимся на 'number'
  2. $('body_wrap').getElements('input[name$=number]');

!= : не равно

  1. //выбрать элементы input с именем, не равным 'address'
  2. $('body_wrap').getElements('input[name!=address]');

Для использования оператора сначала определяется тип элемента (input), затем выбирается атрибут, по которому будут фильтроваться элементы (name), указывается оператор сравнения и строка, с которой будет производиться сравнение.

Селекторы, основанные на положении элементов

even (четный)

Используйте данный селектор для выбора четных элементов. Так как нумерация начинается с 0, то первый элемент всегда четный.

  1. <div>Even</div><!— пример выберет этот элемент —>
  2. <div>Odd</div>
  3. <div>Even</div> <!— пример выберет этот элемент —>
  4. <div>Odd</div>
  1. //выбрать все четные элементы div
  2. $$('div:even');

odd (нечетный)

То же что и even, за исключением того, что этот селектор выбирает нечетные элементы.

  1. <div>Even</div>
  2. <div>Odd</div> <!— пример выберет этот элемент —>
  3. <div>Even</div>
  4. <div>Odd</div> <!— пример выберет этот элемент —>
  1. // выбрать все нечетные элементы div
  2. $$('div:odd');

.getParent()

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

  1. <div id="parent_id"> <!— пример выберет этот элемент —>
  2.     <div id="child_id">Even</div>
  3. </div>
  1. // выбрать родительский элемент элемента с ID 'child_id'
  2. $('child_id').getParent();
В жизни бывают мероприятия, о которых потом вспоминаешь всю жизнь. И как иногда бывает жалко, что не было профессионального фотографа и видеооператора. В отличие от фотографии, видеосъёмка более сложная область и доверять ее нужно профессионалам.

Примеры

Любая разработку пользовательского интерфейса на Mootools начинается с селекторов. Вот некоторые очень простые примеры того как можно использовать селекторы для управления элементами DOM.

  1. <div id="body_wrap">
  2.     <span>Even</span>
  3.     <span class="middle_spans">Odd</span>
  4.     <span class="middle_spans">Even</span>
  5.     <span>Odd</span>
  6. </div>
  1. //установить цвет фона #eee для всех элементов span
  2. $$('span').setStyle('background-color', '#eee');
  3. //установить цвет фона #eee для всех дочерних (находящихся внутри элемента), нечетных элементов элемента с ID #body_wrap
  4. $$('span:odd').setStyle('background-color', '#eee');
  5. // установить цвет фона #eee для всех элементов с класса .middle_spans
  6. $('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');

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

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

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

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

  • Масса замечательных селекторов описана в разделе Element
  • Кроме того, прочитайте раздел Selectors

Публикация в блоге Mootools о селекторах $$()

Это довольно интересная публикация на mootools.net о селекторе $$ и его многообразии. В ней представлено достаточно много примеров использования этого селектора, и это стоит прочитать.

Slickspeed селекторов

Это экспериментальная страница для оценки скорости и правильности работы селекторов в различных библиотеках. Но, самое интересное там, в используемых в примерах селекторах. Все селекторы работают с $$().

Селекторы W3C

Библиотека Mootools также позволяет использовать возможности псевдо-селекторов (о чем свидетельствует slickspeed, если вы, конечно, посмотрели предыдущую ссылку). Вот публикация W3C о селекторах, хотя она возможно и старая (но вы найдете там список доступных селекторов). Я конечно не уверен, что все указанные там селекторы поддерживаются в Mootools, но большинство из них точно. Очень хотелось бы узнать подробности по этому вопросу.

Перевод статьи: 30 Days of Mootools 1.2 Tutorials — Day 2 — Selectors

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

Tags:

One Response to “Mootools 1.2 за 30 дней — День 2 — Селекторы”

  1. Спасибо! Очень доступно все описываете! Жду от вас продолжения!

Leave a Reply