JQuery
jQuery — набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.
Код jQuery как и код JavaScript состоит из последовательно идущих команд. Команды являются основной структурной единицей jQuery.
Стандартный синтаксис jQuery команд:
$(селектор).метод();
Знак $ сообщает, что символы идущие после него являются jQuery кодом;
Селектор позволяет выбрать элемент на странице;
Метод задает действие, которое необходимо совершить над выбранным элементом
С помощью селекторов можно выбирать элементы на странице для применения к ним определенных действий.
| Пример | Результат |
|---|---|
| $("p") | Будут выбраны все элементы p, которые находятся на странице |
| $(".par") | Будут выбраны все элементы на странице с class="par". |
| $("#par") | Будет выбран первый элемент на странице с id="par" |
| $(this) | Позволяет выбрать текущий HTML элемент. Щелкните на $(this) слева, чтобы посмотреть пример использования данного селектора в онлайн редакторе. |
| $("p.par") | Будут выбраны все элементы p на странице с class="par". |
| $("p#par") | Будут выбраны все элементы p на странице с id="par". |
| $("[src='значение']") | Будут выбраны все элементы со значениям атрибута src="значение". |
| $("[src$='.gif']") | Будут выбраны все элементы со значениями атрибута src заканчивающимися на .gif. |
| $(":input") | Будут выбраны все input элементы на странице. |
| $(":тип") | Будут выбраны все input элементы с <input type='тип'/>. Например :button выберет все <input type='button'/> элементы, :text выберет все <input type='text'/> элементы и т.д. |
Обработчики событий - это функции, код которых исполняется только после совершения определенных действий.
Обработчики событий присутствовали и в JavaScript, но jQuery облегчает их использование и расширяет их функциональность. Примеры действий, после которых выполняются обработчики:
- Курсор мыши наведен на элемент;
- Веб-страница или картинка полностью загружена;
- Изменено содержимое поля формы;
- HTML форма отправлена;
- Нажата клавиша на клавиатуре;
$(селектор).обработчик_события(function(){код_обработчика_события});
Объект event содержит информацию о произошедшем событии.
Объект event создается для каждого произошедшего события, но для того, чтобы иметь возможность обращаться к его свойствам и методам его необходимо явно передать в обработчик события.
$(селектор).событие(function(event){код_обработчика_события});
После того, как объект event был передан обработчику события, Вы можете обращаться к его свойствам и методам.
| pageX | Содержит координаты указателя мыши по оси X во время вызова события. |
| pageY | Содержит координаты указателя мыши по оси Y во время вызова события. |
Метод jQuery one() позволяет создавать обработчики, которые могут быть вызваны лишь один раз.
Метод jQuery toggle() позволяет переключаться между различными обработчиками событий по щелчку мыши.
Эффекты. Fade
С помощью jQuery методов fadeOut(), fadeIn() и fadeTo() можно постепенно скрывать и отображать элементы при помощи анимации.
Синтаксис:
//Позволяет постепенно скрыть выбранный элемент
$("селектор").fadeOut(скорость,функция);
//Позволяет постепенно отобразить выбранный элемент
$("селектор").fadeIn(скорость,функция);
//Позволяет постепенно скрыть/отобразить элемент до указанного значения прозрачности
$("селектор").fadeTo(скорость,прозрачность,функция);
Эффекты. Slide
С помощью jQuery методов slideUp, slideDown и slideToggle можно плавно изменять высоту выбранных элементов.Синтаксис:
//Позволяет изменяет высоту элемента до 0
$("селектор").slideUp(скорость,функция);
//Позволяет плавно возвратить элементу его изначальную высоту
$("селектор").slideDown(скорость,функция);
//При первом вызове будет действовать как slideUp, а при втором как
slideDown $("селектор").slideToggle(скорость,функция);
Анимация
С помощью метода animate() можно создавать на страницах полноценную анимацию.Синтаксис:
$("селектор").animate({стили},скорость, функция_смягчения, функция);
стили задает CSS стили для анимации (к элементу одновременно может быть применено несколько стилей).
скорость задает скорость анимации. Вы можете указать скорость используя предопределенные свойства: "slow", "fast", "normal" (медленно, быстро, нормально) или указать скорость в миллисекундах (1000 миллисекунд = 1 секунда).
функция_смягчения задает функцию, которая будет отвечать за плавность выполнения анимации.
функция указывает имя функции, код которой будет выполнен после завершения анимации.