C# обучение для чайников

Формула программиста

основатель — Волосатов Евгений Витольдович
Open shop Знакомство с jQuery

Знакомство с jQuery

Знакомство с jQuery

Список уроков | фото | видео

# Название видеоурока Видео / Тесты Решило Рейтинг Доступ
1 FREE Суть библиотеки jQuery 00:12:17
1 тест
72 чел. ★ 4.9 Done
  Мы начинаем знакомство с библиотекой jQuery.
Для этого мы обратимся к крупнейшему сайту по веб-разработке:
www.w3schools.com/jquery/jquery_intro.asp
И последовательно пройдём их курс от начала и до конца.
Отчёт отправил: 10558. Иван Воронин Выполнено за 20 мин. [Показать отчёт]
Научился: Повторил пройденное 
Сложности: найти время 
Комментарии: Очень полезный курс для общего развития и не только, данная библиотека очень активно используется и должна быть изучена всеми веб-разработчиками. Я впервые познакомился с jQuery уже не помню когда, но это было точно во времена исследования сайта, который ранее написал не я, эдакий реверс-инжинеринг. Изрядно я его тогда поковырял, но многое было сразу не понятно, так как в те времена такого объёма полезной информации как сегодня просто не было.  Изложение как всегда простое и понятное, прохождение зарубежного курса вместе веселее =) 
2 Синтаксис и простейший пример 00:13:20
2 теста
59 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_get_started.asp
На этом уроке мы узнаем откуда скачать и как
подключить jQuery к нашему проекту.
Отчёт отправил: 10558. Иван Воронин Выполнено за 30 мин. [Показать отчёт]
Научился: Повторил пройденное 
Сложности: найти время 
Комментарии: Если в show() и hide() передать параметры: 'slow' - медленная анимация 'fast' - быстрая анимация целое число - время в миллисекундах которое длится анимация так же вторым параметром можно передавать так же кастомную функцию =) Отличное начало, идём дальше. 
3 Эксперименты и кнопки 00:12:18
1 тест
51 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_syntax.asp
На этом разберёмся, как работает написанная на прошлом уроке
функция и почему именно так, а не по другому.
Отчёт отправил: 10558. Иван Воронин Выполнено за 30 мин. [Показать отчёт]
Научился: Повторение пройденного 
Сложности: найти время 
Комментарии: Отличный урок, просто супер эксперименты и аналогия передачи функций аля делегаты. Добавил третью кнопку, которую наделил методом toggle(), который представляет собой симбиоз методов hide() и show(), так как работает в обе стороны, если элемент уже скрыт, он его отображает и наоборот. Так же использовал время анимации в 1000 мс, что равняется 1 секунде для наглядности =) 
4 Понятие селектора и примеры 00:15:38
45 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_selectors.asp
На этом уроке мы поговорим о селекторах,
что это такое и с чем его едят.
Отчёт отправил: 10558. Иван Воронин Выполнено за 45 мин. [Показать отчёт]
Научился: Закрепил пройденное 
Сложности: найти время 
Комментарии: Отличный урок, все примеры понравились, каждый по своему полезен, по поводу селектора: ":button" проверил, что-то не понятно, добавил тег input type=button и он не выбирался, хотя должен был, но зато чётко выбирались все button теги при этом идеально. Либо есть какой-то нюанс, либо эта фишка не работает так как задумывалось или забыли обновить документацию. з.ы. добавил селектор по тегу.классу как видно из скриншота, работает отлично. 
5 События и их методы 00:17:41
38 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_events.asp
На этом уроке мы поговорим о событиях и их методах.
Отчёт отправил: 10558. Иван Воронин Выполнено за 45 мин. [Показать отчёт]
Научился: Закрепил пройденное 
Сложности: найти время 
Комментарии: Отличный урок, демонстрация одного и того же разными способами реализации это лучше помогает понять работу в целом. Очень понравился метод on() с перебором focus() и blur() выглядит как swotch/case =) Ждём следующего вебинара... 
6 Эффекты скрытия и отображения 00:14:04
1 тест
34 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_hide_show.asp
На этом уроке мы переходим к разделу эффектов и
начнём с базовых функций: show() и hide().

