Главная » Статьи » Web-программирование » JQuery

jQuery. Работа с элементами. Использование CSS селекторов

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


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

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

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

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

Code
$('p a.someclass')

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

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

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

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

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

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

Code
a[href^=http://]

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

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

Code
form[method]

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

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

Code
input[type=text]

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

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

Code
div[title^=my]

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

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

Code
a[href$=.pdf]

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

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

Code
a[href*=jquery.com]

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

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

Code
li:has(a)

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

Code
li:has(p:has(a));

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

Code
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


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

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

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


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

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

Code
input:checked

Таблица селекторов
СелекторОписание
:animated Выбирает элементы, с которыми производится анимация.
: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 Выбирает только видимые элементы.
Допускается сочетание таких селекторов


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

Code
:radio:checked

или

Code
:checkbox:checked:enabled

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

Code
input:not(:checkbox)

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

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

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

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


Создание HTML

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

Code
$('<div>Привет</div>');

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

Code
$('<div>');

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

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


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

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


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

Набор вложенных элементов в jQuery очень похож на массив JavaScript.
У него даже есть свойство length, содержащее количество вложенных элементов.
Метод size() поможет нам узнать это число.
Например, подсчитаем количество ссылок на странице:

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

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


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

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

Code
$('img[alt]')[0]

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

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

Code
$('img[alt]').get(0)

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

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

.
Code
var n = $('img').index($('img#findMe'));

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

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


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


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

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

Code
$('img[alt], img[title]')

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

Code
$('img[alt]').add('img[title]')

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

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

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

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

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

Code
$('img[title]').not('[title*=puppy]')

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

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

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

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


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

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

Code
slice(begin, end)

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

Code
$('*').slice(0,4)

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

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

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


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


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

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

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

Code
wrappedSet.find('p cite')

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

Code
$('p').contains('Lorem ipsum')

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

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

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

Code
var hasImage = $('*').is('img');

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


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

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

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

Code
$('img').clone().appendTo('#somewhere');

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

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

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

Code
$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

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

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

Code
$('div»).find('p'»).andSelf().addClass('border');
$('div').find('p').addClass('background');

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



Автор: Неймеш Роман
Источник: www.kpi.ua 



Категория: JQuery | Добавил: likbezz (19.05.2010)
Просмотров: 18298 | Теги: селектор, атрибут, jQuery, JavaScript, child, начинающих, selector, DOM, CSS, $()
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]