jQuery - Описание библиотеки

jQuery — javascript библиотека, использование которой делает разработку на javascript кода намного быстрее и проще. В недалеком прошлом эта библиотека позволяла быстро разрабатывать скрипты. В настоящее время чистый javascript продвинулся настолько, что использование jQuery для многих проектов становится ненужным. Например: как обойтись без jQuery.

Подключение jQuery к вашему сайту

Можно скачать библиотеку jQuery с официального сайта и положить у себя на сайте, после этого подключить следующей командой:

<script type="text/javascript" src="jquery.min.js"></script>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
//или
<script src="https://yastatic.net/jquery/2.2.0/jquery.min.js"></script>

Особенно актуально, если используете метрику или аналитику...

Возможности библиотеки jQuery

Формат запроса jQuery выглядит следующим образом:
$('селектор').действие('свойства действия');

Поиск элемента на странице (селекторы)

$("*")	вернет все элементы на странице
$("div")	вернет все div-элементы на странице
$(".someBlock")	вернет все элементы с классом someBlock
$("#content")	вернет элемент с идентификатором content
$(Object)	привязать всю функциональность jQuery к уже существующим объектам DOM-элементов. Пример: var el = document.getElementById("some_id"); $(el).css("margin", "5px");
$("#content2 div.someBlock")	вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2
$("div:odd")	вернет div-элементы, находящиеся на странице под нечетными номерами
$("div:hidden")	вернет скрытые div-элементы
$("[value = 5]")	вернет все элементы с атрибутом value, равным 5
$("div, span, p.lok").css("border", "1px solid red");	Данный оператор добавит рамку ко всем div-ам, span-ам, и абзацам, имеющим класс lok. Таким образом, через зяпятую можно указать любые селекторы.

Комбинированные селекторы

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

"first, second, ..."	элементы удовлетворяющие любому из селекторов first, second, ...
"outer inner"	элементы из inner, которые являются потомками (т.е. лежат внутри) элементов из outer
"parent > child"	элементы из child, которые являются прямыми потомками элементов из parent
"prev + next"	элементы из next, которые следуют непосредственно за элементами из prev
"prev ~ next"	элементы из next, которые следуют за элементами из prev

Селекторы по атрибутам

"[name]"	элементы, содержащие атрибут name
"[name = value]"	элементы, у которых значение атрибута name совпадает с value
"[name != value]"	элементы, у которых значение атрибута name не совпадает с value
"[name ^= value]"	элементы, у которых значение атрибута name начинается с value
"[name $= value]"	элементы, у которых значение атрибута name заканчивается на value
"[name *= value]"	элементы, у которых значение атрибута name содержит подстроку value
"[name ~= value]"	элементы, у которых значение атрибута name содержит слово value
"[name |= value]"	элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: "value-*")
"[first][second][..."	элементы, соответствующие всем заданным условиям на атрибуты одновременно

Простые фильтры

Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS

":focus"	элемент, находящийся в фокусе
":first"	первый найденный элемент
":last"	последний найденный элемент
":eq( )"	элемент идущий под заданным номером среди выбранных
":not(selector)"	все найденные элементы, кроме указанных в selector
":even"	элементы с четными номерами позиций, в наборе выбранных элементов
":odd"	элементы с нечетными номерами позиций, в наборе выбранных элементов
":gt( )"	элементы с индексом превышающим n
":lt( )"	элементы с индексом меньшим, чем n
":header"	элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.)
":animated"	элементы, которые в данный момент задействованы в анимации
":hidden"	невидимые элементы страницы
":visible"	видимые элементы страницы
":lang(language)"	элементы, в которых указаны языки содержимого
":root"	элемент, который является корневым в документе

Фильтры по содержимому

":contains(text)"	элементы, содержащие заданный текст
":empty"	элементы без содержимого (без текста и других элементов)
":has(selector)"	элементы, которые содержат хотя бы один элемент из selector
":parent"	непустые элементы

Фильтры дочерних элементов

Данные селекторы отфильтровывают элементы по их расположению в родительских элементах

":first-child"	элементы, расположенные первыми в своих родительских элементах
":last-child"	элементы, расположенные последними в своих родительских элементах
":nth-child( )"	элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером)
":nth-child-last( )"
":only-child"	элементы, являющиеся единственными потомками в своих родительских элементах
":only-of-type"	элементы, являющиеся единственными, удовлетворяющими селектору, потомками в своих родительских элементах
":first-of-type"	те из выбранных элементов, которые первыми встречаются в своих родительских элементах
":last-of-type"	те из выбранных элементов, которые последними встречаются в своих родительских элементах
":nth-first-of-type( )"	те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах
":nth-last-of-type( )"