Отчёт отправил: 10558. Иван Воронин Выполнено за 28 мин. [Показать отчёт]
Научился: Повторил пройденное 
Сложности: найти время 
Комментарии: Подобное уже проходили ранее и я как раз тогда использовал эффект анимации до которого дошли в этом уроке, поэтому осталось лишь пройти задания под звёздочками =) з.ы. Всё отлично, идём дальше. 
7 Эффекты появления и исчезновения 00:11:34
1 тест
33 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_fade.asp
На этом уроке мы переходим к эффекту: Fading.
Отчёт отправил: 10558. Иван Воронин Выполнено за 1 час. 00 мин. [Показать отчёт]
Научился: Анимации fade* 
Сложности: найти время 
Комментарии: Отличный урок, реализовал цветомузыку =) 
Видеообзор: B6BzQbg451w
8 Эффекты скольжения и базовая анимация 00:13:29
29 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_slide.asp
www.w3schools.com/jquery/jquery_animate.asp
На этом уроке мы рассмотрим эффекты: Sliding и
затронем начало раздела эффектов: Animate.
Отчёт отправил: 10558. Иван Воронин Выполнено за 57 мин. [Показать отчёт]
Научился: Эффектам slide* и animate 
Сложности: найти время 
Комментарии: Отличный урок, отличные эффекты анимации, по поводу разницы между position: relative - координаты расположения элемента относительно координат родительского элемента fixed - координаты расположения элемента относительно координат видимой части страницы в окне браузера absolute - координаты расположения элемента относительно левого верхнего угла странички в целом это всё изучал много лет назад на уроках CSS. 
Видеообзор: jw68hwrOPVo
9 Эффекты анимации, продолжение 00:13:59
1 тест
27 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_animate.asp
На этом уроке мы продолжаем рассматривать раздел эффектов: Animate.
Отчёт отправил: 10558. Иван Воронин Выполнено за 53 мин. [Показать отчёт]
Научился: Использование плагина jQuery.Color 
Сложности: найти время 
Комментарии: Отличный урок, добавил плагин для анимации цвета, отлично выглядит, добавил независимую анимацию цвета фона для обоих полей, так же переход между цветами каждый раз занимает рандомное время для большей уникальности анимации. Добавил логотип проекта вместо чёрного квадратика, который бегает в стиле Zorro, размер квадратика была 20х20, голотип сделал 40х40, чтобы лучше было видно. Так же реализовал второе поле, где кубик 20х20 бегает по периметру, чем ближе он к центру каждой стенки, тем он сплющивается в её сторону, использовал toggle свойство для полей ширины и высоты там где это необходимо =) 
Видеообзор: HdvAfc2Y-CI
10 Домашнее задание: анимация Zorro 00:11:35
26 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_animate.asp
На этом уроке мы реализуем домашнее задание, а именно:
Реализовать логотип проекта, который перемещается аля Zorro.

Отчёт отправил: 10558. Иван Воронин Выполнено за 33 мин. [Показать отчёт]
Научился: Повторил пройденное 
Сложности: найти время 
Комментарии: Так как анимацию реализовал на прошлом уроке, то чтобы было чем заняться, в анимации Zorro логотип увеличил в 2 раза. Так же добавил второе поле, где логотип проекта анимируется в стиле сердцебиения. Как видно из куска исходника, размер логотипа во время сердцебиения изменяется относительно текущего размера в нужных направлениях. 
Видеообзор: EjQ5jXVi9l0
11 Остановка анимации 00:16:07
25 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_stop.asp
На этом уроке мы рассмотрим функцию остановки анимации.
Отчёт отправил: 10558. Иван Воронин Выполнено за 31 мин. [Показать отчёт]
Научился: Повторил пройденное 
Сложности: найти время 
Комментарии: С параметром stopAll всё ок, останавливает и удаляет все анимации из очереди, а если добавить параметр goToEnd, то при нажатии на финальной анимации, он её доводит до конца и удаляет потом записи, но в конце у нас колбэк вызов самой себя, и по сути остаются две записи, та, во время которой нажали кнопку, последняя анимация с колбеком и начальная пропускается, остаётся вторая после неё. Очень похоже на баг. Добавил тень к логотипу через css стили. Реализовал динамически изменяемое поле для анимации относительно размеров окна браузера, так же это влияет и на размеры логотипа. Текст над полем анимации тоже отцентрировал. 
Видеообзор: tsEuCtpVhLQ
12 Функции обратного вызова 00:12:07
25 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_callback.asp
www.w3schools.com/jquery/jquery_chaining.asp
На этом уроке мы рассмотрим использование callback функций и
повторим что такое и с чем едят цепочки вызова действий/методов.
Отчёт отправил: 10558. Иван Воронин Выполнено за 32 мин. [Показать отчёт]
Научился: Закрепил пройденное 
Сложности: найти время 
Комментарии: Реализовал два поля с одинаковыми задачами, но функции анимации немного отличаются, см. скриншот или видео. В первой функции реализован рекурсивный вызов после того как все анимации выполнились. Во второй функции реализована callback функция третьим параметром в последней цепочке анимации. Как я сразу и предположил, callback функция глючит будучи третьим параметром в цепочке анимаций при вызове остановки всех анимаций с завершением. Так что внимательно следите за подобными нюансами, чтобы код работал так как задумывалось. 
Видеообзор: lTfPwUTo4ok
13 jQuery - DOM - Get 00:15:29
1 тест
25 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_dom_get.asp
На этом уроке мы начинаем раздел управления HTML через DOM.
Для начала рассмотрим методы text(), html(), val() и attr().
Отчёт отправил: 10558. Иван Воронин Выполнено за 34 мин. [Показать отчёт]
Научился: Закрепил знания 
Сложности: найти время 
Комментарии: Решил поэкспериментировать с динамическим изменением HTML, в итоге не имея изначальных данных, координаты в процессе анимации показывает. Так же и со значением введённым в поле тега "input". 
Видеообзор: lifRCg9C8PM
14 jQuery - DOM - Set 00:13:40
23 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_dom_set.asp
На этом уроке мы продолжаем управление HTML через DOM.
Рассмотрим те-же функции, но с параметрами.
Отчёт отправил: 10558. Иван Воронин Выполнено за 1 час. 16 мин. [Показать отчёт]
Научился: Закрепил пройденное 
Сложности: найти время 
Комментарии: Отличный урок, когда склеивали новый текст с исходником, сразу решил реализовать бегущую строчку как демонстрашку =) 
Видеообзор: Ps_58chJsiw
15 jQuery - AJAX = IFrame 00:18:12
21 чел. ★ 4.8 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
На этом уроке мы реализуем ajax вызов не использую ajax.
Отчёт отправил: 10558. Иван Воронин Выполнено за 1 час. 25 мин. [Показать отчёт]
Научился: Загрузке данных с сервера через iframe и дальнейшее их использование, стиль js 
Сложности: найти время 
Комментарии: Реализовал по своему, как видно на скриншоте, php возвращает только время, а далее уже скрипт на основной страничке достаёт эти данные и копирует куда надо. Так же реализованы две кнопки, запуска и остановки обновления времени с сервера. Само обновление iframe реализовано через .contentWindow.location.reload(), способ показанный в уроке, где для обновления просто вставляют адрес откуда брать время тоже хорошо подходит, а по скорости выполнения разницы не заметил. Как видно из видео, при запуске обновления времени, анимация заметно начинает дёргаться, если же остановить данную процедуру, анимация плавная. 
Видеообзор: Uh9nP2S2a8c
16 jQuery - AJAX - Load 00:13:25
20 чел. ★ 5 Done
  Мы продолжаем знакомство с библиотекой jQuery,
