jQuery — библиотека JavaScript, которая специализируется на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM(Document Object Model — «объектная модель документа»), обращаться к атрибутам и содержимому элементов DOM, манипулировать ими, анимировать изображения.
Для того чтобы начать работать с jQuery и научиться анимировать объекты с его помощью необходимо:
1. Cкачать фреймворк с официального сайта проекта (либо в конце урока, вместе с примером в прикреплении)
2. А так же плагин jquery.animate-colors-min.js .
3. Поместить скаченное в папку с вашей html-страницей
Готово, можно приступать.
Прокомментированные части кода, приведенные ниже, являются частью примера в прикреплении в конце статьи.
<html> <head> /* Подключаем библиотеку */ <script type="text/javascript" src="jquery.js"></script> /* Подключаем плагин для функции .animate() */ <script type="text/javascript" src="jquery.animate-colors-min.js"></script> </head> </html>
В поиске элементов на странице заключается практически половина успешной работы с jQuery. Ниже приведены примеры правильного обращения к тому или иному элементу:
$("#content") // выбираем элемент с id=content $("div#content") // выбираем div с id=content (хотя id и так однозначен) $(".wrapper") // выбираем элементы с class=wrapper $("div.wrapper") // выбираем div'ы с class=wrapper $(".wrapper.box") // выбираем элементы с class=wrapper и box $("h2") // выбираем все теги h2 $("h1, h2") // выбираем все теги h1 и h2
Детальнее о селекторах, очень доступно и понятно тут События
События – это любые действия пользователя, будь то ввод данных с клавиатуры, проматывание страницы или передвижения мышки, и конечно же «клики». jQuery работает практически со всеми событиями в JavaScript'е, вот несколько их них:
- click — клик по элементу
- keydown — нажатие клавиши на клавиатуре
- mousemove — движение курсора
- mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
- mouseover — наведение курсора на элемент
$('h1').on("mouseover", function(e) { // При фокусе на заголовке текст сдвигается вправо $(this).animate({ // this - указатель на селектор, используемый ранее в функции left: "+=800px", // Передвигаем элемент на 800 пикселей влево color: "#FFB727" // Плавная смена цвета }, 5000); // Применение в течении 5 секунд });
Все эффекты анимации в jQuery "крутятся" вокруг метода animate. Данная функция берет один или несколько CSS-свойств элемента и изменяет их от исходного до заданного за N-ое количество итераций.
$("#start").animate({ // Отображение меню top: "+=650px" }, 1000); $('h1').on("mouseover", function(e) { // При фокусе на заголовке текст сдвигается вправо $(this).animate({ // this - указатель на селектор, используемый ранее в функции left: "+=800px", // Передвигаем элемент на 800 пикселей влево color: "#FFB727" // Плавная смена цвета }, 5000); // Применение в течении 5 секунд });
Помимо смещений объекта и изменения его цвета, можно, например, изменить размер объекта, его прозрачность:
$(".drinks").on("mouseover", function(e){ // При наведении мыши на элемент класса drinks $(this).animate({ opacity: 1, // Прозрачность = 0% height: "200px", // Высота, width: "200px" // Ширина = 200px; },200); // За 0.2с });
Список всех атрибутов метода можно найти здесь. Вывод
В этом уроке были затронуты только базовые принципы работы с jQuery. На самом деле, список применения этого замечательного инструмента гораздо больше(например, предоставление удобного интерфейса ПП для AJAX).
Полный код:
<script> // Ждем загрузки страницы $(document).ready(function () { $('.drinks').hide(); // по умолчанию все напитки не отображаются на экране $("#start").css({ // Применяем свойства КТС для id=start, точно так же, как и в CSS width: "200x", // ширина, высота, цвет height: "75px", color: "#006AFF" }); $("#start").animate({ // Отображение меню top: "+=650px" }, 1000); $('h1').on("mouseover", function(e) { // При фокусе на заголовке текст сдвигается вправо $(this).animate({ left: "+=800px", color: "#FFB727" // Плавная смена цвета }, 5000); }); $('h1').on("mouseout", function(e) { // При снятии фокуса - влево $(this).animate({ left: "-=800px", color: "#FFFFFF" }, 5000); }); $("#start").on("click", function(e) { // Анимация на клик лкм(событие) $(this).animate({ // Меняем цвет текста за 1000мс color: "#FF3A22", }, 1000); $(".drinks").css("opacity", "0.8"); // Задаем прозрачность картинок по дефолту $('.drinks').show('slow'); // Отображаем все картинки // При наведении мыши на любую из картинок $(".drinks").on("mouseover", function(e){ $(this).animate({ opacity: 1, // Прозрачность = 0% height: "200px", // Высота, ширина = 200px; width: "200px" },200); }); // Убрали курсор $(".drinks").on("mouseout", function(e){ $(this).animate({ // Возвращаем значения по умолчанию opacity: 0.8, height: "128px", width: "128px" },200); }); // При нажатии на любую картинку в поле start отобразиться следующий текст $(".drinks").on("mousedown", function(e){ $("#start").text("good choice, man!"); }); // При отжатии кнопки мыши - возвращаем исходный текст $(".drinks").on("mouseup", function(e){ $("#start").text("choose your drink!"); }); }); }); </script>
А вот и сам пример, который наглядно демонстрирует работу приведенных выше функций и методов
| Прикрепленный файл | Размер |
|---|---|
| lesson.zip | 992.08 кб |