На этом шаге мы начнем рассматривать пример использования селекторов.
Библиотека jQuery поддерживает практически все селекторы, включенные в спецификации CSS с 1 по 3, с которыми можно ознакомиться на сайте консорциума World Wide Web Consortium: http://www.w3.org/Style/CSS/#specs. Этот факт позволяет разработчикам развивать свои веб-сайты, не беспокоясь о том, что какие-то браузеры (в частности, Internet Explorer 6) могут не понимать некоторые селекторы при условии, что в браузеры включена поддержка JavaScript.
В ходе изучения принципов работы библиотеки jQuery с селекторами CSS мы будем использовать структуру, присутствующую на многих веб-сайтах и часто применяемую для навигации, - многоуровневый не упорядоченный список.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=win-1251"/> <title>Произведения Пушкина</title> </head> <body> <ul id="selected-plays"> <li>Сказки <ul> <li><a href="/asyoulikeit/">Сказка о золотом петушке</a></li> <li>Сказка о Попе и о работнике его Балде</li> <li>Сказка о мертвой царевне и о семи богатырях</li> <li>Сказка о царе Салтане</li> </ul> </li> <li>Драматические произведения <ul> <li><a href="godunov.pdf">Борис Годунов</a></li> <li>Каменный гость</li> <li>Моцарт и Сальери</li> </ul> </li> <li>Романы и повести <ul> <li>Дубровский (<a href="mailto:dubrovsky@king.ru">email</a>) <ul> <li>Глава I</li> <li>Глава II</li> </ul> </li> <li><a href="http://www.pushkin.ru/eg_nochy.htm">Египетские ночи</a></li> <li>Пиковая дама</li> </ul> </li> </ul> </body> </html>
Обратите внимание, что первый тег <ul> имеет идентификатор selected-plays, но ни один из тегов <li> не имеет класса CSS. Без применения стилей этот список выглядит, как показано на рисунке 1:
Рис.1. Традиционный список
Многоуровневый список отображается в точности так, как и следовало ожидать, - маркированные элементы расположены вертикально и выровнены в соответствии с их уровнями.
На следующем шаге мы рассмотрим оформление уровней списка.