Фильтры элементов форм

":button"	элементы с тегом button или типом button
":radio"	элементы, являющиеся переключателями
":checkbox"	элементы, являющиеся флажками
":text"	элементы, являющиеся текстовыми полями
":password"	элементы, являющиеся полями ввода пароля
":file"	элементы, являющиеся полями загрузки файлов
":submit"	элементы, являющиеся кнопками отправки формы
":reset"	элементы, являющиеся кнопками очистки формы
":image"	элементы, являющиеся изображениями для отправки формы (input типа image)
":input"	элементы, являющиеся элементами формы (с тегами input, textarea или button)
":selected"	выбранные элементы (со статусом selected). Это могут быть элементы типа <option>.
":focus"	элементы формы, находящиеся в фокусе.
":checked"	выбранные элементы (со статусом checked). Это могут быть элементы типа <checkbox> или <radio>.
":enabled"	активные элементы формы (со статусом enabled)
":disabled"	неактивные элементы формы (со статусом disabled)

Перемещение по дереву элементов

.parent()	вернет родительские элементы всех выбранных элементов.
.parents()	Находит всех предков у выбранных элементов, т.е. не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM.
.parentsUntil()	Находит предков, как и .parents(), но прекращает поиск перед элементом, удовлетворяющим заданному селектору.
.offsetParent()	Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию).
.children()	вернет дочерние элементы всех выбранных элементов.
.next()	вернет элемент, лежащий сразу после выбранных элементов.
.nextAll()	Находит элементы, которые лежат после каждого из выбранных элементов.
.nextUntil()	Находит элементы, которые лежат после каждого из выбранных, но не дальше элемента, удовлетворяющего заданному селектору.
.prev()	вернет элементы, лежащие перед выбранных элементов.
.prevAll()	Находит элементы, которые лежат перед каждым из выбранных элементов.
.prevUntil()	Находит элементы, которые лежат перед каждым из выбранных, но не дальше элемента, соответствующего заданному селектору.
.siblings()	Находит все соседние элементы (под соседними понимаются элементы с общим родителем).
.eq(i)	вернет элемент, с индексом i в наборе. Методы jQuery для него доступны.
.get(i)	вернет DOM-объект выбранных элементов, с индексом i. Методы jQuery для него не доступны.
.get()	вернет массив DOM-объеков всех выбранных элементов
.size()	вернет размер набора (количествово выбранных элементов).
.each(func)	выполнить func для каждого эллемента.
.map()	Вызывает заданную функцию для каждого элемента набора, и в итоге создает новый набор, составленный из значений, возвращенных этой функцией.
.closest()	Находит ближайший, соответствующий заданному селектору элемент, из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM.
.find()	Находит элементы по заданному селектору, внутри выбранных элементов.
.filter()	Фильтрует набор выбранных элементов с помощью заданного селектора или функции.
.first()	Возвращает первый элемент в наборе.
.has()	Фильтрует набор выбранных элементов, оставляя те, которые имеют потомков, соответствующих селектору.
.is()	Проверяет, содержится ли в наборе, хотя бы один элемент удовлетворяющий заданному селектору.
.last()	Возвращает последний элемент в наборе.
.not()	Возвращает элементы, не соответствующие заданным условиям.
.slice()	Возвращает элементы с индексами из определенной области (например от 0 до 5).
.add()	Добавляет заданные элементы в набор.
.andSelf()	Добавляет элементы из предыдущего набора, к текущему (речь идет об одной цепочке методов).
.contents()	Находит все дочерние элементы у выбранных элементов. В результат, помимо элементов, включается и текст.
.end()	Возвращает предыдущий набор элементов в текущей цепочке методов.

Манипуляция с найденными элементами

.hide()	Скрыть элемент. .hide("slow") - скрыть элемент медленно. «slow», «normal», «fast» или число миллисекунд. Вторым параметром может быть задана Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.
.show()	Отобразить элемент. .show("slow") - скрыть элемент медленно.
.css("height")	возвратит значение высоты у элемента с идентификатором bigIt.
.css("width", "20px")	установит новое значение ширины
.attr("class")	возвратит значение класса элемента
.attr("class", "box")	установит новое значение атрибута class у элемента
.html("Новое")	изменит все html-содержимое элемента на заданное в методе html
.text()	возвратит текст, находящийся внутри элемента
.empty()	очистить от содержимого элементы
.offset() .position()	позволят узнать или изменить позицию выбранного элемента.
.width() .height()	позволят узнать или изменить размеры выбранного элемента.
.animate(properties, [duration], [easing], [callback])	анимация. properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}. duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). callback — функция, которая будет вызвана после завершения анимации. Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым: $("#mydiv").animate({height: "hide"}, 300).text("Новый текст").animate({height: "show"}, 300); значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.

