Как я и обещал, вторая глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Как и из первой главы, выбрал все самое вкусное и интересное ;-)

Напоминаю, что первую главу можно прочесть здесь.

Глава 2. Создание наборов вложенных элементов.

2.1 Выборка элементов.

2.1.1 Использование CSS селекторов.

В jQuery используются стандартные CSS-селекторы. Вы наверняка с ними знакомы. Вот несколько примеров, чтобы освежить знания:

• a – будут выбраны все ссылки (<a>);
• #someid – будет выбран элемент с id = someid;
• .someclass – будут выбраны все элементы класса someclass;
• a#someid.someclass — будeт выбрана ссылка с id = someid класса someclass;
• p a.someclass – будут выбраны все ссылки класса someclass внутри абзаца (<p>).

Таким образом, для того, чтобы использовать селектор в jQuery, достаточно написать его внутри известной нам уже конструкции $(), например вот так:

$(“p a.someclass”)

2.1.2 Селекторы по атрибутам, детей и контейнеров.

Это более продвинутые селекторы, используемые для выбора дочерних элементов, элементов, следующих за другими элементами DOM и элементов с атрибутами, удовлетворяющими определенным условиям.

При использовании селектора детей (child selector) родительский и его прямой дочерний элементы разделяются символом >, например

p > a

Если ссылка будет вложенной в какой-то промежуточный элемент, она выбрана не будет.

Разберем селекторы по атрибутам (attribute selectors).

Например, мы хотим выбрать все ссылки, указывающие на сторонние ресурсы нашего сайта. Делается это так:

