Цель: изучить обращение к элементам, изучить селекторы.

Задачи:

• научиться обращаться к элементам;
• научиться работе с селекторам.

В результате выполнения урока получится следующая веб-страница (рисунок 5.1):

Подготовка к работе

Делаем копию папки project4, созданной в предыдущем уроке. Назовем ее project5 (рисунок 5.2):

1. Скачайте файл библиотеки jQuery (ПКМ на странице, Сохранить как...), разместите его в папке js.

2. В этой же папке создайте файл main.js (рисунок 5.3):

3. В файле index.html подключите файлы jQuery и main.js перед закрывающим тэгом body (рисунок 5.4):

Обращение

Обращение к элементам в библиотеке jQuery осуществляется с помощью знака доллара:

$('.menu')

Однако, скрипт попробует обратиться к блоку с классом menu сразу, в момент обращения страницы. Может произойти такое, что страница еще не успеет загрузиться и тогда jQuery не сможет применить код к блоку, ведь в момент обращения к странице этот блок еще не был загружен, а соответственно, не существовал.

Для того чтобы такого не происходило, используется следующая конструкция:

$(document).ready(function(){ Код; }

Можно уменьшить запись, заменив $(document) на $(), убрав метод ready (рисунок 5.5):

По факту это две одинаковые записи.

Селекторы

1. В файле main.js задайте базовую структуру jQuery (рисунок 5.6):

Базовые селекторы

Это селекторы, которые используют обычный css (#id, tagName, .class)

2. Уберите оформление текста у абзацев (рисунок 5.7):

3. Проверьте результат в браузере (рисунок 5.8):

Можно заметить, что подчеркивание, заданное через style.css исчезло.

jQuery позволяет обращаться к элементам так же, как и CSS селекторы.

4. Измените абзацам с классами text-3 и text-4 размер шрифта на 24px через main.js.

Селекторы взаимодействия

Это селекторы по соседним, родительским или дочерним элементам (parent, children, +, ~ и т.д.).

5. Сделайте ширину родительского блока headers__inner равной 400px.

6. Добавьте всем дочерним элементам внутри блока headers__inner красную рамку (рисунок 5.9):

7. Проверьте результат в браузере (рисунок 5.10):

8. Добавьте заголовкам h3 и h5, находящимся внутри блока header__inner синий фон через main.js.

Простые фильтры

Это фильтры, по расположению элементов (:first, :last, even, odd, eq и т.д.).

9. Замените у последнего абзаца на странице цвет текста на оранжевый (рисунок 5.11):

10. Уберите рамку у второго абзаца (рисунок 5.12):

11. Проверьте результат в браузере (рисунок 5.13):

12. Сделайте каждый нечетный заголовок черного цвета.

Фильтры по содержимому

Это фильтр по содержанию тега внутри (:has, :not, :parent, :empty и т.д.).

13. В файле index.html оберните текст первого абзаца в тег span (рисунок 5.14):

14. Добавьте подчеркивание этому блоку через фильтр по наличию span.

15. Абзацам, не имеющим внутри себя блока span, сделайте перечеркнутый текст (рисунок 5.15):

16. Проверьте результат в браузере (рисунок 5.16):

Фильтры по атрибутам

С помощью фильтра по атрибутам можно управлять элементами форм, ссылок или картинок.

17. В ссылках, вместо # добавьте интернет ресурсы (рисунок 5.17):

18. Обведите красной рамкой ту ссылку, которая ведет на rsvpu.ru (рисунок 5.18):

19. Проверьте результат в браузере (рисунок 5.19):

20. Уберите отображение у того абзаца, который имеет класс text-3.

Контрольные вопросы.

1. Для чего нужна библиотека jQuery?
2. Как запускать код только после загрузки страницы?
3. Можно ли обращаться к идентификаторам?
4. Что значит запись $('p:not(:has(span))')?
5. Как обратиться к первому дочернему блоку?
6. Как обратиться к элементу по индексу?
7. Можно ли применять селектор в качестве метода?
8. Можно ли через js изменить атрибут, который не задан в таблице стилей?
9. Можно ли обратиться одновременно по атрибуту и по содержимому?
10. Можно ли менять через jQuery размеры блоков?