События

Базовые

.on(events, [selector], [data], handler)	Универсальный метод для установки обработчиков событий на выбранные элементы страницы. events: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error selector — селектор по которому будут фильтроваться элементы, лежащие внутри уже найденных. В итоге, обработчик будет срабатывать только в том случае, если событие «поднялось» от одного из отфильтрованных элементов. data — данные, передаваемые обработчику событий. В обработчике будут доступны в переменной event.data. handler — функция, которая будет установлена в качестве обработчика. Например: ('#foo').on('click', function(){alert('Вы нажали на элемент "foo"');}); Обработчик для всех элементов li: $('ul').on('click', 'li', function(event){})
.off()	Удаляет обработчики, установленные с помощь .on().
.bind()	Устанавливает обработчик события на выбранные элементы страницы. начиная с jQuery-1.7, данный метод считается устаревшим
.live()	Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки.
.delegate()	Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки.
.one()	Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов.
.unbind()	Удаляет обработчик событий у выбранных элементов.
.die()	Удаляет обработчик событий, который был установлен с помощью live().
.undelegate()	Удаляет обработчик событий, который был установлен с помощью delegate().
.trigger()	Выполняет указанное событие и запускает его обработчик.
.triggerHandler()	Запускает обработчик указанного события, без его выполнения.
jQuery.proxy()	По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
event	Объект, содержащий данные о текущем событии. Передается всем обработчикам событий.

События мыши

.click()	Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие.
.dblclick()	Устанавливает обработчик двойного "клика" мышью по элементу, либо, запускает это событие.
.hover()	Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом.
.mousedown()	Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие.
.mouseup()	Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие.
.mouseenter()	Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover.
.mouseleave()	Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout.
.mousemove()	Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие.
.mouseout()	Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.
.mouseover()	Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие.
.toggle()	Поочередно выполняет одну из двух или более заданных функций, в ответ на "клик" по элементу.

События клавиатуры

.keydown()	Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.
.keyup()	Устанавливает обработчик возвращение клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.
.keypress()	Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

События формы

.focus()	Устанавливает обработчик получения фокуса, либо, запускает это событие.
.blur()	Устанавливает обработчик потери фокуса, либо, запускает это событие.
.focusin()	Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.
.focusout()	Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних.
.select()	Устанавливает обработчик выделения текста, либо, запускает это событие.
.submit()	Устанавливает обработчик отправки формы, либо, запускает это событие.
.change()	Устанавливает обработчик изменения элемента формы, либо, запускает это событие.

События загрузки страницы

.ready()	Устанавливает обработчик готовности дерева DOM.
.load()	Устанавливает обработчик завершения загрузки элемента.
.unload()	Устанавливает обработчик ухода со страницы (при переходе по ссылке, закрытии браузера и.т.д.).

События браузера

.error()	Устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере).
.resize()	Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.
.scroll()	Устанавливает обработчик "прокрутки" элементов документа, либо, запускает это событие.

Ajax загрузка страниц

$.post(url, [params], [callback], [dataType])
$.get(url, [params], [callback], [dataType])
url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}.
callback() — пользовательская функция, которая будет вызвана после ответа сервера.
dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра.
// После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет
// на экран сообщение с данными, присланными сервером.
$.get("/ajaxtest.php",{param1: "param1", param2: 2},onAjaxSuccess);

function onAjaxSuccess(data)
{// Здесь мы получаем данные, отправленные сервером и выводим их на экран.
alert(data);
}

Полезные функции

load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript(url [,fn_success]) делает запрос javascript-файла и автоматически его выполняет. $.getScript("test.js", function(){alert("Скрипт выполнен.");}); $.browser поможет узнать тип браузера. $.support поможет узнать конкретные особенности браузера. .scrollTop() и .scrollLeft() позволят работать с прокруткой.

Где ещё почитать про jQuery:
Как обойтись без jQuery
Русская Wiki по jQuery
Русская документация по jQuery

Читать дальше: DOM модель html-документа