проходя курс на крупнейшем сайте по веб-разработке:
www.w3schools.com/jquery/jquery_ajax_intro.asp
www.w3schools.com/jquery/jquery_ajax_load.asp
На прошлом уроке мы реализовали возможность получения
информации с сервера старым кустарным способом.
На этом уроке мы воспользуемся возможностью AJAX,
чтобы увидеть всю простоту решения.
Отчёт отправил: 10558. Иван Воронин Выполнено за 40 мин. [Показать отчёт]
Научился: ajax load 
Сложности: найти время 
Комментарии: Отличный урок, весь велосипед уложился в одной строчке. На стороне сервера у меня ничего чистить не пришлось. так как ещё на прошлом уроке реализовал только возврат времени из php. Добавил счётчики успешного/ошибочного получения времени с сервера. 
Видеообзор: 8RFekBsfNrM
  Итого:   16 видеоуроков 3 час. 44 мин.
8 тестов
20 чел. ★ 4.99  
  Финалисты:   Иван Воронин,   Елена,   Алексей В.,   Nikolay,   Zulchumor Kurbonova,   Ludmila,   Сергей Соколов,   Максим Лапшинов,   Tekashnik,   Николай Денисов,   Новопашин Владимир,   Дмитрий,   Anton,   Dmitry Sinitsin,   Дмитрий Че,   Андрей Гладков,   Yefim,   Max,   Yaroslav,   Tom .

Начинаем практику по языку C#





Если вы пришли без приглашения -
введите тысяча двадцать четыре (цифрами).
Чтобы стать хорошим программистом — нужно писать программы. На нашем сайте очень много практических упражнений.

После заполнения формы ты будешь подписан на рассылку «C# Вебинары и Видеоуроки», у тебя появится доступ к видеоурокам и консольным задачам.

Несколько раз в неделю тебе будут приходить письма — приглашения на вебинары, информация об акциях и скидках, полезная информация по C#.

Ты в любой момент сможешь отписаться от рассылки.


Научился: Использовать селекторы в jQuery
Поэкспериментировал с примерами по ссылке. Все понравились.


Научился: С jQuery я знаком с 2009 года, для меня была она очень удобная, особенно jQuery IU. До bootstrap это была возможность получить нормальный дизайн с минимальными усилиями. кроме того, нравится функция $.ajax - формирование запросов MySQL и получение результатов
Много мы с jQuery прошли,были у нас и грандиозные прорывы, и грандиозные провалы. по поводу тезисам "меньше строчек кода" - согласен. $.ajax - не только для php справедливо, но и (не могу это обойти) для asp.net))))