Домашнє завдання

1. Збережіть собі в папку нового проекту файл jquery_homework_file.html, підключіть jQuery і файл ваших скриптів script.js.
2. Дослідіть стилі даного файла, по можливості запам'ятайте назви класів.
3. Виведіть в консоль кількість елементів списку .rainbow, приклад: "Rainbow count: 7".
4. Добавте клас 'active' до списка .rainbow і всі елементи розфарбуйте у відповідні кольори класами col*.
5. Виведіть в консоль текст і html-код елемента .bl цього списку.
6. В списку #test розфарбуйте елементи test червоним кольором класом .active, елементи subtest - класом .passive.
7. Першому елементу кожного списка сторінки задайте класом синю тінь для текста, останньому - зелену.
8. Елементу .lol мають передувати 2 елемента з синьою та зеленою тінню, а також наступні 2 елемента повинні мати синю та зелену тінь. Висоту елемента .lol задати 40px, розмір шрифта і lineheight - 24px / 28px.
9. В списку з title="links" текст посилань зробіть відповідним до його href (скопіюйте href у text).
10. Посилання на FTP пофарбуйте класом у зелений колір.
11. Знайдіть елемент .special, додайте його батьку клас 'specwrap', батьківському елементу .silver додайте клас 'active'.
12. Пронумеруйте всіх батьків елемента .special атрибутом data-parent="..." числами 1, 2, 3, 4... починаючи від безпосереднього батька. Перегляньте код елементів у інспекторі об'єктів, має бути щось типу такого: <strong data-parent="1">
13. Візьміть елемент #test, знайдіть всіх його дітей першого порядку (ті, що з текстом test), окрім елемента .lol, зробіть текст літерами у верхньому регістрі, додавши клас .upper.
14. В елементі .week виберіть дітей 's, em, i, .big', скориставшись методом .filter(), добавте до них клас 'passive', щоб задати світлосірий колір тексту.
15. В списку ul[title="links"] перед кожним елементом http-посилання добавте <li>_________</li>, а після кожного ftp-посилання - <li>^^^^^^^^^</li>.
16. В списку #test кожному елементу "test" добавте на початок <b>!!!</b>, а до елементів subtest добавте в кінець <i>???</i>.
17. Клонуйте список #test та добавте його в кінець веб-сторінки. Зауважте, що на одній сторінці не повинно бути двох елементів з однаковим id.
18. Пронумеруйте елементи списку #test: 1. test, 2. test і т.д., видаліть кожен парний елемент списку (бажано без циклу, селектором :even). Якщо при цьому буде видалено список з елементами subtest, то змініть умову задачі: потрібно видалити непарні елементи.
19. Очистіть елементи списку "subtest".
20. Огорніть елементи .week та .week2 тегом div.col5.
21. Огорніть всі списки разом тегом section.
22. Виберіть всіх дітей елемента .week, і огорніть їх контент тегом span.check.
23. Якщо зажати Shift і водити мишу по екрану - в консоль повинні виводитися імена тегів елементів, на які наводиться миша.
24. При кліку на елементи списку .rainbow виводьте alert з іменем класу цього елемента і кольором фону через пробіл.
25. При отриманні фокуса текстових полів форми підсвічуйте їх жовтим фоном (.col3).
26. Виводьте в консоль букви, які нажимає користувач, знаходячись в текстових полях. Забороніть в полі телефона натискання клавіші 0 (return false;).
27. Зніміть властивість checked з радіокнопок, добавте цю властивість до чекокса.
28. Для елемента .check добавте метод, щоб при кліку в нього змінювався стан (клас 'active') і при цьому переключався чекбокс.
29. При кліку на дітей елемента .week повинні з’являтися alert’и з текстом, що міститься в цих елементах.
30. Аналогічно у елементів .week2, але якщо є атрибут data-click, то алерт має вивестися не більше стількох раз, як вказано в цьому параметрі, а якщо немає цього параметра - лише 1 раз.
31. Добавте до .week ще один елемент <b>newday</b>, переконайтесь, що клік на нього не працює. Модифікуйте обробник подій так, щоб після динамічного створення цього елемента він також би ловив подію кліка.
32. В список .wave добавте 30 елементів з текстом 'wave', зробіть "стадіонну хвилю" - при наведенні на елемент йому задається клас .wave1, його сусідам - .wave2, далі сусідам - .wave3, 4 і т.д. до .wave8.