Unetway
Краткий справочник по jQuery для начинающих

Краткий справочник по jQuery

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, а так же 
удаляя повторения.

 

Понравился материал? Поделитесь с друзьями!

Автор

Комментарии

Незарегистрированным пользователям запрещено комментировать.
Войдите или пройдите регистрацию