jQuery

jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

Селекторы

Код jQuery как и код JavaScript состоит из последовательно идущих команд. Команды являются основной структурной единицей jQuery. Стандартный синтаксис jQuery команд:

$(селектор).метод();

Знак $ сообщает, что символы идущие после него являются jQuery кодом;

Селектор позволяет выбрать элемент на странице;

Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:

Методы для манипулирования DOM;
Методы для оформления элементов;
Методы для создания AJAX запросов;
Методы для создания эффектов;
Методы для привязки обработчиков событий.

Некоторые JavaScript библиотеки тоже используют $ для обозначения своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery предусмотрена команда noConflict(). С помощью команды noConflict() Вы можете заменить знак $ на любой другой.

let произвольное_имя = jQuery.noConflict();

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

$('*') - Будут выбраны все элементы присутствующие на странице
$("p") - Будут выбраны все элементы p, которые находятся на странице
$(".par") - Будут выбраны все элементы на странице с class="par"
$("#par") - Будет выбран первый элемент на странице с id="par"
$("p > div") - Будут выбраны все элементы потомки div родительского элемента p
$(this) - Позволяет выбрать текущий HTML элемент
$("p.par") - Будут выбраны все элементы p на странице с class="par"
$("p#par") - Будут выбраны все элементы p на странице с id="par"
$(".par,.header,#heat") - Будут выбраны все элементы на странице со значениями атрибутов class="par", class="header" и id='heat'
$("[src]") - Будут выбраны все элементы на странице, имеющие атрибут src
$("[src='значение']") - Будут выбраны все элементы со значениям атрибута src="значение"
$("[src$='.gif']") - Будут выбраны все элементы со значениями атрибута src заканчивающимися на .gif
$("div#wrap .par1") - Будут выбраны все элементы с class=par1, которые находятся внутри элементов div с id=wrap
$(":input") - Будут выбраны все input элементы на странице
$(":тип") - Будут выбраны все input элементы с <input type='тип' />. Например :button выберет все <input type='button' /> элементы, :text выберет все <input type='text' /> элементы и т.д.
$("div:first") - Будет выбран первый div элемент на странице
$("div:last") - Будет выбран последний div элемент на странице
$("li:even") - Будут выбраны все элементы списка с четными индексами. Так как нумерация индексов элементов начинается с 0, то по сути будут выбраны нечетные элементы т.е. 1й, 3й, 5й элементы списка и т.д
$("li:odd") - Будут выбраны все элементы с нечетными индексами. Так как нумерация индексов элементов начинается с 0, то по сути будут выбраны четные элементы т.е. 2й, 4й, 6й элементы списка и т.д.
$("li:eq(3)") - Будет выбран 4 элемент списка (нумерация элементов в списке начинается с нуля)
$("li:gt(1)") - Будут выбраны все элементы списка индекс которых больше 1 (т.е. все элементы списка начиная с 3 элемента)
$("li:lt(2)") - Будут выбраны все элементы списка индекс которых меньше 2 (т.е. первые 2 элемента списка)
$(":header") - Будут выбраны все элементы на странице являющиеся заголовками (т.е. элементы h1, h2, h5 и т.д.)
$(":animated") - Будут выбраны все анимированные элементы, которые находятся на странице
$(":contains('web')") - Будут выбраны все элементы содержащие строку web
$(":empty") - Будут выбраны все элементы не имеющие узлов потомков
$(":hidden") - Будут выбраны все скрытые элементы на странице
$(":visible") - Будут выбраны все видимые элементы находящиеся на странице

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

В jQuery можно избавиться от преждевременного выполнения кода следующими способами:

//Первый способ:
$(document).ready(function() {
    Код который будет выполнен после полной загрузки документа
});

//Второй способ:
$().ready(function() {
    Код который будет выполнен после полной загрузки документа
});

//Третий способ:
$(function() {
    Код который будет выполнен после полной загрузки документа
});

Для того, чтобы сократить размер кода Вы можете соединять команды jQuery в цепочки. Команды в цепочке будут выполняться поочередно слева направо.

//Код без сокращения
$("p").css("color","green");
$("p").css("font-size","30px");

//Сокращенный код
$("p").css("color","green").css("font-size","30px");

События

Обработчики событий - это функции, код которых исполняется только после совершения определенных действий. Общий вид определения обработчиков jQuery:

$(селектор).обработчик_события(function(){код_обработчика_события});

$(document).ready(function() {
    $("p").mouseover(function(){$("p").css("color","green")});
    $("p").mouseout(function(){$("p").css("color","black")});
});

