Знакомство с jQuery
# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
1 тест |
|||
Мы начинаем знакомство с библиотекой jQuery. Для этого мы обратимся к крупнейшему сайту по веб-разработке: www.w3schools.com/jquery/jquery_intro.asp И последовательно пройдём их курс от начала и до конца. Отчёт отправил: 11019. Trira Выполнено за 1 час. 34 мин. [Показать отчёт] Научился: c jQuary знакома "шапочно". Автоматически подключала скрипты этой библиотеки при использовании готовых элементов из бутстрапа. Впечатление - удобный черный ящик по типу "использовать как есть". |
|||||
2 | Синтаксис и простейший пример |
2 теста |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_get_started.asp На этом уроке мы узнаем откуда скачать и как подключить jQuery к нашему проекту. Отчёт отправил: 11019. Trira Выполнено за 1 час. 43 мин. [Показать отчёт] Научился: наиболее удобный способ подключения jQuary - это загрузка готовой библиотеки с оффсайта. Но я выбрала способ офф-подключения - загружаю библиотеку из локальной директории с файлами, содержащими разметку веб-страниц. В тело страницы добавлены теги h1 и p с необходимой информацией. В head добавлено описание подключения jQuary и обработки тега "p" во время события $(document ).ready() Сложности: на удивление, все просто! |
|||||
3 | Эксперименты и кнопки |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_syntax.asp На этом разберёмся, как работает написанная на прошлом уроке функция и почему именно так, а не по другому. Отчёт отправил: 11019. Trira Выполнено за 7 час. 14 мин. [Показать отчёт] Научился: научилась привязывать через jQuary события к кнопке. Сложности: придумала кнопку, запускающую анимацию для текста, но как это сделать, пока не разобралась |
|||||
4 | Понятие селектора и примеры |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_selectors.asp На этом уроке мы поговорим о селекторах, что это такое и с чем его едят. Отчёт отправил: 11019. Trira Выполнено за 17 час. 29 мин. [Показать отчёт] Научился: Селекторы jQuery используются для «поиска» (или выбора) элементов HTML на основе их имени, идентификатора, классов, типов, атрибутов, значений атрибутов и многого другого. Он основан на существующих селекторах CSS и, кроме того, имеет несколько собственных пользовательских селекторов. Все селекторы в jQuery начинаются со знака доллара и круглых скобок: $ (). Опробовать все примеры вызова и дополнительные селекторы можно на странице обучающего сайта https://www.w3schools.com/jquery/jquery_selectors.asp : - селектор $("*") выбирает все элементы - селектор $(this) выбирает текущий HTML документ - селектор $("p.intro") выбирает все абзацы, отмеченные классом .intro - селектор $("p:first") выбирает параграф, который встречается в разметке первым - селектор $("ul li:first") выбирает первый пункт ненумерованного списка - селектор $("ul li:first-child") выбирает каждый первый элемент в ненумерованных списках - селектор $("[href]") выбирает все элементы с атрибутом href - селектор $("a[target='_blank']") выбирает все ссылки с параметром target='_blank, то есть. открывающие страницу на новой вкладке браузера - селектор $("a[target!='_blank']") выбирает все ссылки, в которых значение параметра target не равно _blank - селектор $(":button") выбирает все кнопки и элементы формы ввода типа "button" - селектор $("tr:even") выбирает все четные строки таблицы ( элементы tr ) - селектор $("tr:odd") выбирает все нечетные строки таблицы ( элементы tr ) |
|||||
5 | События и их методы |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_events.asp На этом уроке мы поговорим о событиях и их методах. Отчёт отправил: 11019. Trira Выполнено за 1 день 9 час. 44 мин. [Показать отчёт] Научился: jQuery адаптирован для реагирования на события на HTML-странице. Событиями называют все действия посетителей, на которые может реагировать веб-страница. Событие представляет собой точный момент, когда что-то происходит. Реализован метод hover(), добавила в тело страницы несколько "input" тегов для реализации методов focus/blur() Объединила методы focus/blur() под одним методом on() Выполнила все задания внизу страницы по ссылке www.w3schools.com/jquery/jquery_events.asp Объединила методы hide/show() под одним методом on(), привязав их к событию наезда мышки на кнопку и ухода с нее для показа картинки Сложности: не получилось привязать событие клика мышкой по кнопке, чтобы добавить рамку на картинку |
|||||
6 | Эффекты скрытия и отображения |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_hide_show.asp На этом уроке мы переходим к разделу эффектов и начнём с базовых функций: show() и hide(). Отчёт отправил: 11019. Trira Выполнено за 2 час. 38 мин. [Показать отчёт] Научился: реализовывать эффекты скрытия и появления элементов на веб-страницах при помощи jQuery и на чистом JS. Пример использования можно увидеть здесь: https://codepen.io/Irina64/pen/ezpwWV Сложности: привыкнуть к особенностям реализации примеров в Codepen.io для удобства демонстрации. И, к сожалению, реализация без jQuery сразу не получилась в полном объеме. Ссылка на коллекцию с примерами https://codepen.io/collection/ZMbkwy |
|||||
7 | Эффекты появления и исчезновения |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_fade.asp На этом уроке мы переходим к эффекту: Fading. Отчёт отправил: 11019. Trira Выполнено за 1 день 23 час. 59 мин. [Показать отчёт] Научился: Протестировать функции fade*() с параметрами скорости. Пример расположен по ссылке https://codepen.io/Irina64/pen/gOgVqGO |
|||||
8 | Эффекты скольжения и базовая анимация |
|
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_slide.asp www.w3schools.com/jquery/jquery_animate.asp На этом уроке мы рассмотрим эффекты: Sliding и затронем начало раздела эффектов: Animate. Отчёт отправил: 11019. Trira Выполнено за 2 дня 3 час. 25 мин. [Показать отчёт] Научился: функции slide() https://codepen.io/Irina64/pen/ZEeERje анимация https://codepen.io/Irina64/pen/ExWjoBx Сложности: придумать анимацию https://codepen.io/Irina64/pen/mdWERpp Видеообзор: EhqhiCjB1sA |
|||||
9 | Эффекты анимации, продолжение |
1 тест |
|||
Мы продолжаем знакомство с библиотекой jQuery, проходя курс на крупнейшем сайте по веб-разработке: www.w3schools.com/jquery/jquery_animate.asp На этом уроке мы продолжаем рассматривать раздел эффектов: Animate. |
|||||
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 . |