Подключите jQuery, убедитесь в доступности объекта -библиотеки. Примечание: попробуйте подключение с разных CDN-хранилищ, и при помощи локального файла
Откройте верстку http://codepen.io/htmllab/pen/NNaGOV
Выберите при помощи селекторов jQuery
— все HTML-элементы strong и окрасьте их в зеленый цвет
— найдите все HTML-элементы em и добавьте им класс .selected
— Найдите все элементы mark, которые находятся в div с классом row и задайте им класс .selected
— Найдите все гиперссылки и удалите у них подчеркивания
— Найдите все HTML-элементы, который содержат слово «Задания» и находятся в элементе с классом .container
— Переключите элементы strong с классом some в состояние без этого класса, а тем элементам (strong), у которых небыло этого класса — добавьте.
— среди набора элементов с классом .row удалите класс у второго элемента
— прочитайте CSS-свойство color у второй гиперсылки в тексте
Задания по работе с событиями в jQuery
События в jQuery
Создайте обработчик нажатия на кнопку, который будет менять цвет фона страницы.
Создайте HTML-форму и по нажатию на кнопку проверяйте заполненность всех полей. Если останутся незаполненные поля — выводите предупреждение и не отправляйте форму.
Создайте обработчик события на нажатие кнопок направлений (влево, вправо) так, чтобы HTML-элемент при однократном нажатии на кнопку анимированно сдвигался влево или вправо на 100px
Навесьте на событие движения мыши обработчик, который будет в консоль выводить координаты движения. Примечание: выводите их как x и y. Событие надо «повесить» на document
* Создайте эффект перетаскивания HTML-элементов с классом .drag. Примечание к задаче: напишите обработчики событий mousedown, mouseup и mousemove
Создайте модальное окно по аналогии с компонентом Bootstrap: http://getbootstrap.com/javascript/#modals
Создайте скрипт, реализующий игру Крестики-нолики http://htmllab.ru/krestiki-noliki/
Создайте эффект голосования, подобно тем, что есть в социальных сетях.
Создайте разметку с изображениями и элементами figure, figcaption. Сделайте figcaption невидимым. При наведении показывайте figcaption так, чтобы фон элемента был полупрозрачным, и занимал весь figure.
Анимация в jQuery. Задания
Анимация в jQuery
Создайте несколько параграфов с элементами strong и em. Задайте обработчики событий наведения мышью на эти элементы: при наведении, цвет элементов должен отличаться от обычного, а размер плавно увеличиваться.
* Создать метод у объекта jQuery — parabola(), который принимает аргументы a,b и c и анимирует элементы по параболе
* Создать метод у объекта jQuery — animationF(), который функцию, описывающей математическую формулу (Например, синуса или параболы) и анимирующей объект по этой траектории.
4. При наведении на элемент с идентификатором #box, поворачивать элемент с классом .some на 90 градусов, при событии выведения мыши с элемента возвращать .some в исходную позицию
5. Назначить обработчики событий для кнопок, такие, чтобы после нажатия на кнопку элемент должен двигаться на 100px в направлении, указанном кнопкой
6. При нажатии на любую точку страницы, перемещать с анимацией этот элемент к нужному месту.
7. Создать эффект переключатели (как в http://demos.jquerymobile.com/1.4.5/flipswitch/), только с использованием библиотеки jQuery (не применять jQueryUI)
8. Для изображений создать обработчики событий, чтобы работа скрипта была похожа на работу слайдера
9. Создать эффект лайтбокса средствами jQuery
10. Создать эффект карусели
11. Создать эффект галереи
12*. Создать эффект аккордиона. Примечание: посмотреть пример аккордиона можно на сайте плагина jQueryUI https://jqueryui.com/accordion/
13 * Создать плагин под названием jquery.calendar.js, который будет позволять выбирать дату из текстового однострочного поля с классом .calendar. Примечание: для успешного выполнения задания можно познакомиться с http://jqueryui.com/datepicker/.
14. Выполните задания по JavaScript для работы с деревом документа DOM.
