Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

КРУГОВОЙ ФРАКТАЛ -ОШИБОЧНАЯ ПРОГРАММА! ПАПА ЗибЕрт
Можешь обяснить подробно что как работает, и почему массу не задаем
Здравствуйте, Ильгиз. Математика - царица наук (Карл Гаусс). Изучение математики начинается с детского сада, когда нас учат считать и выполнять простые арифметические операции. Любой, даже самый простейший алгоритм будет связан с арифметическими...
Я хотел узнать математика это обязательно в программирование. Пять лет назад просто из любопытства я увлекся HTML потом изучил CSS и JvaScript потом изучил PHP и Java. Как то не задумывался и начал смотреть форумы и узнал что без математики не...
Все верно, но так же необходимо зайти в: Компоновщик -> Ввод -> Дополнительные зависимости Здесь необходимо нажать изменить и в Дополнительные зависимости прописать это: SDL2.lib SDL2main.lib SDL2test.lib Без этого не заработает. (MVS 2015)

Счетчики и рейтинг

Яндекс.Метрика Рейтинг@Mail.ru
Среда программирования: 
HTML 5 + JavaScript

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 секунд
   });

Animate()

Все эффекты анимации в 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.zip992.08 кб