$(document).ready(function() {
    $("#but1").click(function(){alert("Вы нажали один раз на первую кнопку!");});
    $("#but2").dblclick(function(){alert("Вы нажали два раза на вторую кнопку!");});
});

$(document).ready(function() {
    $("#el1").focus(function(){$(this).attr("value","")});
    $("#el1").blur(function(){$(this).attr("value","Введите ФИО")});
    $("#el2").change(function(){ alert("Содержимое данного элемента было изменено.") });
});

С помощью jQuery Вы можете также вызывать обработчики событий привязанные к элементу. Например: $('#test').blur() вызовет обработчик blur у элемента с id='test'.

$(document).ready(function() {
// Зададим обработчик события, который будет выводить сообщение при нажатии на кнопку с id=but1
    $("#but1").click(function(){alert("Вы нажали на кнопку с id=but1")});

// Вызовем обработчик click у элемента с id='but1'
    $("#but1").click();
});

blur() - Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент перестанет быть активным
change() - Привязывает или вызывает функцию, код которой будет выполнен в случае изменения содержимого выбранного элемента
click() - Привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен щелчок мыши
dblclick() - Привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен двойной щелчок мыши
focus() - Привязывает или вызывает функцию, код которой будет выполнен, когда выбранный элемент станет активным
focusin() - Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент или один из его элементов потомков станет активным
focusout() - Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент или один из его элементов потомков перестанет быть активным
hover() - Привязывает одну или две функции к выбранному элементу. Код первой привязанной функции выполнится, когда на выбранный элемент будет наведен курсор мыши, а второй, когда курсор мыши покинет пределы этого элемента
keydown() - Привязывает или вызывает функцию, код которой выполнится, когда на клавиатуре будет нажата клавиша
keyup() - Привязывает или вызывает функцию, код которой выполнится, когда нажатая на клавиатуре клавиша будет отпущена
mousedown() - Привязывает или вызывает функцию, код которой будет выполнен после нажатия клавиши мыши на выбранном элементе
mouseenter() - Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши
mouseleave() - Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента
mousemove() - Привязывает или вызывает функцию, код которой будет выполнен при передвижении указателя мыши в границах выбранного элемента
mouseout() - Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента
mouseover() - Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши
mouseup() - Привязывает или вызывает функцию, код которой будет выполнен, когда нажатая кнопка мыши будет отпущена
ready() - Привязывает или вызывает функцию, код которой будет выполнен, когда страница будет полностью загружена
resize() - Привязывает или вызывает функцию, код которой будет выполнен при изменении размера окна браузера
scroll() - Привязывает или вызывает функцию, код которой будет выполнен при прокрутке содержимого элемента
select() - Привязывает или вызывает функцию, код которой будет выполнен при выделении текста выбранного элемента
submit() - Привязывает или вызывает функцию, код которой будет выполнен при отправлении содержимого выбранной формы

Объект event содержит информацию о произошедшем событии. Объект event создается для каждого произошедшего события, но для того, чтобы иметь возможность обращаться к его свойствам и методам его необходимо явно передать в обработчик события. Синтаксис:

$(селектор).событие(function(event){код_обработчика_события});

После того, как объект event был передан обработчику события, Вы можете обращаться к его свойствам и методам. В примере ниже с помощью объекта event мы будем выводить координаты, на которых находился курсор мыши во время того, как произошло событие.

$(document).ready(function() {
    $("#square").click(function(event) {
        $("#coord").css("display","block");
        $("#x").html(event.pageX);
        $("#y").html(event.pageY);
    });
});

Свойства event:

currentTarget - Содержит имя DOM элемента, в котором произошло событие
data - Содержит дополнительные данные переданные обработчику события во время привязки его к элементу
pageX - Содержит координаты указателя мыши по оси X во время вызова события
pageY - Содержит координаты указателя мыши по оси Y во время вызова события
result - Содержит последнее значение возвращенное вызванным ранее обработчиком события
target - Содержит имя DOM элемента, который вызвал событие
timeStamp - Содержит количество прошедших с 1 Января 1970 года миллисекунд до вызова данного события
type - Содержит тип (название) произошедшего события
which - Содержит код кнопки, которая была зажата во время вызова данного события

Методы event:

