242 подписчика

Учим основы jQuery за 30 минут

18 апреля 201818 апр 2018

317

4 мин

Оглавление

Для начала
Как всё-таки выучить jQuery за 30 минут?
Мини-вступление

jQuery - библиотека JavaScript, которая упрощает работу и взаимодействие с объектами и элементами DOM, а также позволяет реагировать на различные события, которые происходят внутри окна браузера.

Для начала

Загружаем библиотеку с официального сайта;
Помещаем в папку со скриптами;
С помощью тега <script> подгружаем библиотеку на страницу.

Как всё-таки выучить jQuery за 30 минут?

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

Мини-вступление

Учим селекторы

Учим события

Изучаем анимацию, атрибуты и кое-что ещё

Шпаргалка для начинающих

Функция $

Может возвращать различные элементы DOM, и её результат напрямую зависит от того, какие значения мы передаём в эту функцию. В неё мы можем передавать строчные значения. Часто сюда передают название селектора, который определяет, какие элементы нужно отобрать из всей структуры документа.

Селекторы

Селекторы позволяют отобрать необходимые элементы на странице для выполнения каких-либо дальнейших действий.

$('#sidebar') — все элементы с идентификатором sidebar
$('.post') — все элементы с классом post
$('div') — все элементы div
$('div.post') — все элементы div с классом post
$('div span') — все элементы span внутри div
$('div').find('span') — все элементы span внутри div
$('div > span') — все элементы span внутри div, при этом span должен быть прямым потомком div
$('div, span') — все div и span
$('span + img') — все img после span
$('#banner').prev() — элемент перед #banner
$('#banner').next() — элемент после #banner
$('*') — всё
$('p > *') — все потомки элемента p
$('p').children() — все потомки p
$('p').parent() — все непосредственные предки p
$('p').parents() — все предки p
$('p').parents('div') — все предки p, которые div

Фильтры

Фильтра позволяют больше конкретизировать выборку элементов и делать селекторы более гибкими.

$('div:first') — первый div
$('div:last') — последний div
$('div:not(.post)') — div у которых нет класса post
$('div:even') — четные div
$('div:odd') — нечетные div
$('div:eq(3)') — div, 3-й по счету
$('div:gt(3)') — div с индексом > 3
$('div:lt(3)') — div с индексом < 3
$(':header') — все заголовки h1, h2, h3 и т.д.
$('div:contains("Copyright")') — div содержащие текст Copyright
$('div:empty') — пустые div
$('div:has(p)') — div содержащие p
$('div').filter('.post') — div содержащие класс post
$('div:hidden') — скрытые div
$('div:visible') — видимые div
$("div[class]") — все div с атрибутом class
$("div[title = 'title']") — все div с атрибутом title="title"
$("div[title != 'title']") — все div с атрибутом title не равным "title"
$("div[title ^= 'ti']") — все div с атрибутом title начинающимся с "ti"
$("div[title $= 'le']") — все div с атрибутом title заканчивающимся на "le"
$("div[title *= 'itl']") — все div с атрибутом title содержащим "itl"
$(":text") — все input с типом text
$(":radio") — все input с типом radio
$("input:enabled") — все включенные элементы input
$("input:checked") — все отмеченные чекбоксы
$("div[title = 'title']:visible:has(p)") — div с атрибутом title="title", видимый, содержащий теги p
$("form select option:selected") — выбранные элементы select
$("form :radio[name=some]:checked").val() — получение выбранного значения радиобатона с именем some
$("form :checkbox:checked") — выбор всех выбранных чекбоксов

События

События определяют, при каких условиях инициализируются те или иные обработчики событий.

change — изменение значения элемента (значение при потери фокуса, элемента отличается от изначального, при получении фокуса)
click — клик по элементу (порядок событий — mousedown, mouseup, click)
dblclick — двойной клик по элементу
resize — изменение размеров элементов
scroll – скроллинг элемента
select — выбор текста (актуален только для input[type=text] и textarea)
submit — отправка формы
focus — фокус на элементе – актуально для input[type=text], но в современных браузерах работает и с другими элементами
blur — фокус ушел с элемента – актуально для input[type=text] — срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab’у)
focusin — фокус на элементе, данное событие срабатывает на предке элемента, для которого произошло событие focus
focusout — фокус ушел с элемента, данное событие срабатывает на предке элемента, для которого произошло событие blur
keydown — нажатие клавиши на клавиатуре
keypress — нажатие клавиши на клавиатуре (порядок событий — keydown, keypress, keyup)
keyup — отжатие клавиши на клавиатуре
load — загрузка элемента (img)
unload — выгрузка элемента или переход на другую страницу (window)
mousedown — нажатие клавиши мыши
mouseup — отжатие клавиши мыши
mousemove — движение курсора
mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
mouseleave — вывод курсора из элемента, не срабатывает при переходе фокуса на дочерние элементы
mouseover — наведение курсора на элемент
mouseout — вывод курсора из элемента