a[href^=http://]

Этот селектор указывает на все ссылки, значение href которых начинается на http://. Символ ^ указывает на то, что искомое выражение будет вначале строки, в которой будет вестись поиск.

Другой вариант селектора по атрибутам:

form[method]

Селектор выберет все <form> у которых указан атрибут method.

Для того, чтобы выбрать определенное значение атрибута, составляем следующее выражение:

input[type=text]

Думаю, тут все понятно.

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

div[title^=my]

Таким образом мы выберем все <div>, title которых начинается на my.

А как насчет поиска в конце строки? Смотрим:

a[href$=.pdf]

C помощью этого селектора мы выберем все ссылки на PDF файлы.

Чтобы искать значение в любом месте строки делаем следующее:

a[href*=jquery.com]

Догадались? Это будут любые ссылки на сайт jquery.com.

Следующий вид селектора – это селектор контейнеров (container selector):

li:has(a)

Этот селектор выберет все элементы <li>, содержащие <a>. При этом можно использовать до одного уровня вложений таких селекторов:

li:has(p:has(a))

Следующий вариант работать уже не будет:

li:has(p:has(a:has(b)))

Ниже таблица основных CSS селекторов, поддерживаемых jQuery.

Селектор	Описание
*	Все элементы
Е	Все элементы Е
E F	Все элементы F следующие за E
E>F	Все элементы F, непосредственно дочерние для E
E+F	Все элементы F, непосредственно предшествующие перед E, причем F и E братья.
E~F	Все элементы F, предшествующие перед E, причем F и E братья.
E:has(F)	Все элементы E, имеющие хотя бы один дочерний элемент F
E.C	Все элементы E класса С. Для выбора всех элементов класса С используйте селектор *.С
E#I	Все элементы E с идентификатором I. Для выбора всех элементов с идентификатором I используйте селектор *#I
E[A]	Все элементы E с атрибутом A произвольного значения
E[A=V]	Все элементы E с атрибутом A равным V
E[A^=V]	Все элементы E с атрибутом A, значение которого начинается на V
E[A$=V]	Все элементы E с атрибутом A, значение которого оканчивается на V
E[A*=V]	Все элементы E с атрибутом A, значение которого содержит V

2.1.3 Выбор по позиции.

Иногда необходимо выбрать элементы по их позиции относительно других элементов на странице. В jQuery это предусмотрено.

Смотрим:

a:first

Так будут выбран первый элемент <a> на странице.

p:odd

Такой селектор выберет все нечетные элементы на странице. Другой вариант:

p:even

выберет четные.

Ниже в таблице другие примеры выбора элементов по позиции в документе.

Селектор	Описание
:first	Первый элемент на странице. li a:first вернет первую ссылку внутри элемента списка li.
:last	Последний элемент на странице.
:odd	Все нечетные элементы на странице.
:even	Все четные элементы на странице.
:first-child	Первый дочерний элемент. li:first-child вернет первый элемент каждого списка.
:last-child	Последний дочерний элемент.
:only-child	Возвращает элементы, имеющие по одному дочернему элементу.
:nth-child(n)	Возвращает n-ый дочерний элемент. Например, li:nth-child(2) вернет второй элемент каждого списка.
:nth-child(even|odd)	Четный или нечетный дочерний элемент. Например, : вернет четные элементы каждого списка.
:nth-child(Xn+Y)	Возвращает дочерний элемент, порядок которого найден по формуле. Если Y равен 0, его можно опустить. С примером станет все понятнее: li:nth-child(3n) вернет элементы 0, 3, 6 и т.д., li:nth-child(5n+1) вернет элементы 1,6,11 и т.д.
:eq(n)	Вернет n-ый элемент.
:gt(n)	Вернет элемент, стоящий после n-ого.
:lt(n)	Вернет элемент, стоящий перед n-ым.

Такой нюанс: селектор nth-child начинает считать n с 1, кроме nth-child(Xn+Y), который начинает считать n все-таки с нуля, тогда как остальные селекторы приведенные в таблице, считают элементы с 0.

Пример:

Номер элемента	n	5n	5n+2
0	n/a	n/a
1	+
2	+		+
3	+
4	+
5	+	+
6	+
7	+		+
8	+
9	+
10	+	+
11	+
12	+		+

2.1.4 Использование специальных селекторов jQuery

CSS селекторы это, конечно, хорошо, но иногда нам нужно выбрать особые элементы, например, все чекбоксы, отмеченные пользователем. Для этого jQuery предлагает воспользоваться селектором :checked. Например, в такой форме:

input:checked

Ниже таблица таких селекторов.

Селектор	Описание
:animated	Выбирает элементы, с которыми производится анимация (подробнее об этом будет рассказано в главе 5).
:button	Выбирает все кнопки (input[type=submit], input[type=reset], input[type=button], или просто button).
:checkbox	Выбирает все чекбоксы (input[type=checkbox]).
:checked	Выбирает все отмеченные чекбоксы.
:contains(foo)	Выбирает элементы, содержащие текст foo.
:disabled	Выбирает все элементы со свойством disabled.
:enabled	Выбирает все элементы со свойством enabled.
:file	Выбирает поля загрузки файлов (input[type=file]).
:header	Выбирает все заголовки (от <h1> до <h6>).
:hidden	Выбирает все скрытые элементы.
:image	Выбирает все input типа image (input[type=image]).
:input	Выбирает элементы формы (input, select, textarea, button).
:not(filter)	Выбирает элементы, обратные фильтру (об этом подробнее после таблицы).
:parent	Выбирает все элементы, у которых есть не пустые дети.
:password	Выбирает поля для ввода пароля (input[type=password]).
:radio	Выбирает элементы radio (input[type=radio]).
:reset	Выбирает кнопки сброса (input[type=reset] или button[type=reset]).
:selected	Выбирает все элементы со свойством selected.
:submit	Выбирает кнопки отправки формы (input[type=submit] или button[type= submit]).
:text	Выбирает только текстовые поля (input[type=text]).
:visible	Выбирает только видимые элементы.

Допускается сочетание таких селекторов, например:

:radio:checked

или

:checkbox:checked:enabled

Для инверсии фильтра используется указанный в таблице фильтр :not:

input:not(:checkbox)

Так мы выберем все элементы input, кроме чекбоксов.

Обратите внимание, что

div p:not(:hidden) – правильно

div :not(p:hidden) – не правильно.

2.2 Создание HTML.

Создание кода делается через известную нам по первой главе функцию $(). Например,

$(“<div>Привет</div>”)

Если мы хотим создать пустой элемент <div>, это можно сделать короче:

$(“<div>”)

что эквивалентно $(“<div></div>”) или $(“<div/>”).

При этом таким укороченным способом нельзя создавать полноценные элементы <script>.

2.3 Управление вложенными элементами.

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

2.3.1 Определение размера вложения.

Набор вложенных элементов в jQuery очень похож на массив JavaScript. У него даже есть свойство length, содержащее количество вложенных элементов.

Метод size() поможет нам узнать это число. Например, подсчитаем количество ссылок на странице:

$(‘#someDiv’).html(‘На странице ’+$(‘a’).size()+’ ссылок.’);

При этом поиск проходил внутри элемента с идентификатором #someDiv. Метод html() будет рассмотрен в следующей главе, пока что примите это как есть.

2.3.2 Извлечение элементов из набора вложений.

Как говорилось ранее, набор вложений очень похож на массив JavaScript, поэтому допускается извлечение элементов из набора простой нумерацией элементов по индексу, например:

$(‘img[alt]’)[0]

выдаст нам первый элемент из всех <img> на странице с атрибутом alt.

Кроме того, в jQuery есть специальная функция get(), выполняющая такое же действие:

$(‘img[alt]’).get(0)

Если индекс элемента не указывается, получим весь набор элементов.

А что делать, если нам нужно выполнить обратную операцию — найти индекс определенного элемента? Для этого есть функция index().

var n = $(‘img’).index($(‘img#findMe’));

Так мы узнаем индекс картинки с идентификатором findMe среди всех изображений на странице.

Если искомый элемент не найден, функция вернет значение -1.

2.3.3 Изменение размеров набора.

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

Для начала такой пример: мы хотим выбрать все изображения, у которых есть атрибут title или alt. Сделаем это так:

$(‘img[alt],img[title]’)

То же самое делается специальным методом add():

$(‘img[alt]’).add(‘img[title]’)

То есть метод соединяет селекторы вместе, объединяя их логическим ИЛИ. Внутри метода add() может быть строка-селектор, фрагмент кода HTML (в этом случае элементы будут созданы и добавлены к набору) или элементы DOM (которые будут добавлены к набору). Например:

$(‘p’).add(‘<div>Привет, хабралюди!</div>’)

Фильтрация содержимого набора

Исключить элемент из набора по какому-либо параметру позволяет метод not().

Допустим, нам необходиом выбрать все изображения, кроме тех, у которых в атрибуте alt содержиться текст puppy. Для этого напишем:

$(‘img[title]’).not(‘[title*=puppy]’)

Стоит отметить, что в метод not() не передается тип элемента, а только параметр, по которому элемент следует исключить из набора (то есть мы написали not(‘[title*=puppy]’) вместо not(‘img[title*=puppy]’)).

А что делать, если нужнол отфильтровать набор каким-нибудь выражением? Для этого есть метод filter(), который применяет переданную ему функцию каждому элементу набора. Например, выберем все элементы таблицы, содержащие только численные значения:

$(‘td’).filter(function(){return this.innerHTML.match(/^d+$/)})

Если функция вернет false, элемент будет исключен из набора.

Создание поднаборов

Иногда возникает потребность выделить из нашего набора часть элементов, основываясь на их порядке в наборе. Для этого в jQuery есть специальный метод slice(), который возвращает новый набор элементов (при этом старый остается без изменений). Синтакс его следующий:

slice(begin,end)

где begin – номер первого элемента, с которого начинать выделять новый поднабор (нумерация начинается с 0), а end – соответственно номер элемента, который уже не будет включен в набор (если его не писать, в поднабор будет выделена вся оставшаяся часть набора).

Например, выберем первые четыре элемента набора:

$(‘*’).slice(0,4)

2.3.4 Создание наборов на основе взаимоотношений.

jQuery позволяет создавать новый набор на основе старого, основываясь на положении вложенного элемента относительно других. Ниже в таблице приведены эти методы и их описание.

Селектор	Описание
children()	Возвращает набор уникальных детей элемента.
contents()	Возвращает все дочерние узлы в наборе элементов (включая текстовые) или в содержимом документа, если он представлен как фрейм.
next()	Вернет набор всех последующих уникальных братьев элемента.
nextAll()	Вернет всех последующих братьев элемента.
parent()	Вернет уникальных прямых родителей элемента.
parents()	Вернет всех уникальных предков элементов.
prev()	Вернет набор всех предыдущих уникальных братьев элемента.
prevAll()	Вернет набор всех предыдущих братьев элемента.
siblings()	Вернет набор всех уникальных братьев элемента.

Например, $('li').children() вернет нам набор элементов, вложенных в <li>.

Более подробно тут.

2.3.5. Еще немного способов работы с вложенными элементами.

Метод find() возвращает новый набор, содержащий элементы, удовлетворяющие селектору.

Например, выберем все цитаты <cite> внутри параграфа <p> из набора, содержащегося в переменной wrappedSet:

wrappedSet.find(‘p cite’)

Метод contains() вернет нам набор элементов, внутри которых содержиться переданная методу строка. Например:

$(‘p’).contains(‘Lorem ipsum’)

Пример вернет нам набор элементов <p>, содержащих текст «Lorem ipsum».

И последний метод в данном разделе помогает проверить, содержит ли набор по крайней мере один элемент, соответствующий переданному ему селектору.

Метод is() вернет true если хотя бы один элемент соответствует или false если не соответствует селектору. Пример:

var hasImage = $(‘*’).is(‘img’);

Таким образом переменной hasImage будет присвоено значение true, если на странице есть элемент <img>.

2.3.6 Управление цепочками jQuery.

В jQuery есть возможность соединять методы в цепочки, что дает нам выполнять эффективные операции. Рассмотрим пару методов, которые помогут нам в дальнейшем управлять этими цепочками методов.

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

$(‘img’).clone().appendTo(‘#somewhere’);

В результате будет создано два набора: один из всех элементов <img> на странице, а второй из копии этих элементов. Метод clone() вернет нам этот второй набор и к нему будет применен метод appendTo(). А что делать, если мы хотим, например, изменить класс оригинального набора после того, как он будет продублирован. То есть сделать какое-либо действие не с копией, а с оригиналом? Ведь после метода clone() работать мы будем именно с копией.

В такой ситуации нам на помощь придет метод end(). С помощью него мы вновь переключимся на работу с исходным набором. Смотрим пример:

$(‘img’).clone().appendTo(‘#somewhere’).end().addClass(‘beenCloned’);

В данном случае addClass() будет применен к оригинальному набору, тогда как без end() он был бы применен к клону.

И последний метод в данной главе andSelf(), применяет метод к двум предшествующим наборам. Хороший пример отсюда (в книге очень мало информации):

$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");

Мы ищем все элементы div и все все элементы p внутри них, а затем назначаем им два имени класса. Но, обратите внимание, если в первой строке мы добавили к набору элементов p еще и предыдущий div, то во второй строке мы добавили класс, определяющий цвет фона только для элементов p внутри div, но никак не для самого элемента div.

Вот и подошла к концу вторая глава. Спасибо за внимание, опять же жду комментариев, исправлений, если что где не правильно перевел и, конечно же, критики.

Также напомню, что эти и следующие статьи вы всегда сможете найти в моем блоге, там же можно и подфидиться;-)