jquery обучение с нуля
jQuery Учебник
Примеры в каждом разделе
С помощью нашего онлайн-редактора вы можете редактировать код и нажимать кнопку, чтобы просмотреть результат.
Пример
Кликните на кнопку «Попробуйте сами» чтобы увидеть, как она работает.
jQuery Упражнения
jQuery Примеры
Учитесь на примерах! В W3Schools вы найдете множество примеров jQuery для редактирования и тестирования.
jQuery Проверочная викторина
Проверьте свои навыки jQuery в W3Schools!
jQuery Справочники
На W3Schools вы найдете полный справочник по всем селекторам, методам, свойствам и событиям jQuery.
Онлайн Сертификация W3Schools
Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и карьеру.
Больше 25 000 сертификатов уже выдано!
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Учебник jQuery для начинающих
Я таки решился и собрал все свои статьи из серии «jQuery для начинающих» в одном учебнике, который и хочу представить на суд общественности.
Скачиваем, читаем, пробуем
Чтобы долго не искали, даю сразу ссылки на учебник в PDF формате (1,8Mb):
И интерактивные примеры кода:
Убедительная просьба, если вы хотите рассказать о данном учебнике, то указывайте ссылку на страницу: http://anton.shevchuk.name/jquery-book/, так как со временем я буду обновлять учебник, и прямые ссылки будут не актуальны (а возможно даже вредны :). Я конечно же постараюсь поддерживать ссылки на Хабре в актуальном состоянии, но возможны случайности.
Историческая справка
Первая версия jQuery была представлена публике в августе 2006-го года разработчиком Джоном Резигом. До конца года выходили багфиксы, которые завершились на версии 1.0.4. В 2007-м началась и закончилась разработка ветки 1.1.х, к тому моменту jQuery уже начинает завоёвывать сердца разработчиков. В феврале 2008-го выходит версия 1.2.3, а дизайнер из Торонто Ник Ла пишет замечательную статью jQuery Tutorials for Designers, и к ней написано уже больше тысячи комментариев. И вот, в марте того же года, я публикую перевод данной статьи на своём блоге, c которой и начинается серия «для начинающих».
Чтобы было не так скучно читать анонс, я решил разбавить информацию статистикой, и она может быть любопытна:
800 000 уникальных посетителей
30 000 уникальных посетителей
Учебник jQuery для новичков от Трепачёва Дмитрия
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
В данном уроке мы с вами начнем изучать библиотеку jQuery. Для работы с ней вы должны владеть хотя бы минимальными навыками JavaScript.
Что такое jQuery?
Код jQuery выглядит намного компактнее и проще для написания.
Подключение jQuery
Для начала его нужно скачать jQuery с официального сайта. Затем положить полученный файл в папку с вашим сайтом и подключить его таким образом:
После подключения можно начинать писать код с использованием этой библиотеки.
Видео для тех, кто ничего не понял
Здесь скоро появится видео по подключению jQuery.
Начало работы с jQuery
Работа с библиотекой jQuery осуществляется с помощью универсальной функции $, которая для краткости состоит всего лишь из одного символа.
После доллара следует писать круглые скобки (это же функция), в которых указываются параметры (обычно один параметр), примерно вот так: $(параметр).
Чаще всего с помощью доллара $ получают группу HTML элементов по CSS селектору.
Давайте получим все элементы с классом .www:
А теперь получим только абзацы с классом p.www:
А теперь получим элемент с id, равным www:
Как вы видите, используются обычные CSS селекторы, подобно методу querySelectorAll. Только querySelectorAll появился гораздо позже, чем jQuery, и обладает меньшими возможностями (зато работает быстрее).
Наборы jQuery
Обратите внимание на переменную elems:
В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.
Вы можете одновременно менять все элементы набора jQuery (в отличие от querySelectorAll никаких циклов не требуется).
В принципе, переменная elems чаще всего и не нужна, так как jQuery позволяет применять полезные функции прямо к набору, в виде методов.
К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:
Почти все методы jQuery возвращают набор, к которому этот метод был применен, что позволяет выстраивать цепочки методов любой длины.
Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на ‘новый текст’:
jQuery для начинающих
jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобиться сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?
Выдвижная панель
Начнем с простенького примера — слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между «active» и «btn-slide»), а панелька с будет выдвигаться/прятаться. (класс «active» изменяет позицию фонового изображения, см. CSS файл во вложении).
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
Связанная анимация
— уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром: «slow», «normal», «fast» или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 5: затем opacity=1, left=0, height=100, width=100, скорость — «slow»
Line 6: затем top=0, скорость — «fast»
Line 7: затем slideUp (с дефолтной скоростью анимации — «normal»)
Line 8: затем slideDown, скорость — «slow»
Line 9: возвращаем false для того чтобы браузер не перешел по ссылке
Гармошка #1
внутри
, для следующего в нём элемента
будет применен эффект slideToggle, затем для всех остальных элементов
будет применен эффект slideUp. Следующие действие изменяет класс заголовка на «active», затем ищем все остальные заголовки
и убираем у них класс «active»
Гармошка #2
Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)
В CSS у нас указано для всех элементов
Анимация для события hover #1
Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:
Анимация для события hover #2
Кликабельные блоки
Складывающиеся панельки
— вызывает метод slideToggle для следующего элемента
Имитация Backend’a WordPress’a
(цвет изменяется на красный), и изменяет параметр «opacity» на «hide»
Галерея изображений
По клику на изображения в
Стилизируем ссылки
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека jQuery-PHP
jQuery для начинающих.ч.1. Начинаем с нуля
Как веб-дизайнеру, мне давно стал интересна такая вещь, как библиотека Javascript jQuery. Не владея ей, я не могу считать себя достаточно профессиональным. В этой серии уроков мы с вами разберёмся в азах jQuery. После этого цикла в блоге появятся более серьёзные и продвинутые статьи по этой библиотеке.
Что такое jQuery и почему он?
Почему jQuery? Потому что во-первых нам отныне не придётся прописывать кучу кода Javascript, и мы научимся выполнять то же самое, прописав всего лишь одну- две строки. И потому что jQuery, подобно WordPress, имеет кучу улучшений и дополнений.
Если брать из Википедии,
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
Работа в jQuery. Первые команды
Для начала подключим jQuery:
Убедитесь, что используете Minifest — версию.
Второй, и более верный способ — подключать через Google’s Content Delivery Network (CDN). Это гарантирует самую последнюю версию.
Комбинировать можно как угодно.
Создадим новый Div на нашей странице.
Пропишем ему стили:
получится что-то в этом духе:
Заставим его двигаться.
Финальной частью нашего первого урока будет движение этого блока на странице. Для начала выделим его:
Вообще есть у этой функции три опции, но одна необязательна.
Если более детально взглянуть на «что поменять», видим:
То есть в итоге мы задаём отступ сверху 300, слева 400, и скорость 1000. 1000=1сек. ‘возврат’ выполняется после совершения движения, но сейчас мы обойдёмся без него.