Знакомство с jQuery
# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
1 тест |
|||
Мы начинаем знакомство с библиотекой jQuery. Для этого мы обратимся к крупнейшему сайту по веб-разработке: www.w3schools.com/jquery/jquery_intro.asp И последовательно пройдём их курс от начала и до конца. Отчёт отправил: 2773. Никита Выполнено за 19 мин. [Показать отчёт] Научился: С библиотекой JQuery приходилось сталкиваться. Но я ее как-то обходил стороной, потому что не понимал принципов ее работы. То есть знал, что она есть, что-то там делает. А как конкретно работает и что это такое - понятия не имел. Вот хочу познакомиться с ней поближе, благодаря вашему курсу) Сложности: Сложностей не возкикло |
|||||
2 | Синтаксис и простейший пример |
2 теста |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_get_started.asp На этом уроке мы узнаем откуда скачать и как подключить jQuery к нашему проекту. Отчёт отправил: 2773. Никита Выполнено за 55 мин. [Показать отчёт] Научился: Начинаем знакомство с библиотекой jQuery. Интересно) Сложности: Сложностей не возникло |
|||||
3 | Эксперименты и кнопки |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_syntax.asp На этом разберёмся, как работает написанная на прошлом уроке функция и почему именно так, а не по другому. Отчёт отправил: 2773. Никита Выполнено за 41 мин. [Показать отчёт] Научился: Я попытался сделать с помощью одной кнопки показ и скрытие тега p. У меня даже получилось) А вторую кнопку добавил - вводится имя в текстовое поле, а потом при нажатии на кнопку выскакивает окошко с приветствием. Сложности: Потихоньку разбираюсь с синтаксисом jQuery, вроде что-то понял) |
|||||
4 | Понятие селектора и примеры |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_selectors.asp На этом уроке мы поговорим о селекторах, что это такое и с чем его едят. Отчёт отправил: 2773. Никита Выполнено за 23 мин. [Показать отчёт] Научился: С селекторами, конечно, предстоит еще разбираться и разбираться мне. Но я почувствовал, как это удобно - можно определенный даже атрибут выбрать (например, href у ссылки). Из показанных на сайте примеров, мне понравился последний - с таблицей, наверное, потому что он, более анимированный что ли) И понравился также выбор атрибутов через квадратные скобки с указанием имени атрибута. Все упражнения я выполнил после изучения материала. На втором скриншоте показана работа селектора :buuton, как я понял - двоеточие говорит, что будет выполнено действие со всеми кнопки, но также с полями для ввода типа button. Я решил проверить свою догадку, сделал unput типа button и действительно при нажатии на кнопку происходит действие (в данном случае, скрытие элементов). Сложности: Уже потихоньку начинает приходить понимание! |
|||||
5 | События и их методы |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_events.asp На этом уроке мы поговорим о событиях и их методах. Отчёт отправил: 2773. Никита Выполнено за 2 час. 15 мин. [Показать отчёт] Научился: Прошел все задания на сайте. Мне очень понравился метод 'on', когда можно на элемент повесить несколько событий. Добавил в свой проект метод hover, сделал так, что при наведении на тег p показывается изображение. Классно получилось! Сложности: Сложностей не возникло. |
|||||
6 | Эффекты скрытия и отображения |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_hide_show.asp На этом уроке мы переходим к разделу эффектов и начнём с базовых функций: show() и hide(). Отчёт отправил: 2773. Никита Выполнено за 27 мин. [Показать отчёт] Научился: Упражнения на сайте w3schools выполнил. Сделал через toogle на своем сайте показ/скрытие абзаца. Через JavaScript не стал реализовать, но принцип я понял и видел, как Евгений Витольдович это делал. Метод toggle очень понравился. Сложности: Сложностей не возникло. |
|||||
7 | Эффекты появления и исчезновения |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_fade.asp На этом уроке мы переходим к эффекту: Fading. Отчёт отправил: 2773. Никита Выполнено за 48 мин. [Показать отчёт] Научился: С методом fade* разобрался. Интересные возможности открывает, мне понравился. Я взял за основу старый пример, из предыдущего урока, и реализовал его с использованием fadeToggle. Также выполнил упражнения на сайте w3scholls. Сложности: Сложностей не возникло, все было просто и понятно. |
|||||
8 | Эффекты скольжения и базовая анимация |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_slide.asp www.w3schools.com/jquery/jquery_animate.asp На этом уроке мы рассмотрим эффекты: Sliding и затронем начало раздела эффектов: Animate. Отчёт отправил: 2773. Никита Выполнено за 1 час. 45 мин. [Показать отчёт] Научился: Делать анимацию объектов. На втором скриншоте показана анимация (если так можно назвать), сначала объект сине-зеленого цвета (cyan цвет), потом он увеличивается в размерах и становится зеленого цвета, а под конец возвращается на место, но уже в желтом цвете. Пока с позиционированием сложно, потому что не работал с CSS, знал, что есть такое. Когда свойств объекта установлено в значение 'relative' - это означает, что объект может перемещаться относительно его текущей позиции, то есть он живет своей жизнью, другие объекты даже не знают о его перемещении. Значение 'absolute' показывает нам, что объект может перемещаться относительно первого позиционированного элемента (позиционированный элемент — это тот, у которого значение position установлено как relative, absolute или fixed. А по умолчание значение позиционирования = 'static'). А значение 'fixed' похоже на абсолютное позиционирование, за исключением точки отсчета - это окно просмотра. То есть объект не перемещается на странице, он просто фиксируется на экране. Когда я попробовал разные значения свойства position немного разобрался. Увидел на примерах, как это работает. Сложности: Разобраться с позиционированием, нужна практика и все получится) |
|||||
9 | Эффекты анимации, продолжение |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_animate.asp На этом уроке мы продолжаем рассматривать раздел эффектов: Animate. Отчёт отправил: 2773. Никита Выполнено за 31 мин. [Показать отчёт] Научился: Разбираюсь в анимации дальше) Упражнения на странице сделал. С анимацией по "линии Z" вроде получилось) У меня кружок движется и постепенно исчезает, при этом меняя свой цвет. Плагин для цвета еще на прошлом уроке добавил, все отрабатывает отлично. Сложности: Сложностей не возникло. Разве что в CSS не силен, нашел код кружка и вставил) |
|||||
10 | Домашнее задание: анимация Zorro |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_animate.asp На этом уроке мы реализуем домашнее задание, а именно: Реализовать логотип проекта, который перемещается аля Zorro. |
|||||
11 | Остановка анимации |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_stop.asp На этом уроке мы рассмотрим функцию остановки анимации. |
|||||
12 | Функции обратного вызова |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_callback.asp www.w3schools.com/jquery/jquery_chaining.asp На этом уроке мы рассмотрим использование callback функций и повторим что такое и с чем едят цепочки вызова действий/методов. |
|||||
13 | jQuery - DOM - Get |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_dom_get.asp На этом уроке мы начинаем раздел управления HTML через DOM. Для начала рассмотрим методы text(), html(), val() и attr(). |
|||||
14 | jQuery - DOM - Set |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_dom_set.asp На этом уроке мы продолжаем управление HTML через DOM. Рассмотрим те-же функции, но с параметрами. |
|||||
15 | jQuery - AJAX = IFrame |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: На этом уроке мы реализуем ajax вызов не использую ajax. |
|||||
16 | jQuery - AJAX - Load |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_ajax_intro.asp www.w3schools.com/jquery/jquery_ajax_load.asp На прошлом уроке мы реализовали возможность получения информации с сервера старым кустарным способом. На этом уроке мы воспользуемся возможностью AJAX, чтобы увидеть всю простоту решения. |
|||||
Итого: 16 видеоуроков |
3 час. 44 мин. 8 тестов |
20 чел. | |||
Финалисты: Иван Воронин, Елена, Алексей В., Nikolay, Zulchumor Kurbonova, Ludmila, Сергей Соколов, Максим Лапшинов, Tekashnik, Николай Денисов, Новопашин Владимир, Дмитрий, Anton, Dmitry Sinitsin, Дмитрий Че, Андрей Гладков, Yefim, Max, Yaroslav, Tom . |