# Краткий справочник по jQuery ## Атрибуты | Название | Описание | |:---:|:---| |.attr() |возвращает/изменяет (в зависимости от числа параметров) значение атрибута у элементов на странице| |.removeAttr() |удаляет атрибут у элементов на странице | |.addClass() |добавляет класс элементам на странице | |.removeClass() |удаляет класс(ы) у элементов на странице | |.toggleClass() |изменяет наличие класса у элементов на противоположное (добавляет/удаляет)| |.hasClass() |проверяет наличие класса cName хотя бы у одного из выбранных элементов| |.val() |возвращает/изменяет (в зависимости от числа параметров) значение атрибута value у элементов на странице| ## CSS | Название | Описание | |:---:|:---| |.css() |Возвращает/изменяет (в зависимости от числа входных параметров) CSS параметры элемента| |.height() |Возвращает/изменяет высоту элемента| |.innerHeight()| --- | |.outerHeight()| --- | |.width()|Возвращает/изменяет ширину элемента| |.innerWidth()| --- | |.outerWidth()| --- | |.position()|Возвращает/изменяет позицию элемента| |.offset()| --- | |.offsetParent()|Возвращает ближайшего предка c позиционированием,отличным от static (позиционирование по умолчанию)| |.scrollTop()|Возвращает/изменяет величину скроллинга (прокрутку) элемента| |.scrollLeft()| --- | ## Селекторы ### Базовые |Название|Описание| |:---:|:---| |"*"|все элементы| |".className"|элементы с классом className| |"#idName"|элемент (один!) с идентификатором idName| |"tagName"|элементы с заданным именем тега| ### Комбинированные селекторы Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах 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| |'[first][second][...'|элементы, соответствующие всем заданным условиям на атрибуты одновременно| '[name |= value]' - элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: "value-*") '[name ^= value]' - элементы, у которых значение атрибута name начинается с value ### Простые фильтры Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в 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). Это могут быть элементы типа | |':focus'|элементы формы, находящиеся в фокусе.| |':checked'|выбранные элементы (со статусом checked). Это могут быть элементы типа или .| |':enabled'|активные элементы формы (со статусом enabled)| |':disabled'|неактивные элементы формы (со статусом disabled)| ## МАНИПУЛЯЦИИ ### Работа с атрибутами и свойствами |Название|Описание| |:---:|:---| |.attr()|возвращает/изменяет (в зависимости от числа параметров) значение атрибута у элементов на странице| |.removeAttr()|удаляет атрибут у элементов на странице| |.prop()|возвращает/изменяет (в зависимости от числа параметров) значение заданного свойства у элементов на странице| |.removeProp()|удаляет заданное свойство у элементов на странице| |.addClass()|добавляет класс элементам на странице| |.removeClass()|удаляет класс(ы) у элементов на странице| |.toggleClass()|изменяет наличие класса у элементов на противоположное (добавляет/удаляет)| |.hasClass(clName)|проверяет наличие заданного класса хотя бы у одного из выбранных элементов| |.val()|возвращает/изменяет (в зависимости от числа параметров) значение атрибута value у элементов на странице| ### Работа с параметрами и стилями |Название|Описание| |:---:|:---| |.css()|Возвращает/изменяет (в зависимости от числа входных параметров) CSS параметры элемента| |.height()|Возвращает/изменяет высоту элемента| |.innerHeight()| --- | |.outerHeight()| --- | |.width()|Возвращает/изменяет ширину элемента| |.innerWidth()| --- | |.outerWidth()| --- | |.position()|Возвращает/изменяет позицию элемента| |.offset()| --- | |.offsetParent()|Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию)| |.scrollTop()|Возвращает/изменяет величину скроллинга (прокрутку) элемента| |.scrollLeft()| --- | ### Добавление содержимого |Название |Описание| |:---:|:---| |.html() |Возвращает/изменяет (в зависимости от числа параметров) html-содержимое элементов на странице| |.text() |Возвращает/изменяет (в зависимости от числа параметров) текст, находящийся в элементах на странице| |.append() |Добавляет заданное содержимое в конец элементов на странице| |.appendTo()| --- | |.prepend()|Добавляет заданное содержимое в начало элементов на странице| |.prependTo() | --- | |.after() |Добавляет заданное содержимое после элементов на странице| |.insertAfter()| --- | |.before() |Добавляет заданное содержимое перед элементами на странице| |.insertBefore()| --- | |.wrap() |Окружает элементы на странице заданными html-элементами| |.wrapAll()| --- | |.wrapInner() |Окружает содержимое элементов на странице заданными html-элементами| ### Удаление содержимого |Название |Описание| |:---:|:---| |.detach() |Удаляет элементы на странице| |.remove()| --- | |.empty() |Удаляет содержимое элементов на странице| |.unwrap() |Удаляет родительские элементы, при этом их содержимое остается на месте| ### Замена элементов |Название |Описание| |:---:|:---| |.replaceWith()|Заменяет одни элементы страницы на другие (новые или уже существующие).| |.replaceAll()| --- | ### Клонирование элементов |Название |Описание| |:---:|:---| |.clone( ) |Возвращает копию выбранных элементов страницы.| ## РАБОТА С НАБОРОМ ЭЛЕМЕНТОВ ### Перемещения по дереву DOM |Название |Описание| |:---:|:---| |.children() |Находит все дочерние элементы у выбранных элементов. При необходимости, можно указать селектор для фильтрации.| |.closest() |Находит ближайший, соответствующий заданному селектору элемент, из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM.| |.find() |Находит элементы по заданному селектору, внутри выбранных элементов.| |.next() |Находит элементы, которые лежат непосредственно после каждого из выбранных элементов.| |.nextAll() |Находит элементы, которые лежат после каждого из выбранных элементов.| |.nextUntil() |Находит элементы, которые лежат после каждого из выбранных, но не дальше элемента, удовлетворяющего заданному селектору.| |.offsetParent() |Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию)| |.parent() |Находит родительские элементы у всех выбранных элементов| |.parents() |Находит всех предков у выбранных элементов, т.е. не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM| |.parentsUntil() |Находит предков, как и .parents(), но прекращает поиск перед элементом, удовлетворяющим заданному селектору| |.prev() |Находит элементы, которые лежат непосредственно перед каждым из выбранных элементов| |.prevAll() |Находит элементы, которые лежат перед каждым из выбранных элементов.| |.prevUntil() |Находит элементы, которые лежат перед каждым из выбранных, но не дальше элемента, соответствующего заданному селектору.| |.siblings() |Находит все соседние элементы (под соседними понимаются элементы с общим родителем).| ### Фильтрация набора |Название |Описание| |:---:|:---| |.eq() |Возвращает элемент, идущий под заданным номером в наборе выбранных элементов.| |.filter() |Фильтрует набор выбранных элементов с помощью заданного селектора или функции.| |.first() |Возвращает первый элемент в наборе.| |.has() |Фильтрует набор выбранных элементов, оставляя те, которые имеют потомков, соответствующих селектору.| |.is() |Проверяет, содержится ли в наборе, хотя бы один элемент удовлетворяющий заданному селектору.| |.last() |Возвращает последний элемент в наборе.| |.not() |Возвращает элементы, не соответствующие заданным условиям.| |.slice() |Возвращает элементы с индексами из определенной области (например от 0 до 5).| ### Обход набора |Название |Описание| |:---:|:---| |.each() |Вызывает заданную функцию для каждого элемента набора.| |.map() |Вызывает заданную функцию для каждого элемента набора, и в итоге создает новый набор, составленный из значений, возвращенных этой функцией.| ### Другие методы |Название |Описание| |:---:|:---| |.add() |Добавляет заданные элементы в набор.| |.andSelf() |Добавляет элементы из предыдущего набора, к текущему (речь идет об одной цепочке методов).| |.contents() |Находит все дочерние элементы у выбранных элементов. В результат, помимо элементов, включается и текст.| |.end() |Возвращает предыдущий набор элементов в текущей цепочке методов.| ## РАЗНОЕ ### Работа с данными |Название |Описание| |:---:|:---| |.data() |Устанавливает/возвращяет пользовательские переменные выбранным элементам страницы.| |.removeData() |Удаляет пользовательские переменные у выбранных элементов.| |$.hasData() |Проверяет, закреплены ли данные за указанным элементом страницы.| ### Работа с элементами набора |Название |Описание| |:---:|:---| |.get() |Возвращяет DOM-элементы, хранящиеся в объекте jQuery.| |.toArray() |Возвращяет все DOM-элементы, хранящиеся в объекте jQuery, в виде массива.| |.index() |Возвращяет индекс заданного элемента в наборе.| |.size() |Возвращяет количество выбранных элементов.| ## СВОЙСТВА ### Список свойств |Название |Описание| |:---:|:---| |$.browser |Информация об используемом браузере (перед использованием этого свойства попробуйте найти интересующую вас особенность в свойстве support, эта информация будет более надежна).| |$.support |Особенности используемого браузера.| |$.fx.off |Отменяет выполнение всех анимаций.| |$.fx.interval |Размер задержки между соседними кадрами анимации.| |.context |Контекст, заданный в методе $() (jQuery()).| |.length |Число выбранных элементов.| |.selector |Селектор, заданный в методе $() (jQuery()).| ## СОБЫТИЯ ### Базовые |Название |Описание| |:---:|:---| |.on() |Универсальный метод для установки обработчиков событий на выбранные элементы страницы.| |.off() |Удаляет обработчики, установленные с помощь .on().| |.bind() |Устанавливает обработчик события на выбранные элементы страницы. Обработчик не сработает на элементах, появившихся после его установки.| |.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() |Устанавливает обработчик "прокрутки" элементов документа, либо, запускает это событие.| ## ФОРМЫ ### События формы |Название |Описание| |:---:|:---| |.focus() |Устанавливает обработчик получения фокуса, либо, запускает это событие.| |.blur() |Устанавливает обработчик потери фокуса, либо, запускает это событие.| |.focusin() |Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.| |.focusout() |Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.| |.select() |Устанавливает обработчик выделения текста, либо, запускает это событие.| |.submit() |Устанавливает обработчик отправки формы, либо, запускает это событие.| ### Разное |Название |Описание| |:---:|:---| |jQuery.param() |Преобразует массив объектов в строку, пригодную для использования в URL.| |.serialize() |Преобразует данные формы в строку, пригодную для использования в URL.| |.serializeArray() |Преобразует данные формы в массив объектов вида {name:"name", value:"val"}.| |.val() |Возвращает/изменяет (в зависимости от числа параметров) значение атрибута value у элементов на странице| ## ЭФФЕКТЫ ### Управление анимацией |Название |Описание| |:---:|:---| |.animate() |Выполняет анимацию, которая была создана пользователем.| |.queue() |Предоставляет/изменяет (в зависимости от параметров) очередь функций.| |.clearQueue() |Очищает очередь функций.| |.dequeue() |Начинает выполнение следующей функции в очереди.| |.stop() |Останавливает выполнение текущей анимации.| |.delay() |Приостанавливает выполнение следующих анимаций на заданное время.| |.toggle() |Поочередно выполняет вызов одной из нескольких заданных функций.| |jQuery.fx.interval |Содержит временной промежуток между кадрами анимации.| |jQuery.fx.off |Отменяет выполнение всех анимаций.| ### Стандартные анимации |Название |Описание| |:---:|:---| |.hide()|Скрывает/показывает элементы на странице (за счет плавного изменения его размера и прозрачности).| |.show()| | |.slideUp()|Разворачивает/сворачивает элементы на странице (за счет плавного изменения высоты элементов).| |.slideDown()| | |.slideToggle() |Поочередно разворачивает/сворачивает элементы на странице, как это делают .slideUp() и .slideDown().| |.fadeIn()|Скрывает/показывает элементы на странице за счет плавного изменения прозрачности.| |.fadeOut()| | |.fadeTo() |Плавно изменяет прозрачность элементов.| |.fadeToggle() |Поочередно скрывает/показывает элементы на странице, как это делают .fadeIn() и .fadeOut().| ## УТИЛИТЫ Список функций |Название |Описание| |:---:|:---| |$.contains() |Проверяет, содержится ли один элемент страницы внутри другого.| |$.extend() |Объединяет два или более javascript-объекта.| |$.globalEval() |Выполняет заданный скрипт в глобальной области видимости.| |$.grep() |Ищет в заданном массиве элементы удовлетворяющие условиям.| |$.inArray() |Ищет в заданном массиве конкретный элемент и возвращает его индекс (или -1 в случае отсутствия элемента).| |$.isArray() |Проверяет, является ли заданный элемент массивом.| |$.isEmptyObject() |Проверяет наличие (точнее отсутствие) содержимого в заданном объекте.| |$.isFunction() |Проверяет, является ли заданный элемент функцией.| |$.isNumeric() |Проверяет, является ли заданный элемент числом.| |$.isPlainObject() |Проверяет, является ли заданный элемент пользовательским объектом (задан средствами "{}" или "new Object").| |$.isWindow() |Проверяет, является ли заданный элемент объектом типа window.| |$.isXMLDoc() |Проверяет, находится ли DOM-объект внутри XML-документа (или сам является XML-документом).| |$.makeArray() |Конвертирует массиво подобные объекты, в массивы.| |$.map() |Выполняет заданную функцию для каждого элемента массива или каждого поля объекта в отдельности.| |$.merge() |Объединяет содержимое нескольких массивов, записывая его в первый из них.| |$.noop() |Пустая функция.| |$.parseJSON() |Конвертирует строку с json-данными в javascript-объект.| |$.parseXML() |Конвертирует строку xml в xml-документ.| |$.proxy() |По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.| |$.trim() |Удаляет пробелы из начала и конца заданной строки.| |$.type() |Определяет класс заданного объекта (речь идет о внутренних классах javascript: string, boolean и т.д.).| |$.unique() |Сортирует заданный массив с DOM-элементами, выстраивая их в порядке расположения в DOM, а так же удаляя повторения.|