Уроки Mootools – Урок 2 – Селекторы


Если Вы все еще не сделали этого, “ласкаво просимо” пролистать, а лучше почитать, Введение в Mootools, наш первый урок из серии “Курс подготовки юного бойца”, в котором мы обсудили как устанавливаются скрипты Mootools и как вызывать скрипты в событии domready.

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

Основы

$();

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

//выбирает элемент с ID 'body_wrap'
$('body_wrap');

<div id="body_wrap">
</div>

.getElement();

.getElement(); дополняет функцию $, позволяя, таким образом, конкретизировать свой выбор. Например, можно выбрать элемент с ID “bodywrap” с помощью функции $, после чего выбрать первый по счету элемент в нем. .getElement(); выбирает только один элемент и возвращает только первый, если были найдены более одного. Если в качестве параметра .getElement(); будет указан класс, функция вернет первый элемент в списке с таким классом, а не массив элементов. Если нужно выбрать несколько элементов, следует использовать функцию .getElements();, описанную ниже.

//выбирает первый якорь, находящийся в элементе с ID 'body_wrap'
$('body_wrap').getElement('a');
//выбирает элемент с ID 'special_anchor', который находится в элементе 'body_wrap'
$('body_wrap').getElement('#special_anchor');
//выбирает первый элемент с классом 'special_anchor_class', который находится в элементе 'body_wrap'
$('body_wrap').getElement('.special_anchor_class');

<div id="body_wrap">
        <a href="#">якорь</a>
        <a href="#">еще один якорь</a>
        <a id="special_anchor" href="#">специальный якорь</a>
        <a class="special_anchor_class" href="#">специальный якорь</a>
        <a class="special_anchor_class" href="#">еще один специальный якорь</a>
</div>

$$();

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

//все div-ы на странице<br />
$$('div');<br />
//выбирает элемент с ID "id_name" и все divы
$$('#id_name', 'div');

<div>
    <div>a div</div>
    <span id="id_name">текст тега</span>
</div>

.getElements();

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

//выбирает все  якоря, заключенные в элементе с ID 'body_wrap'
$('body_wrap').getElements('a');
//выбирает все элементы с классов 'special_anchor_class', находящиеся в элементе 'body_wrap'
$('body_wrap').getElements('.special_anchor_class');

<div id="body_wrap">
        <a href="#">якорь</a>
        <a href="#">еще один якорь</a>
        <a class="special_anchor_class" href="#">специальный якорь/a>
        </a><a class="special_anchor_class" href="#">еще один специальный якорь</a>
</div>

Использование операторов

Операторы

В Mootools 1.2 есть поддержка нескольких операторов, которые позволяют еще точнее отфильтровать выбранные элементы. Операторы можно использовать в .getElements();, чтобы включать или исключать определенные результаты поиска. Mootools поддерживает 4 операторы, каждый из которых можно использовать для выбора элемента input по его имени:

= – ровняется

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

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

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

$= – заканчивается на

//выбирает элемент <code>input</code> с именем заканчивающимся на "number"
$('body_wrap').getElements('input[name$=number]');

!= не ровно (прим. перевод.: и это не удивительно!)

// выбирает элемент <code>input</code>, у которого имя не "address"
	$('body_wrap').getElements('input[name!=address]');

<div id="body_wrap">
    <input name="address" type="text" />
    <input name="phone_number" type="text" /> <!-- все 4 примера выбрали бы этот элемент -->
</div>

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

Селекторы очередности элементов

even

Этот простой селектор следует использовать, когда нужно выбрать элементы под четным номером порядка. Помните, что при его использовании порядковый номер первого элемента 0, поэтому он будет четным.

// выбирает все четные <code>div</code>ы
$$('div:even');

<div>Четный</div><!--вышеуказанный пример выберет этот элемент-->
<div>Нечетный</div>
<div>Четный</div><!--вышеуказанный пример выберет этот элемент-->
<div>Нечетый</div>

odd

К этому селектору относится все тоже самое, что и к even, только этот выбирает нечетные элементы.

// выбирает все нечетные <code>div</code>ы
$$('div:odd');

<div>Четный</div>
<div>Нечетный</div><!--вышеуказанный пример выберет этот элемент-->
<div>Четный</div>
<div>Нечетый</div><!--вышеуказанный пример выберет этот элемент-->

.getParent();

С помощью селектора .getParent();

можно выбрать родителя какого-либо элемента.

//выбирает родителя элемента с ID 'child_id'
$('child_id').getParent();

<div id="parent_id"> <!--Вышеуказанный пример вернул бы этот элемент -->
    <div id="child_id">Четный</div>
</div>

Примеры

Каждая разработка пользовательского интерфейса, написанного на Mootools, начинается с селекторов. Ниже представлены простые примеры того, как можно использовать селекторы для манипулирования элементами DOM-a.

//установить цвет заднего плана всех элементов span на #eee
$$('span').setStyle('background-color', '#eee');
//установить цвет заднего плана всех нечетных элементов в элементе с ID "body_wrap" на "#eee"
$$('span:odd').setStyle('background-color', '#eee');
//установить задний план всех элементов с классом "middle_spans" на "#eee"
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');

<div id="body_wrap">
    <span>Четный</span>
    <span class="middle_spans">Нечетный</span>
    <span class="middle_spans">Четный</span>
    <span>Нечетный</span>
</div>

Закругляемся…

В Интернете, на специализированных сайтах есть еще полно информации о селекторах в Mootools. И, стоит заметить, намного более познавательная, чем та, представленная мною в данном уроке, т.к. я представил вам лишь ознакомительную часть того, что можно делать с помощью селекторов Mootools. Если у вас есть познания английского, могу посоветовать Вам записи официальной документации Mootools об элементах и о селекторах, а также записи в блоге сайта mootools.net о селекторе $$ и о том, насколько он разнообразен. После окончания нашего курса, я все еще планирую переводить другие интересные статьи с зарубежных сайтов, так что если у кого-либо есть запросы на понимание или просмотр каких-либо интересных материалов на русском языке, можете смело написать мне об этом. Я рассмотрю все предложения!

Ну что ж… На этом пока все. Надеюсь, кому-то пригодится этот урок так же, как он пригодился мне. В следующем уроке мы поговорим о массивах в Mootools, так что е пропадайте! ;)

, , ,

  1. #1 by Алексей on 27.11.2009 - 9:37 am

    В примере где: "установить цвет заднего плана всех нечетных элементов в элементе с ID "body_wrap" на "#eee"
    "
    скорее всего должно быть так:
    $(‘body_wrap’).getElements(‘span:odd’).setStyle(‘background-color’, ‘#ff0000′);

    • #2 by proglammer on 27.11.2009 - 9:32 pm

      да, наверное так будет правильнее, т.к. в твоем коде идет выбор только по элементу body_wrap, а в моем – выбор общий, по всему ДОМу. Но для моего ХТМЛ кода тоже правильно.

(никто не узнает)

Код на картинке: