Спецпредложение!
Только в сентябре вы можете купить
DVD "Энциклопедия веб-мастера:
Создание сайта от А до Я" по специальной
осенней цене.
Подробнее...
*
Мастерская
jQuery in Action. Глава 2
Как я и обещал, вторая глава из книги «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.
