jQuery - пожалуй самая популярная библиотека JavaScript для взаимодействия HTML и JavaScript. Данная статья является кратким справочником-шпаргалкой по функциям jQuery.
Информация о jQuery
- Тип: JavaScript-библиотека
- Разработчики: Джон Резиг
- Написана на: JavaScript
- Операционная система: кроссплатформенное программное обеспечение
Атрибуты
| Название | Описание |
| .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 |
| "[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) |
МАНИПУЛЯЦИИ
Работа с атрибутами и свойствами
| Название | Описание |
| .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() .wrapAll() |
Окружает элементы на странице заданными html-элементами |
| .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, а так же удаляя повторения. |
Для тех кто знает javascript вообще jquery не нужен. Ну или быстро разберется в нем.