Page 12 - jQuery для начинающих
P. 12
Это пример простого и правильного HTML5 с небольшим добавлением CSS3. Давайте
разберём селекторы в приведённом CSS-коде (я предумышленно не выносил CSS в
отдельный файл, ибо так наглядней):
body – данные правила будут применены к тегу <body> и всем его потомкам
h1,h2 – мы выбираем теги <h1> и <h2>, и устанавливаем цвет шрифта
#content – выбираем элемент с id="content" и применяем правила
.box – выбираем элементы с class="box"
Теперь подробнее и с усложнёнными примерами:
h1 ищем элементы по имени тега
#container ищем элемент по идентификатору: id=container (идентификатор
уникален, значит, на странице он должен быть только один)
div#container ищем <div> c идентификатором container, но предыдущий селектор
работает быстрее, но этот важнее
.news выбираем элементы по имени класса (class="news")
div.news все элементы <div> c классом news (так работает быстрее в IE8, т.к. в нём не
реализован метод getElementsByClassName)
#wrap .post ищем все элементы с классом post внутри элемента с id = wrap
.cls1.cls2 выбираем элементы с двумя классами (class="cls1 cls2")
h1,h2,.posts перечисление селекторов, выберем всё перечисленное
.post > h2 выбираем элементы <h2>, которые являются непосредственными потомками
элемента с классом post
a + span будут выбраны все элементы <span> следующие сразу за элементом <a>
a[href^=http] будут выбраны все элементы <a> у которых атрибут href начинается с http
(предположительно, все внешние ссылки)
Это отнюдь не весь список, описание же всех CSS3 селекторов можно найти на
соответствующей страничке W3C: http://www.w3.org/TR/css3-selectors/
40% задач, которые вы будете решать с помощью jQuery, сводятся к поиску
необходимого элемента на странице, так что знание CSS селекторов
обязательно. Вот еще кусочек CSS для тренировки, напишите соответствующий
ему HTML (это тоже вопрос с собеседования ;):
#my p.announce, .tt.pm li li a:hover+span { color: #f00; }
12
www.trk.kg