isDefaultPrevented() - Позволяет узнать был ли вызван метод preventDefault() для данного элемента
isImmediatePropagationStopped() - Позволяет узнать был ли вызван метод stopImmediatePropagation() для данного элемента
isPropagationStopped() - Позволяет узнать был ли вызван метод stopPropagation() для данного элемента
preventDefault() - Предотвращает выполнение стандартного действия элемента
stopImmediatePropagation() - Запрещает вызов остальных обработчиков события привязанных к элементу
stopPropagation() - Останавливает "всплытие" вызова события к родительским элементам

С помощью методов представленных ниже, Вы сможете управлять обработчиками событий.

bind() - Привязывает к выбранному элементу один обработчик события или более
delegate() - Добавляет один обработчик события или более к элементам потомкам выбранного элемента
one() - Привязывает к выбранному элементу один обработчик события или более. Привязанные обработчики при этом могут быть вызваны только один раз
toggle() - Позволяет привязать к выбранному элементу несколько обработчиков событий, между вызовами которых можно переключатся по щелчку мыши
trigger() - Вызывает указанный обработчик события у выбранного элемента
triggerHandler() - Вызывает указанный обработчик события у выбранного элемента
unbind() - Удаляет у выбранных элементов обработчики событий, которые были привязаны с помощью метода bind()
undelegate() - Удаляет у выбранных элементов обработчики событий, которые были привязаны с помощью метода delegate()

Эффекты

Эффекты представленные ниже позволяют скрывать и отображать элементы различными способами:

fadeIn() - Постепенно меняет прозрачность выбранного элемента делая его видимым
fadeOut() - Постепенно меняет прозрачность выбранного элемента делая его невидимым
fadeTo() - Постепенно меняет прозрачность выбранного элемента до указанного значения
hide() - Скрывает выбранный элемент
show() - Отображает скрытый элемент
slideDown() - Постепенно изменяет высоту выбранного элемента делая его видимым
slideToggle() - Применяет к выбранному элементу метод slideDown() если он невидим и slideUp() если он отображен
slideUp() - Постепенно изменяет высоту выбранного элемента делая его невидимым

$(document).ready(function(){
    $("#but1").click(function(){$("#par1").fadeOut(3000)});
    $("#but2").click(function(){$("#par1").fadeIn(3000)});
    $("#but3").click(function(){$("#par1").fadeTo(3000,0.3)});
    $("#but4").click(function(){$("#par1").fadeTo(3000,0.8)});
    $("#but5").click(function(){
        $("#par1").fadeOut(3000,function(){
            alert("Абзац был полностью скрыт.");
        });
    });
});

С помощью методов перечисленных ниже Вы можете создать на Ваших страницах анимацию:

animate() - Выполняет заданную анимацию для выбранного элемента
clearQueue() - Очищает очередь функций выбранного элемента
delay() - Устанавливает задержку вызова следующей функции в очереди выбранного элемента
dequeue() - Вызывает следующую функцию в очереди выбранного элемента
stop() - Останавливает выполнение анимации для выбранного элемента
queue() - Позволяет добавлять функции в очередь выбранного элемента

$(document).ready(function() {
    $("#but1").click(function() {
        $("p").animate({fontSize:30},2000);
        $("p").animate({top:220},2000);
        $("p").animate({fontSize:"1em"},2000);
        $("p").animate({left:320},2000);
        $("p").animate({top:0,left:0},2000);
    });
});

DOM

С помощью методов перечисленных ниже Вы можете производить различные манипуляции над DOM:

