На этом шаге мы начнем рассматривать пример использования селекторов.
Библиотека jQuery поддерживает практически все селекторы, включенные в спецификации CSS с 1 по 3, с которыми можно ознакомиться на сайте консорциума World Wide Web Consortium: http://www.w3.org/Style/CSS/#specs. Этот факт позволяет разработчикам развивать свои веб-сайты, не беспокоясь о том, что какие-то браузеры (в частности, Internet Explorer 6) могут не понимать некоторые селекторы при условии, что в браузеры включена поддержка JavaScript.
Примечание. Опытные разработчики, использующие jQuery, всегда должны применять в своем программном коде концепции прогрессивного улучшения (progressive enhancement) и постепенной деградации (graceful degradation), чтобы обеспечить точное отображение страницы, даже если с отключенной поддержкой 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. Традиционный список
Многоуровневый список отображается в точности так, как и следовало ожидать, - маркированные элементы расположены вертикально и выровнены в соответствии с их уровнями.
На следующем шаге мы рассмотрим оформление уровней списка.
