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

Подключение jQuery

$(document).ready(function () { … }); //Выполнение сценария только после загрузки всей страницы

$(function () { … }); //Сокращенная запись предыдущего примера

jQuery(function () { … }); //если в проекте используются другие библиотеки с функцией $();

Выборка элементов

Базовые селекторы

$( » * » ) //выбор абсолютно всех элементов присутствующих в текущем html-документе

$( » #mydiv » ) // выбор элемента на странице по названию уникального идентификатора (будет отобран элемент с id=»mydiv»)

$( » .myclass » ) //выбор элементов на странице по названию класса (будут отобраны все элементы, которым присвоен класс «myclass»)

$( » p » ) // выбор элементов на странице по названию тега (будут отобраны все параграфы, находящиеся на странице)

Иерархические селекторы

$( » div.demo span » ) // выбор всех span, находящихся внутри блока с классом demo (будут отобраны все «span», которые находятся внутри «div» с классом «demo», если в span будет вложен еще один span, то он тоже будет отобран)

$( » div «, » #myid » ) // то же, что и в предыдущих примерах (будут отобраны все «div», которые находятся внутри блока с идентификатором «myid»)

$( » div.myclass > span » ) // выбор дочерних элементов (будут отобраны все span, находящийся в блоке с классом «myclass», и являющиеся дочерними (потомками первого уровня) по отношению к этому блоку, если в span будет вложен еще один span, то он не будет отобран)

$( » #demo + p » ) // выбор следующего за указанным элемента (будет отобран параграф, находящийся сразу же за элементом с идентификатором «demo»)

$( » а ~ p » ) // выбор всех, следующих за указанным элементов (будут отобраны все параграфы, находящийся за ссылкой и являющиеся сестринскими по отношению к этой ссылке)

Селекторы форм

$( » :input » ) // выбор всех элементов input

$( » input:text » ) // выбор всех элементов input с type=»text»

$( » input:password » ) // выбор всех элементов input с type=»password»

$( » input:radio » ) // выбор всех элементов input с type=»radio»

$( » input:checkbox » ) // выбор всех элементов input с type=»checkbox»

$( » input:reset » ) // выбор всех элементов input с type=»reset»

$( » input:submit » ) // выбор всех элементов input с type=»submit»

$( » input:button » ) // выбор всех элементов input, являющихся кнопками (кнопки с атрибутом button, или кнопки созданные с помощью тегов button)

$( » input:file » ) // выбор всех элементов input с type=»file»

Базовые фильтры

$( » div:odd » ) //выбор нечетных блоков «div» на странице (будут отобраны только нечетные элементы «div», присутствующие на странице — отсчет начинается с нуля)

$( » #mytable tr:even » ) //выбор четных «tr» в таблице (будут отобраны только четные элементы «tr» из таблицы с идентификатором «mytable» — отсчет начинается с нуля)

$( » img:not(#mypic img) » ) //выбор всех элементов на странице кроме указанных (будут отобраны все элементы «img», присутствующие на странице, кроме изображений, расположенных в блоке с идентификатором «mypic»)

$( » div:eq(3) » ) //выбор элемента по порядковому номеру (будут отобран четвертый по счету блок «div» на текущей странице — отсчет начинается с нуля)

$( » div:gt(1) » ) //выбор элементов c индексом большим, чем указано в параметре (будут отобраны все блоки «div» на текущей странице начиная с третьего — отсчет начинается с нуля)

$( » div:lt(3) » ) //выбор элементов c индексом меньшим, чем указано в параметре (будут отобраны все блоки «div» на текущей странице до третьего включительно — отсчет начинается с нуля)

$( » :header » ) //выбор всех заголовков на текущей странице

$( » div:animated » ) //выбор всех блоков «div», анимированных в текущий момент времени

$( » p:first » ) //выбор первого абзаца в текущем документе

$( » p:last » ) //выбор последнего абзаца в текущем документе

Фильтры контента

$( » p:contains ( текст ) » ) //выбор элементов в текущем документе в содержимом которых встретится текст, переданный параметром в фильтр (будут отобраны все параграфы содержащие внутри себя слово «текст»)

$( » div:empty » ) //выбор всех пустых элементов (будут отобраны все блоки «div» на текущей странице, не содержащие внутри себя ничего, включая текст)

$( » div:parent » ) //выбор всех элементов содержащих внутри себя дочерние элементы (будут отобраны все блоки «div» на текущей странице, внутри которых есть дочерние элементы, включая текст)

$( » div:has( span.red ) » ) //выбор всех элементов, которые содержат внутри себя хотя бы один из элементов переданный в параметре фильтра (будут отобраны все блоки «div» на текущей странице, содержащие внутри себя хотя бы один span с классом red)

Фильтры видимости

$( » div:hidden » ) //выбор всех скрытых элементов на текущей странице

$( » div:visible » ) //выбор всех видимых элементов на текущей странице

Фильтры атрибутов

$( » [alt] » ) //выбор элементов на текущей странице, содержащих указанный атрибут (будут отобраны все элементы на текущей странице, у которых есть атрибут alt)

$( » [alt=myatr] » ) //выбор элементов на текущей странице, содержащих указанный атрибут с указанным значением (будут отобраны все элементы на текущей странице, у которых есть атрибут alt со значением myatr)

$( » [alt!=myatr] » ) //выбор элементов на текущей странице, содержащих указанный атрибут, но у которых значение не равно указанному (будут отобраны все элементы на текущей странице, у которых есть атрибут alt, содержащие значение не myatr)

$( » [alt^=myatr] » ) //выбор элементов на текущей странице, содержащих указанный атрибут, у которых значение начинается с указанного (будут отобраны все элементы на текущей странице, у которых есть атрибут alt и значение будет начинаться со слова myatr)

$( » [alt$=myatr] » ) //выбор элементов на текущей странице, содержащих указанный атрибут, у которых значение заканчивается указанным (будут отобраны все элементы на текущей странице, у которых есть атрибут alt и значение будет заканчиваться словом myatr)

$( » img[src*=pic] » ) // выбор элементов по части значения атрибута (будут отобраны все изображения, находящийся на странице, у которых в атрибуте «src» встречается слово «pic»)

Фильтры семейств

$( » div:first-child » ) // выбор первого дочернего элемента (будет отобран первый дочерний элемент в блоке div на текущей странице)

$( » div:last-child » ) // выбор последнего дочернего элемента (будет отобран последний дочерний элемент в блоке div на текущей странице)

$( » div:only-child » ) // выбор единственного дочернего элемента (будет отобран единственный дочерний элемент в блоке div на текущей странице, который содержит этот элемент — если в блоке будет содержаться несколько дочерних элементов, то ничего отобрано не будет)

$( » div:nth-child(even) » ) // выбор четных дочерних элементов (будут отобраны все четные дочерние элементы в блоке div на текущей странице)

$( » div:nth-child(odd) » ) // выбор нечетных дочерних элементов (будут отобраны все нечетные дочерние элементы в блоке div на текущей странице)

$( » div:nth-child(2) » ) // выбор дочерних элементов с заданным индексом (будет отобран третий дочерний элемент в блоке div на текущей странице)

$( » div:nth-child(2n+1) » ) // выбор дочерних элементов по формуле (будут отобраны все нечетные дочерние элементы в блоке div на текущей странице)

Фильтры форм

$( » :enabled » ) // выбор всех активных элементов форм

$( » :disabled » ) // выбор всех неактивных элементов форм

$( » :checked » ) // выбор всех отмеченных элементов форм (выбранные радиокнопки и чекбоксы)

$( » :selected » ) // выбор всех выбранных элементов форм (выбранный option элемент в select)

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

Фильтрация отобранных элементов

.is() //вернёт значение true, если среди отобранных ранее элементов присутствует хотя бы один, указанный в параметре и false — если такого элемента нет

.not() // исключит из отобранных ранее элементы, которые указаны в параметре.

.eq(index) // выберет элемент из отобранных ранее, с указанным в параметре индексом.

.slice(startIndex, endIndex) // выберет элементы из ранее отобранных, индекс которых находится в диапазоне, указанном в параметре (отсчет начинается с 0). При указании отрицательных значений в параметре, отсчет начинается с 1. Второй параметр не обязателен.

.filter() // выберет элемент из отобранных ранее, которые соответствуют указанному в параметре условию.

.filter(fn) // выберет элементы из отобранных ранее, которые соответствуют значению, возвращенному из функции (при условии trye), указанной в параметре.

Относительный поиск элементов

.siblings() //возвращает элементы, которые являются соседними для отобранных ранее объектов и имеют общего родителя.

.parent() //возвращает элементы, которые являются прямыми родителями для отобранных ранее объектов.

.parents() //возвращает все родительские элементы для отобранных ранее объектов (независимо от уровня вложенности.

.children() //возвращает дочерние элементы каждого из отобранных ранее объектов

.next() //возвращает элемент, который расположен следующим за объектом из отобранных ранее.

.nextAll() ///возвращает все элементы, который расположены следующими за объектом из отобранных ранее.

.prev() //возвращает один элемент, который расположен перед объектом из отобранных ранее.

.prevAll() //возвращает все элементы, который расположены перед объектом из отобранных ранее.

Работа с атрибутами элементов

.attr(name) //Вернет значение атрибута, указанного в параметре метода, для первого объекта из отобранного набора элементов.

.attr(name, value) //Присвоит значение (value) атрибуту, указанному в параметре метода (name), для объектов из отобранного набора.

.attr(name, fn) //Присвоит значение атрибуту, указанному в параметре метода (name), которое возвращает пользовательская функция (fn), для всех объектов из отобранного набора.

.attr(settings) //Объектам из отобранного набора, присвоит атрибуты с соответствующими значениями, перечень которых указан в параметре метода.

.removeAttr(name) //Удалит атрибут, указанный в параметре метода, у всех отобранных ранее объектов, обладающих этим атрибутом.

Работа с классами элементов

.hasClass(name) //проверяет наличие элемента с классом, имеющим значение, указанное в параметре метода. Вернет true, если в выбранном наборе присутствует хотя бы один элемент у которого атрибут class имеет значение, указанное в параметре метода. В противном случае вернет false.

.addClass(name) //добавит к атрибуту class отобранных элементов значение (name), указанное в параметре метода.

.removeClass(name) //удалит значение (name) атрибута class, указанное в параметре метода, у всех элементов в выбранном наборе, которым присвоен атрибут class с указанным значением

.toggleClass(name) //добавит атрибут class со значением (name), указанным в параметре метода, ко всем элементам в выбранном наборе, у которых отсутствует это значение, и удалит значение (name) атрибута class, указанное в параметре метода, у всех элементов в выбранном наборе, которым присвоен атрибут class с данным значением

.toggleClass(name, switch) //Добавит сласс, указанный в первом параметре (name) метода, если второй параметр (функция switch) возвращает значение true, или удалит указанный класс, если функция switch вернет false.

Работа с атрибутом value

.val() //вернет значение атрибута value для первого элемента input, содержащегося в отобранном наборе. Для элемента select с возможностью множественного выбора, вернет массив значений (option), которые выбраны в первом элементе.

.val(string) //установит значение value, указанное в параметре (string) метода для всех отобранных элементов input

.val(array) //принимает в качестве параметра строковый массив со значениями для радиокнопок, чекбоксов и select

Методы для работы с контентом

.text() //возвращает текстовое содержимое всех элементов в отобранном набор

.text(string) //изменит текстовое содержимое элементов в отобранном наборе на строку, переданную в параметре (string) метода.

.html() //возвращает html содержимое первого элемента в отобранном наборе.

.html(string) //добавит html содержимое, переданное в параметре (string) метода, для всех элементов в отобранном наборе

Методы для вставки контента

.append(content) //вставляет контент, переданный в параметре (content) метода, внутрь каждого элемента из отобранного набора за уже существующим содержимым элемента.

.appendTo(selector) //перемещает элементы из отобранного набора внутрь элемента, указанного в параметре (selector) метода, в конец содержимого элемента.

.prepend(content) //вставляет контент, переданный в параметре (content) метода, внутрь каждого элемента из отобранного набора перед уже существующим содержимым элемента.

.prependTo(selector) //перемещает элементы из отобранного набора внутрь элемента, указанного в параметре (selector) метода, в начало содержимого элемента.

.before(content) //вставляет контент, переданный в параметре (content) метода, перед каждым элементом из отобранного набора.

.after(content) //вставляет контент, переданный в параметре (content) метода, после каждого элемента из отобранного набора.

.insertBefore(selector) //перемещает элементы из отобранного набора в позицию перед элементом, указанным в параметре (selector) метода.

.insertAfter(selector) //перемещает элементы из отобранного набора в позицию после элемента, указанного в параметре (selector) метода.

Методы для обрамления контента

.wrap(html) //оборачивает каждый из отобранных элементов в html, указанный в параметре.

.wrap(element) //оборачивает каждый отобранный элемент в DOM-элемент, указанный в параметре.

.wrapAll(html) //оборачивает все отобранные элементы в html, указанный в параметре.

.wrapAll(element) //оборачивает все отобранные элементы в DOM-элемент, указанный в параметре.

.wrapInner(html) //оборачивает содержимое каждого отобранного элемента в html, указанный в параметре.

.wrapInner(element) //оборачивает содержимое каждого отобранного элемента в DOM-элемент, указанный в параметре.

Замена, удаление и клонирование элементов

.replaceAll(selector) //заменит элемент, указанный в параметре метода, на элемент из отобранного набора.

.replaceWith(content) //заменит элементы из отобранного набора, строкой (включая html), переданной в параметре (content) метода.

.empty() //удаляет все содержимое (включая дочерние элементы) из объектов в отобранном наборе.

.remove(expression) //удаляет все элементы из отобранного набора. В качестве параметра может принимать дополнительные условия для удаления элементов.

.clone() //клонирует элементы из отобранного ранее набора. Если в параметре метода передать true, то будут скопированы и методы, примененные к клонируемому элементу.

Методы анимации объектов

Стандартная анимация

.hide() //скрывает элементы из отобранного набора (без анимационных эффектов), если до применения метода элементы были видимы.

.hide(speed, fn) //скрывает элементы из отобранного набора, если до применения метода элементы были видимы. Принимает два необязательных параметра, скорость (speed) с которой будет спрятан элемент (указывается в миллисекундах, или с помощью ключевого слова) и callback функция, которая будет выполнена после исчезновения элемента. Подробнее…

.show() //показывает элементы из отобранного набора (без анимационных эффектов), если до применения метода элементы были скрыты. Подробнее…

.show(speed, fn) //показывает элементы из отобранного набора, если до применения метода элементы были скрыты. Принимает два необязательных параметра, скорость (speed) с которой будет показан элемент (указывается в миллисекундах, или с помощью ключевого слова) и callback функция, которая будет выполнена после того, как элемент станет видимым. Подробнее…

.toggle() //скрывает элементы из отобранного набора (без анимационных эффектов), если до применения метода элементы были видимы и показывает элементы из отобранного набора (без анимационных эффектов), если до применения метода элементы были скрыты (может использоваться как обработчик события onClick и применяет методы hide и show) Подробнее…

.toggle(switch) //Принимает в качестве параметра (switch) булево значение true или false. Вызывается непосредственно для изменения состояния выбранных элементов. Если параметр равен true, то элемент будет показан. Если параметр равен false, то элемент будет спрятан. Подробнее…

.toggle(speed, fn) //скрывает элементы из отобранного набора, если до применения метода элементы были видимы и показывает элементы из отобранного набора, если до применения метода элементы были скрыты. Принимает два необязательных параметра, скорость (speed) с которой будет показан/скрыт элемент (указывается в миллисекундах, или с помощью ключевого слова) и callback функция, которая будет выполнена после того, как элемент станет скрытым/видимым. Подробнее…

.fadeIn(speed, fn) //показывает элементы из отобранного набора, изменяя их прозрачность, если до применения метода элементы были скрыты. Подробнее…

.fadeOut(speed, fn) //скрывает элементы из отобранного набора, изменяя их прозрачность, если до применения метода элементы были видимы. Подробнее…

.fadeTo(speed, opacity, fn) //изменяет прозрачность отобранных элементов до заданного в параметрах метода значения. Подробнее…

.slideUp(speed, fn) //скрывает элементы из отобранного набора, изменяя их высоту, если до применения метода элементы были видимы. Подробнее…

.slideDown(speed, fn) //показывает элементы из отобранного набора, изменяя их высоту, если до применения метода элементы были скрыты. Подробнее…

.slideToggle(speed, fn) //скрывает элементы из отобранного набора, если до применения метода элементы были видимы и показывает элементы из отобранного набора, если элементы были скрыты (может использоваться как обработчик события onClick и применяет методы slideDown и slideUp) Подробнее…

Управление анимацией

.animate() //выполняет анимацию, заданную пользователем, с элементами из отобранного набора.Подробнее…

.queue() //добавляет, или изменяет очередь функций, в зависимости от переданных в методе параметров.Подробнее…

.clearQueue() //очищает очередь функций, примененных к элементам из отобранного набора. Подробнее…

.dequeue() //начинает выполнение следующей в очереди функции, примененной к отобранным элементам, не дожидаясь окончания выполнения предыдущей. Подробнее…

.stop() //прерывает выполнение текущей анимации, примененной к отобранному набору элементов.Подробнее…

.delay() //устанавливает временной промежуток, переданный в параметре метода, перед началом выполнения следующей в очереди функции, примененной к отобранному набору элементов. Подробнее…

jQuery.fx.interval //устанавливает временной промежуток между кадрами анимации, примененной к отобранному набору элементов. Свойство является глобальным для любой анимации в библиотеке.Подробнее…

jQuery.fx.off //отключает все анимации, выполняемые при помощи библиотеки jQuery, если методу передается параметр true. Подробнее…

Все файлы из данной записи:

Ссылка на справочник по jQuery — https://yadi.sk/d/tDhFiOBd3SqXpB

Справочник по jQuery