add() - Добавляет указанный элемент к группе выбранных элементов
addClass() - Добавляет указанный класс или классы выбранному элементу
after() - Вставляет указанное содержимое после выбранного элемента
append() - Вставляет указанное содержимое в конце содержимого выбранного элемента
appendTo() - Вставляет указанное содержимое в конце содержимого выбранного элемента
attr() - Вставляет новое или возвращает текущее значение указанного атрибута выбранного элемента
before() - Вставляет указанное содержимое перед выбранным элементом
children() - Возвращает все элементы потомки указанного элемента
contents() - Возвращает все элементы потомки указанного элемента включая текстовые узлы и узлы комментарии
clone() - Позволяет скопировать выбранный элемент
detach() - Удаляет выбранный элемент (при этом сохраняя его копию)
empty() - Удаляет содержимое выбранного элемента и всех его элементов потомков
eq() - Позволяет выбрать элемент из группы элементов по его порядковому номеру
first() - Возвращает первый элемент из группы выбранных элементов
hasClass() - Проверяет содержит ли выбранный элемент класс с указанным именем
html() - Устанавливает новое или возвращает текущее содержимое выбранного элемента
insertAfter() - Вставляет новый (или перемещает существующий) элемент после выбранного элемента
insertBefore() - Вставляет новый (или перемещает существующий) элемент перед выбранным элементом
last() - Возвращает последний элемент из группы выбранных элементов
next() - Возвращает следующий элемент брат за выбранным элементом
nextAll() - Возвращает все элементы братья, которые следуют за выбранным элементом
parent() - Возвращает родительский элемент выбранного элемента
prev() - Возвращает предыдущий элемент брат выбранного элемента
prevAll() - Возвращает все элементы братья, которые следуют перед выбранным элементом
prepend() - Вставляет указанное содержимое в начало содержимого выбранного элемента
prependTo() - Вставляет указанное содержимое в начало содержимого выбранного элемента
remove() - Удаляет выбранный элемент
removeAttr() - Удаляет указанный атрибут у выбранного элемента
removeClass() - Удаляет у выбранного элемента один класс или более
replaceAll() - Заменяет текущий элемент новым содержимым
replaceWith() - Заменяет текущий элемент новым содержимым
siblings() - Возвращает все элементы братья указанного элемента
text() - Устанавливает новое или возвращает текущее текстовое содержимое выбранного элемента
toggleClass() - Поочередно присваивает указанные классы выбранному элементу
unwrap() - Удаляет родительский элемент выбранного элемента
val() - Устанавливает новое или возвращает текущее содержимое атрибута value выбранного элемента
wrap() - Оборачивает каждый выбранный элемент указанным тэгом (или группой тэгов)
wrapAll() - Оборачивает группу выбранных элементов указанным тэгом (или группой тэгов)
wrapInner() - Оборачивает содержимое каждого выбранного элемента указанным тэгом (или группой тэгов)

CSS

С помощью методов перечисленных ниже Вы можете производить различные манипуляции над оформлением элементов:

addClass() - Добавляет указанный класс или классы выбранному элементу
css() - Позволяет узнать текущее или установить новое значение указанному CSS свойству (или свойствам) выбранного элемента
hasClass() - Проверяет содержит ли выбранный элемент класс с указанным именем
height() - Позволяет узнать текущую или установить новую высоту выбранному элементу
offset() - Позволяет узнать текущее или установить новое местоположение выбранного элемента относительно границ текущего документа
position() - Позволяет узнать текущее местоположение выбранного элемента относительно родительского
removeClass() - Удаляет у выбранного элемента один класс или более
scrollLeft() - Позволяет узнать текущую или установить новую позицию полосы прокрутки выбранного элемента по вертикали
scrollTop() - Позволяет узнать текущую или установить новую позицию полосы прокрутки выбранного элемента по горизонтали
toggleClass() - Поочередно присваивает указанные классы выбранному элементу
width() - Позволяет узнать текущую или установить новую ширину выбранному элементу

AJAX

С помощью JavaScript Вы можете создавать асинхронные запросы и отправлять их на сервер. Использование асинхронных запросов позволяет значительно ускорить загрузку страниц, так как в этом случае обновляться будет только та часть страницы, которая содержит новые данные, а не страница целиком. Техника использования асинхронных запросов называется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).

$.ajax() - Выполняет AJAX запрос
ajaxComplete() - Определяет функцию, код которой будет выполнен когда AJAX запрос будет совершен
ajaxError() - Определяет функцию, код которой будет выполнен если во время выполнения AJAX запроса произойдет ошибка
ajaxSend() - Определяет функцию, код которой будет выполнен перед отправлением AJAX запроса на сервер
$.ajaxSetup() - Позволяет установить данные для будущих AJAX запросов
ajaxStart() - Определяет функцию, код которой будет выполнен перед тем, как первый AJAX запрос из группы запросов будет отправлен на сервер
ajaxStop() - Определяет функцию, код которой будет выполнен, когда последний AJAX запрос из группы запросов будет совершен
ajaxSuccess() - Определяет функцию, код которой будет выполнен если AJAX запрос будет совершен успешно
$.get() - Позволяет загрузить данные с сервера используя HTTP запрос GET
$.getJSON() - Позволяет загрузить JSON - данные с сервера используя HTTP запрос GET
$.getScript() - Позволяет загрузить с сервера JavaScript код и исполнить его
load() - Позволяет загрузить данные с сервера и вставить их в содержимое выбранного HTML элемента
$.param() - Позволяет создать сериализованное представление массива или объекта
$.post() - Позволяет загрузить данные с сервера используя HTTP запрос POST
serialize() - Позволяет закодировать группу элементов формы как строку для отправки с помощью AJAX запроса
serializeArray() - Позволяет закодировать группу элементов формы как массив из их имен и значений