Шаг 11.
Библиотека jQuery.
Селекторы. Селекторы CSS

    На этом шаге мы начнем рассматривать пример использования селекторов.

    Библиотека 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. Традиционный список

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

    На следующем шаге мы рассмотрим оформление уровней списка.




Предыдущий шаг Содержание Следующий шаг