Jquery on метод: Метод .on() | jQuery справочник
Метод .on() | jQuery справочник
jQuery события
Определение и применение
jQuery метод .on() приcоединяет для выбранных элементов функцию обработчика события для одного, или нескольких событий.
jQuery синтаксис:
Синтаксис 1.7: // назначение функции для одного, или нескольких событий $( selector ).on( events, selector, data, handler ) events - String selector - String data - Anything handler - Function( Event eventObject, Anything extraParams ) // назначение определенному событию, или событиям своей функции $( selector ).on( eventMap, selector, data ) eventMap - PlainObject selector - String data - Anything
Добавлен в версии jQuery
1.7
Значения параметров
| Параметр | Описание |
|---|---|
| events | Один, или несколько разделенных пробелами типов событий (опционально допускается указывать пространство имен). Например: «click» или «click dblclick.myNamespace» |
| eventMap | Объект, содержащий строковый ключ, или ключи, определяющие тип события, а в качестве значения этих ключей выступает функция, которая будет выполнена каждый раз, когда конкретное событие срабатывает. Например: {«event»: handler, «anotherEvent.myNamespace»: anotherHandler} |
| selector | Строка селектора для фильтрации потомков выбранных элементов, запускающих событие. Обратите внимание, что если параметр отсутствует, или имеет значение null, то обработчик всегда вызывается при достижении выбранного элемента (не зависимо событие вызвано на элементе, или вложенном элементе). |
| data | Какие-либо данные, или объект, содержащий данные, которые будут переданы в обработчик событий при его срабатывании (свойство объекта Event event.data). |
| handler | Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event и при необходимости дополнительные параметры для решения конкретной задачи. Значение false также может использоваться в качестве сокращенной записи функции, которая имеет тело return false (при вызове возвращает значение false). |
Пример использования
Имена событий и пространства имён
Любые имена событий могут быть использованы в качестве аргумента события. jQuery будет проходить через стандартные типы событий JavaScript, вызывая функцию обработчик, в то время когда браузер их генерирует, откликаясь на те, или иные действия пользователя, например такое событие как нажатие левой кнопкой мыши на элемент.
Обращаю Ваше внимание на то, что метод .trigger() может вызвать как стандартные имена событий браузера, так и пользовательские имена событий. Пользовательские имена событий должны содержать только алфавитно-цифровые символы, символ подчеркивания и двоеточие. Пространства имен, начинающиеся с подчеркивания, зарезервированы для использования библиотекой jQuery.
Пространства имен событий, или пользовательские имена событий упрощают удаление, или запуск необходимых обработчиков событий, по этой причине они зачастую используются при написании различных плагинов. Давайте рассмотрим использование пространств имен и пользовательских имен событий в jQuery на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Использование jQuery метода .on() (пространства имен)</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
// *** Первая часть примера ***
$( "button" ).on( "myEvent.myNamespace.myAnotherNamespace| Метод | Описание |
|---|---|
| .click() | Привязывает JavaScript обработчик событий «click» (клик левой кнопкой мыши), или запускает это событие на выбранный элемент. |
| .contextmenu() | Привязывает JavaScript обработчик событий «contextmenu» (вызов контекстного меню на элементе — клик правой кнопкой мыши), или запускает это событие на выбранный элемент. |
| .dblclick() | Привязывает JavaScript обработчик событий «dblclick» (двойной клик левой кнопкой мыши), или запускает это событие на выбранный элемент. |
| .hover() | Связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении. |
| .mousedown() | Привязывает JavaScript обработчик событий «mousedown» (нажатие кнопки мыши на элементе), или запускает это событие на выбранный элемент. |
| .mouseenter() | Привязывает JavaScript обработчик событий «mouseenter» (срабатывает, когда указатель мыши заходит на элемент), или запускает это событие на выбранный элемент. |
| .mouseleave() | Привязывает JavaScript обработчик событий «mouseleave» (срабатывает, когда указатель мыши выходит из элемента), или запускает это событие на выбранный элемент. |
| .mousemove() | Привязывает JavaScript обработчик событий «mousemove» (срабатывает, когда указатель мыши перемещается внутри элемента), или запускает это событие на выбранный элемент. |
| .mouseout() | Привязывает JavaScript обработчик событий «mouseout» (срабатывает, когда указатель мыши покидает элемент), или запускает это событие на выбранный элемент. |
| .mouseover() | Привязывает JavaScript обработчик событий «mouseover» (срабатывает, когда указатель мыши входит в элемент), или запускает это событие на выбранный элемент. |
| .mouseup() | Привязывает JavaScript обработчик событий «mouseup» (срабатывает, когда указатель мыши находится над элементом и кнопка мыши отпущена), или запускает это событие на выбранный элемент. |
Метод .off() | jQuery справочник
jQuery события
Определение и применение
jQuery метод .off() позволяет удалить обработчик, или обработчики событий, присоединенные методом .on().
jQuery синтаксис:
Синтаксис 1.7: $( selector ).off() // метод используется без параметров $( selector ).off( event ) event - jQuery.Event Object $( selector ).off( events, selector ) events - PlainObject selector - String // необязательный параметр $( selector ).off( events, selector, handler( Event eventObject ) ) events - String selector - String // необязательный параметр handler - Function( Event eventObject ) // необязательный параметр
Обращаю Ваше внимание, что метод .off(), вызванный без параметров удаляет все обработчики, присоединенные к элементу или элементам. Определенные обработчики событий могут быть удалены для элементов путем предоставления комбинаций имен событий, пространств имен, селекторов или имен функций обработчика. Если задано несколько аргументов фильтрации, все предоставленные аргументы должны совпадать для удаления обработчика событий.
Если указано простое имя события, например «click», то все события этого типа (как прямые, так и делегированные) удаляются из элементов набора совпавших элементов jQuery. Более подробную информацию об этих событиях вы можете прочитать в описании метода .on().
При написании кода, который будет использоваться в качестве плагина, или просто при работе с большим объемом кода, рекомендуется присоединять и удалять события с помощью пространств имен, чтобы избежать ситуации, когда код случайно удаляет обработчики событий, присоединенные другим кодом. Все события всех типов в определенном пространстве имен можно удалить из элемента, предоставив только пространство имен, например «.myNamespace». В обязательном порядке должно быть хотя бы указано пространство имен или имя события.
Чтобы удалить определенные обработчики делегированных событий, укажите строковый параметр selector, при этом он должен точно соответствовать значению переданному методу .on() , когда был присоединен обработчик событий. Чтобы удалить все делегированные события у элемента без удаления прямых событий, используйте специальное значение «**».
Обработчик событий также могут быть удалены с использованием функции, переданной в качестве параметра метода .off(). Когда jQuery присоединяет обработчик событий, он присваивает уникальный идентификатор функции обработчика.
Обработчики на которых был вызван метод $.proxy(), или подобные механизмы будут иметь одинаковый уникальный идентификатор, поэтому передавать такие обработчики методу .off() не имеет смысла, так как это может привести к ошибкам в ходе которых могут быть удалены те обработчики, удаление которых не предполагалось. В таких ситуациях лучше присоединять и удалять обработчики событий с помощью пространств имен.
Добавлен в версии jQuery
1.7
Значения параметров
| Параметр | Описание |
|---|---|
| event | Объект события jQuery.Event. jQuery скрывает различия реализации между браузерами, определяя свой собственный объект события. Большинство свойств исходного события копируются и нормализуются в новый объект события. |
| events | В качестве значения параметра используется либо строковое значение, либо объект. Когда значение передается в виде строки, то необходимо указывать один или несколько типов событий, разделенных пробелами, дополнительно допускается указать пространство имен для события или просто пространство имен (например, «click», « |
Метод .one() | jQuery справочник
jQuery события
Определение и применение
jQuery метод .one() приcоединяет для выбранных элементов функцию обработчика, которая будет выполнена не более одного раза к каждому элементу по каждому типу событий.
Обращаю Ваше внимание, что метод .one() идентичен методу .on(), за исключением того, что обработчик для конкретного элемента и типа события отвязывается после его первого вызова.
jQuery синтаксис:
Синтаксис 1.1: $( selector ).one( events, handler ) $( selector ).one( events, data, handler ( Event eventObject ) ) events - String data - PlainObject // необязательный параметр handler - Function( Event eventObject ) Синтаксис 1.7: $( selector ).one( events, selector, data, handler( Event eventObject ) ) events - String selector - String // необязательный параметр data - Anything // необязательный параметр handler - Function( Event eventObject ) $( selector ).one( events, selector, data ) events - PlainObject selector - String // необязательный параметр data - Anything // необязательный параметр
Добавлен в версии jQuery
1.1 (синтаксис расширен в версии 1.7)
Значения параметров
| Параметр | Описание |
|---|---|
| events | Если в качестве параметра используется строковое значение, то оно соответствует одному, или нескольким разделенных пробелами типов событий (опционально допускается указывать пространство имен). Например: «click» или «click dblclick.myNamespace» Если в качестве параметра используется объект, то в нем строковые ключи представляют один или несколько типов событий, разделенных пробелами, а значения представляют из себя функцию, которая вызывается и обрабатывает событие. В этом случае так же допускается дополнительно указывать пространства имен. Например: {«event»: handler, «anotherEvent.myNamespace»: anotherHandler} |
| selector | Строка селектора для фильтрации потомков выбранных элементов, запускающих событие. Обратите внимание, что если параметр отсутствует, или имеет значение null, то обработчик всегда вызывается при достижении выбранного элемента (не зависимо событие вызвано на элементе, или вложенном элементе). |
| data | Какие-либо данные, или объект, содержащий данные, которые будут переданы в обработчик событий при его срабатывании (свойство объекта Event event.data). |
| handler | Функция, которая будет выполнена один раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event и при необходимости дополнительные параметры для решения конкретной задачи. Значение false также может использоваться в качестве сокращенной записи функции, которая имеет тело return false (при вызове возвращает значение false). |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование jQuery метода .one()</title> <style>div { display: inline-block; /* блочно-строчные элементы */ width: 50px; /* ширина элемента */ height: 50px; /* высота элемента */ background: green; /* цвет заднего фона зеленый */ margin: 10px; /* внешние отступы элемента */ transition: .5s; /* эффект
| Метод | Описание |
|---|---|
| .addClass() | Добавляет один или несколько имен классов для выбранных элементов. |
| .after() | Вставляет указанное содержимое, переданное в параметре метода после каждого выбранного элемента. |
| .append() | Вставляет содержимое, указанное в параметре метода в конец каждого выбранного элемента в наборе совпавших элементов. |
| .appendTo() | Вставляет содержимое в конец каждого целевого элемента в наборе совпавших элементов. |
| .attr() | Получает значение атрибута для первого элемента в наборе совпавших элементов, или устанавливает один или несколько атрибутов для набора выбранных элементов. |
| .before() | Вставляет указанное содержимое, переданное в параметре метода перед каждыми выбранным элементом. |
| .clone() | Создает копию выбранных элементов, включая дочерние узлы, текст и атрибуты. |
| .css() | Задает или возвращает одно или несколько свойств стиля для выбранных элементов. |
| .detach() | Удаляет выбранные элементы из дерева DOM (сохраняет данные и события). |
| .empty() | Удаляет все дочерние узлы и содержимое у выбранных элементов. |
| .hasClass() | Определяет существуют ли искомые элементы с указанным именем класса, или классов. |
| .height() | Получает текущее вычисленное значение высоты для первого элемента в наборе совпавших элементов, или устанавливает высоту каждого соответствующего элемента. |
| .html() | Задает содержимое выбранных элементов, или возвращает значение первого элемента в наборе. |
| .innerHeight() | Получает текущее вычисленное значение внутренней высоты (включая внутренние отступы — padding, но не границы — border) для первого элемента в наборе совпавших элементов, или устанавливает внутреннюю высоту каждого соответствующего элемента. |
| .innerWidth() | Получает текущее вычисленное значение внутренней ширины (включая внутренние отступы — padding, но не границы — border) для первого элемента в наборе совпавших элементов, или устанавливает внутреннюю ширину каждого соответствующего элемента. |
| .insertAfter() | Вставляет указанное содержимое после каждого целевого элемента, переданного в параметре метода. |
| .insertBefore() | Вставляет указанное содержимое перед каждым целевым элементом, переданным в параметре метода. |
| $.cssHooks | Объект, который позволяет добавлять новые свойства, используемые в CSS, которые изначально не поддерживаются теми, или иными браузерами. |
| $.cssNumber | Объект, содержащий все свойства CSS, которые могут быть использованы без единиц измерения. Метод .css() использует этот объект с целью проверки возможности добавления единиц измерения px (пиксели) к значению. |
| $.escapeSelector() |
Шпаргалка jQuery
.ajaxComplete()
Прикрепляет функцию, которая исполняется всякий раз после завершения Ajax-запроса.
.serializeArray()
Упорядочивает все формы и элементы на форме (подобно .serialize()), но возвращает данные, которые можно использовать в структуре JSON.
.ajaxSend()
Прикрепляет функцию, которая выполняется каждый раз, перед отправкой ajax-запроса.
.ajaxStart()
Прикрепляет функцию, которая запускается каждый раз, когда начинается AJAX запрос и в данный момент никаких других акт
.ajaxStop()
Прикрепляет функцию, которая вызывается когда все Ajax запросы завершены.
.ajaxSuccess()
Прикрепляет функцию, которая исполняется всякий раз после успешного завершения Ajax запроса.
jQuery.param()
Преобразует объект или массив в сериализованную строку для использования в URL при Ajax запросах.
.serialize()
Преобразует значения набора элементов в строку данных.
.ajaxError()
Прикрепляет функцию, которая выполнится каждый раз при неудачном ajax-запросе.
jQuery.ajax()
Выполняет асинхронный HTTP (Ajax) запрос
jQuery.ajaxSetup()
Устанавливает значения по умолчанию для всех будущих Ajax запросов. Использовать данный метод не рекомендуется.
jQuery.ajaxPrefilter()
Обрабатывает пользовательские настройки Ajax запроса или изменяет существующие настройки перед каждой отправкой запроса через $.ajax().
jQuery.get()
Загружает данные с сервера, используя HTTP GET запрос.
jQuery.post()
Загружает данные с сервера, используя HTTP POST запрос.
.load()
Загружает данные с сервера (html) и вставляет в указанный элемент.
jQuery.getJSON()
Запрашивает JSON-данные у сервера методом GET.
jQuery.getScript()
Загружает JavaScript-файл с сервера методом GET и выполняет его.
.addClass()
Добавляет класс(ы) каждому выбранному элементу страницы.
.hasClass()
Определяет наличие указанного имени класса у любого из элементов, попавшего в набор.
.removeClass()
Удаляет класс(ы) у выбранных элементов.
.toggleClass()
Переключатель классов. Добавляет элементу указанный класс, если его нет. Иначе удаляет.
.clone()
Создает полную копию выбранных элементов.
.wrap()
Метод помещает выбранные элементы внутрь заданного элемента.
.removeProp()
Удаляет свойство у каждого выбранного элемента.
.wrapInner()
Оборачивает <strong>внутреннее</strong> содержание выбранных элементов.
.append()
Добавляет контент внутрь выбранных элементов в конец, после имеющихся.
.appendTo()
Добавляет все выбранные элементы внутрь другого набора элементов после существующего контента.
.html()
Возвращает или изменяет html-содержимое выбранных элементов
.text()
Возвращает или изменяет текстовое содержимое выбранных элементов.
.prepend()
Добавляет контент внутрь выбранных элементов ПЕРЕД существующим контентом
.prependTo()
Добавляет все выбранные элементы внутрь другого набора элементов перед существующим контентом.
.after()
Вставляет контент ПОСЛЕ каждого выбранного элемента.
.before()
Вставляет контент ПЕРЕД каждым выбранным элементом.
.insertAfter()
Вставляет контент сразу после определенных элементов страницы.
.insertBefore()
Вставляет контент перед определенными элементами страницы.
.unwrap()
Метод обратный методу .wrap(). Удаляет родительские элементы у выбранных элементов, при этом само содержимое остается на месте.
.remove()
Удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков)
.removeAttr()
Удаляет указанный атрибут у каждого выбранного элемента.
.empty()
Очищает содержание выбранных элементов, т.е. удаляет все узлы-потомки (включая тексты) из выбранных элементов, все обработчики событий и внутренние кэш-данные.
.detach()
Удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков)
.prop()
Возвращает / изменяет значение свойств выбранных элементов.
.replaceAll()
Замените каждой целевой элемент набором соответствующих элементов.
.attr()
Получает/устанавливает значение атрибутов выбранных элементов.
.val()
Возвращает или устанавливает значение атрибута value
.css()
Возвращает/устанвливает значения css-свойств у выбранных элементов страницы.
.height()
Возвращает, устанавливает высоту элемента.
.width()
Возвращает, устанавливает ширину элемента.
.innerHeight()
Получает высоту элемента с учетом размера внутренних отступов (padding).
.innerWidth()
ширина элемента с учетом размера внутренних отступов (padding).
.outerHeight()
Высота элемента с учетом внутренних отступов, border-width и (опционально) внешних отступов (margin). В результате получим целое число (без px).
.outerWidth()
Ширина элемента с учетом внутренних отступов, border-width и (опционально) внешних отступов (margin).
.offset()
Возвращает/устанавливает координаты относительно начала страницы.
.position()
Получает значение позиции элемента top и left относительно отступов его родителя.
.scrollLeft()
Получает/устанавливает значение отступа прокрутки слева для первого элемента в наборе
.scrollTop()
Получает / устанавливает значение отступа прокрутки сверху.
jQuery.holdReady()
Метод позволяет приостановить выполнение обработчиков события ready
jQuery()
Основная функция в jQuery, известная также под короткой записью $(). Позволяет находить элементы на странице по CSS-селектору, создавать элементы.
jQuery.noConflict()
Освобождает переменную $, чтобы избежать конфликтов имен
jQuery.when()
Создает копию глобального объекта jQuery, методы и свойства копии могут быть изменены не затрагивая исходный объект
.clearQueue()
Очищает очередь функций у выбранных элементов старницы
jQuery.ajaxTransport()
Создаёт объект, который определяет способ передачи данных через Ajax запрос.
callbacks.add()
Добавляет колбэк или коллекцию колбэков в общий список.
callbacks.fire()
Выполняет все функции из списка функций объекта callback.
callbacks.fired()
Проверяет был ли вызван колбэк хотя бы один раз.
callbacks.fireWith()
Вызывает колбэк с заданным числом аргументов.
callbacks.has()
Проверяет наличие колбэка в списке.
callbacks.lock()
Блокирует список колбэков в текущем состоянии.
callbacks.locked()
Определяет заблокирован ли список колбэков.
jQuery.Callbacks()
Объект, предоставляющий управлять списком колбэков.
.dequeue()
Выполнение следующей функции в очереди.
.data()
Привязка и чтение собственные переменные к/от любым элементов страницы.
jQuery.hasData()
Проверяет, содержит ли элемент какие-то данные, записанные через jQuery.
jQuery.dequeue()
Выполнение следующей функции в очереди.
.removeData()
Удаление прежде сохранённых данных.
jQuery.data()
Данный метод следует использовать для записи/считки данных из элементов страницы.
deferred.always()
Устанавливает обработчик, реагирующий на переход в любое из двух состояний.
deferred.done()
Устанавливает заданную функцию handler в качестве обработчика перехода объекта deferred, в состояние удачного выполнения.
deferred.fail()
Устанавливает заданную функцию handler в качестве обработчика перехода объекта deferred, в состояние неудачного выполнения.
deferred.notify()
Вызывает событие промежуточного выполнения deferred (прогресса выполнения) c набором аргументов args.
deferred.notifyWith()
Вызывает событие промежуточного выполнения deferred (прогресса выполнения) c набором аргументов args в рамках заданного контекста.
deferred.progress()
Устанавливает обработчики прогресса выполнения объекта deferred.
.queue()
Показать или назначить очередь функций, которые будут применены к элементам.
deferred.reject()
Выставляет состояние “reject” объекту Deferred, вызывает любую функции обратного действия (типа failCallback), передав в неё набор аргументов args.
deferred.rejectWith()
Выставляет состояние “reject” объекту Deferred в рамках заданного контекста; вызывает любую функции обратного действия (типа failCallback), передав в неё набор аргументов args.
deferred.resolve()
Выставляет состояние “resolve” объекту Deferred, вызывает любую функции обратного действия (типа doneCallbacks), передав в неё набор аргументов args.
deferred.resolveWith()
Выставляет состояние “resolve” объекту Deferred в рамках заданного контекста; вызывает любую функции обратного действия (типа doneCallback), передав в неё набор аргументов args.
deferred.state()
Определить текущее состояние объекта Deferred.
deferred.then()
Добавляет обработчики, которые будут запущены при изменении состояния объекта Deferred.
:animated Selector
Выборка элементов, которые в данный момент анимируются.
:eq()
Выборка элемента по n-ному индексу.
:even
Выборка всех чётных элементов, начиная с 0.
:first
Выборка первого элемента, начиная с 0.
:focus
Выборка элемента, на который был осуществлёна фокусировка.
:gt()
Выборка элементов, индекс которых больше заданного.
:header
Выборка всех заголовков типа h2, h3, h4 и так далее.
:lang()
Выборка всех элементов по определённому языку.
:last
Выборка последнего элемента.
:lt()
Выборка элементов, индекс которых меньше заданного.
.scroll()
Прикрепляет обработчик к JavaScript событию “scroll” (скролл) или генерирует само событи
.ready()
Выполняет функцию, как только DOM полностью загрузился.
.bind()
Прикрепляет обработчик к событию.
.delegate()
Устанавливает обработчик события на выбранные элементы страницы, подходящими под селектор. Обработчик будет действовать и на элементах, появившихся после его установки.
jQuery.proxy()
По заданной функции, создает другую такую же, внутри которой переменная this будет равна заданному значению.
.off()
Удаление обработчика события.
.one()
Прикрепление обработчиков событий к элементам. Данный обработчик запустится как минимум один раз для каждого элемента.
.trigger()
Выполнить события заданного типа и запустить обработчики, прикреплённые к элементам.
.triggerHandler()
Запустить все обработчики событий, прикреплённые к элементам.
.unbind()
Открепление обработчиков событий от элементов.
.undelegate()
Удаляет обработчики событий с элементов, подходящих под селектор, установленные методом delegate().
event.currentTarget
Текущий DOM элемент в рамках определённого контекста.
event.data
Необязательный объект с данными, передаваемый метод-обработчик, прикреплённого события.
event.delegateTarget
Элемент, к которому прикреплён только что отработанный обработчик события.
event.isDefaultPrevented()
Определяет был ли вызван event.preventDefault() для объекта события.
event.metaKey
Определяет была ли зажата клавиша META в момент действия события.
event.namespace
Пространство имён, назначенное при вызове события.
event.pageY
Позиция мыши по отношению к верхушке документа.
event.preventDefault()
Если будет вызван данный метод, то действие события по умолчанию не будет выполнено.
Возвращает дополнительный DOM элемент, который был задействован при работе события.
event.result
Последнее значение, которое было возвращено обработчиком события, если значение не было равно undefined.
event.stopPropagation()
Метод объекта event stopPropagation останавливает «всплытие» вызова события к родительским элементам.
event.target
DOM элемент, на котором было инициализировано событие.
event.timeStamp
Разница во времени с 1 Января 1970 по момент создания события.
event.type
Возвращает тип события.
event.which
Данное свойство можно использовать для определения, какие клавиши клавиатуры или мыши были использованы.
.blur()
Прикрепить обработчик к JavaScript событию «blur», или вызвать само событие.
.change()
Вызывается или отслеживается JavaScript событие «change» (событие изменения формы).
.focus()
Вызывается или отслеживается JavaScript событие «focus».
.focusin()
Вызывается или отслеживается JavaScript событие «focusin».
:first-child
Выборка всех элементов, которые являются первым потомком родителя.
:first-of-type
Выборка всех элементов, которые являются одного типа и являются первыми потомками родительских элементов.
:last-child
Выборка всех элементов, которые являются последними потомком родителя.
:last-of-type
Выборка всех элементов, которые являются одного типа и являются последними потомками родительских элементов.
:nth-child()
Выборка потомков по заданному индексу.
:nth-last-child()
Выборка потомков по заданному индексу, начиная с конца.
:nth-last-of-type()
Выборка всех элементов-потомков по индексу, начиная с конца.
:nth-of-type()
Выборка элементов-потомков по заданному индексу, схожих по типу.
:only-child
Выбирает элемент, который является единственным потомком родительского элемента.
:only-of-type
Выборка всех элементов одного типа, являющимися единственными потомками родительского элемента.
:contains()
Выборка всех элементов, содержащих определённый текст.
:empty
Выборка пустых элементов.
:has()
Выборка элементов, которые содержат хоть одного потомка, попадающего под селектор.
:parent
Выборка элементов, содержащих внутренний контент (как элементы, так и текст).
:button
Выборка всех элементов, типа кнопка “button”.
:checkbox
Выборка всех элементов типа чекбокс (checkbox).
:checked
Выборка всех элементов, который были отмечены или выбраны.
:disabled
Выборка всех деактивированных элементов.
:enabled
Выборка всех активных элементов.
:file
Выборка всех элемент форм для загрузки файлов.
:focus
Выборка элемента, на котом сфокусировался пользователь.
:image
Выборка всех элемент форм типа изображение (image).
Метод .show() | jQuery справочник
jQuery эффекты
Определение и применение
jQuery метод .show() позволяет отобразить скрытые выбранные элементы. Для того, чтобы скрыть выбранные элементы вы можете воспользоваться методом .hide().
Обращаю Ваше внимание, что когда метод .show() используется без параметров, то элемент отображается без анимации. Это эквивалентно* использованию метода .css() со следующим значением:
$( selector ).css( "display", "block" )
* — за исключением того, что значение свойства display сохраняется внутри jQuery и может позже быть восстановлено к первоначальному значению.
Если вы используете стили элемента с !important, то метод .show() не сможет отобразить элемент. В этом случае рекомендуется использовать такие методы как .addClass(), .removeClass(), .toggleClass(), или .attr().
jQuery синтаксис:
Синтаксис 1.0:
$( selector ).show() // метод используется без параметров
$( selector ).show( duration, complete )
duration - Number, или String
complete - Function
$( selector ).show( { options } ) // option: value (описание ниже)
options - PlainObject
Синтаксис 1.4.3:
$( selector ).show( duration, easing, complete )
duration - Number, или String
easing - String
complete - Function
Добавлен в версии jQuery
1.0 (синтаксис обновлен в версии 1.4)
Значения параметров
| Параметр | Описание |
|---|---|
| duration | Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю). |
| easing | Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing. |
| complete | Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация. |
| options |
|
| Метод / свойство | Описание |
|---|---|
| привязка () | Не рекомендуется в версии 3.0. Использовать on () вместо этого. Присоединяет обработчики событий к элементам |
| размытие () | Присоединяет / запускает событие размытия |
| изменить () | Присоединяет / запускает событие изменения |
| нажмите () | Присоединяет / запускает событие щелчка |
| двойной щелчок () | Присоединяет / запускает событие двойного щелчка |
| делегат () | Не рекомендуется в версии 3.0. Используйте on () вместо этого. Присоединяет обработчик к текущему или будущему указанному дочернему элементу элементы согласующих элементов |
| матрица () | Удалено в версии 1.9. Удаляет все обработчики событий, добавленные с помощью метода |
| ошибка () | Удалено в версии 3.0. Присоединяет / запускает событие ошибки |
| event.currentTarget | Текущий элемент DOM в фазе восходящей цепочки событий |
| событие.данные | Содержит дополнительные данные, передаваемые методу события, когда текущий выполняющий обработчик привязан |
| event.delegateTarget | Возвращает элемент, к которому был прикреплен вызываемый в данный момент обработчик событий jQuery. |
| event.isDefaultPrevented () | Возвращает, был ли вызван event.preventDefault () для объекта события |
| event.isImmediatePropagationStopped () | Возвращает ли событие.stopImmediatePropagation () был вызван для объекта события |
| event.isPropagationStopped () | Возвращает, был ли вызван event.stopPropagation () для объекта события |
| event.namespace | Возвращает пространство имен, указанное при запуске события |
| event.pageX | Возвращает положение мыши относительно левого края документа |
| событие.pageY | Возвращает положение мыши относительно верхнего края документа |
| event.preventDefault () | Запрещает действие по умолчанию для события |
| event.relatedTarget | Возвращает, какой элемент вводится или выводится при движении мыши |
| событие. Результат | Содержит последнее / предыдущее значение, возвращенное обработчиком события. запускается указанным событием |
| событие.stopImmediatePropagation () | Запрещает вызов другим обработчикам событий |
| event.stopPropagation () | Предотвращает всплытие события в дереве DOM, предотвращая любые родительские обработчики от уведомления о событии |
| event.target | Возвращает, какой элемент DOM вызвал событие |
| event.timeStamp | Возвращает количество миллисекунд с 1 января 1970 г., при срабатывании события |
| событие.тип | Возвращает, какой тип события был инициирован |
| событие. | Возвращает, какая клавиша клавиатуры или кнопка мыши была нажата для события |
| фокус () | Присоединяет / запускает событие фокуса |
| фокус () | Присоединяет обработчик события к событию focusin |
| фокусировка () | Присоединяет обработчик события к событию focusout |
| наведение () | Присоединяет два обработчика событий к событию зависания |
| нажатие клавиши () | Присоединяет / запускает событие нажатия клавиши |
| нажатие клавиши () | Присоединяет / запускает событие нажатия клавиши |
| клавиатура () | Присоединяет / запускает событие keyup |
| жить () | Удалено в версии 1.9. Добавляет один или несколько обработчиков событий к текущим или будущим выбранным элементам |
| нагрузка () | Удалено в версии 3.0. Присоединяет обработчик событий к событию загрузки |
| mousedown () | Присоединяет / запускает событие mousedown |
| mouseenter () | Присоединяет / запускает событие mouseenter |
| мышь () | Присоединяет / запускает событие mouseleave |
| mousemove () | Присоединяет / запускает событие mousemove |
| мышь () | Присоединяет / запускает событие mouseout |
| наведение курсора мыши () | Присоединяет / запускает событие наведения указателя мыши |
| мышь () | Присоединяет / запускает событие mouseup |
| выкл. () | Удаляет обработчики событий, прикрепленные с помощью метода on () |
| по () | Присоединяет обработчики событий к элементам |
| один () | Добавляет один или несколько обработчиков событий к выбранным элементам.Этот обработчик может быть только срабатывает один раз на элемент |
| $ .прокси () | Принимает существующую функцию и возвращает новую с определенным контекстом |
| готово () | Определяет функцию, выполняемую при полной загрузке модели DOM. |
| изменить размер () | Присоединяет / запускает событие изменения размера |
| свиток () | Присоединяет / запускает событие прокрутки |
| выберите () | Присоединяет / запускает событие выбора |
| отправить () | Присоединяет / запускает событие отправки |
| переключатель () | Удалено в версии 1.9. Добавляет две или более функций для переключения между событием щелчка |
| триггер () | Запускает все события, привязанные к выбранным элементам |
| Пусковой механизм () | Запускает все функции, привязанные к указанному событию для выбранных элементов |
| отвязать () | Не рекомендуется в версии 3.0. Использовать off () вместо этого. Удаляет добавленный обработчик событий из выбранных элементов |
| без делегатов () | Не рекомендуется в версии 3.0. Используйте off () вместо этого. Удаляет обработчик событий для выбранных элементов, сейчас или в будущем |
| выгрузить () | Удалено в версии 3.0. Присоединяет обработчик события к событию выгрузки |
.
| Метод | Описание |
|---|---|
| addClass () | Добавляет одно или несколько имен классов к выбранным элементам |
| после () | Вставляет содержимое после выбранных элементов |
| добавить () | Вставляет содержимое в конец выбранных элементов |
| appendTo () | Вставляет элементы HTML в конец выбранных элементов |
| attr () | Устанавливает или возвращает атрибуты / значения выбранных элементов |
| перед () | Вставляет содержимое перед выбранными элементами |
| клон () | Делает копию выбранных элементов |
| CSS () | Задает или возвращает одно или несколько свойств стиля для выбранных элементов |
| отсоединить () | Удаляет выбранные элементы (сохраняет данные и события) |
| пустой () | Удаляет все дочерние узлы и содержимое из выбранных элементов |
| имеетClass () | Проверяет, имеет ли какой-либо из выбранных элементов указанное имя класса |
| высота () | Устанавливает или возвращает высоту выбранных элементов |
| HTML () | Задает или возвращает содержимое выбранных элементов |
| внутренняя высота () | Возвращает высоту элемента (включая отступы, но не границу). |
| внутренняя ширина () | Возвращает ширину элемента (включая отступы, но не границу). |
| вставка После () | Вставляет элементы HTML после выбранных элементов |
| вставка Перед () | Вставляет элементы HTML перед выбранными элементами |
| смещение () | Устанавливает или возвращает координаты смещения для выбранного элементы (относительно документа) |
| offsetParent () | Возвращает первый расположенный родительский элемент |
| outerHeight () | Возвращает высоту элемента (включая отступ и границу) |
| Внешняя ширина () | Возвращает ширину элемента (включая отступы и границу) |
| позиция () | Возвращает позицию (относительно родительского element) элемента |
| начало () | Вставляет содержимое в начало выбранных элементов |
| prependTo () | Вставляет элементы HTML в начало выбранных элементов |
| стойка () | Устанавливает или возвращает свойства / значения выбранных элементов |
| удалить () | Удаляет выбранные элементы (включая данные и события) |
| removeAttr () | Удаляет один или несколько атрибутов из выбранных элементов |
| removeClass () | Удаляет один или несколько классов из выбранных элементов |
| removeProp () | Удаляет свойство, заданное методом prop () |
| заменить Все () | Заменяет выбранные элементы новыми элементами HTML |
| заменить на () | Заменяет выбранные элементы новым содержимым |
| свиток влево () | Устанавливает или возвращает горизонтальную позицию полосы прокрутки выбранных элементов |
| scrollTop () | Устанавливает или возвращает вертикальное положение полосы прокрутки выбранных элементов |
| текст () | Задает или возвращает текстовое содержимое выбранных элементов |
| toggleClass () | Переключение между добавлением / удалением одного или нескольких классов из выбранных элементов |
| развернуть () | Удаляет родительский элемент из выбранных элементов |
| вал () | Устанавливает или возвращает атрибут значения выбранных элементов (для формы элементы) |
| ширина () | Задает или возвращает ширину выбранных элементов |
| обертка () | Оборачивает элементы HTML вокруг каждого выбранного элемента |
| обертка Все () | Оборачивает элементы HTML вокруг всех выбранных элементов |
| обертка Внутренняя () | Оборачивает HTML-элемент (ы) вокруг содержимого каждого выбранного элемента |
.
jQuery.ajax () | Документация по API jQuery
jQuery.ajax () | Документация по API jQuery
jQuery.ajax (url [, settings]) Возвращает: jqXHR
Описание: Выполнение асинхронного HTTP (Ajax) запроса.
добавлена версия: 1.5jQuery.ajax (url [, settings])
добавлена версия: 1.0jQuery.ajax ([настройки])
настройки
Набор пар ключ / значение, которые настраивают запрос Ajax.Все настройки необязательны. Значение по умолчанию может быть установлено для любой опции с помощью $ .ajaxSetup ().
принимает (по умолчанию:
в зависимости от dataType)Набор пар ключ / значение, которые сопоставляют данный
dataTypeс его типом MIME, который отправляется в заголовке запросаAccept. Этот заголовок сообщает серверу, какой ответ он примет взамен. Например, следующее определяет настраиваемый типmycustomtype, который будет отправлен с запросом:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mycustomtype: 'application / x-some-custom-type''text mycustomtype': function (result) {Примечание: Вам нужно будет указать дополнительную запись для этого типа в преобразователях
async (по умолчанию:
true)По умолчанию все запросы отправляются асинхронно (то есть по умолчанию установлено значение
true). Если вам нужны синхронные запросы, установите для этого параметра значениеfalse. Междоменные запросы иdataType: "jsonp"запросов не поддерживают синхронную работу. Обратите внимание, что синхронные запросы могут временно заблокировать браузер, отключив любые действия, пока запрос активен. Начиная с jQuery 1.8 , использованиеasync: falseс jqXHR ($ .Deferred) не рекомендуется; вы должны использовать параметры обратного вызова success / error / complete вместо соответствующих методов объекта jqXHR, таких какjqXHR.done ().до Отправить
Функция обратного вызова перед запросом, которая может использоваться для изменения объекта jqXHR (в jQuery 1.4.x, XMLHTTPRequest) перед его отправкой. Используйте это для установки пользовательских заголовков и т. Д. Объекты jqXHR и settings передаются как аргументы.Это событие Ajax. Возвращение
falseв функцииbeforeSendотменит запрос. Начиная с jQuery 1.5 , опцияbeforeSendбудет вызываться независимо от типа запроса.cache (по умолчанию:
true, false для dataType 'script' и 'jsonp')Если установлено значение
false, запрашиваемые страницы не будут кэшироваться браузером. Примечание: Установкаcacheв false будет правильно работать только с запросами HEAD и GET.Он работает путем добавления «_ = {timestamp}» к параметрам GET. Параметр не требуется для других типов запросов, за исключением IE8, когда POST выполняется для URL-адреса, который уже был запрошен GET.полная
Функция, которая будет вызываться после завершения запроса (после успешного завершения
выполняетсяи ошибкаобратные вызовы). Функция получает два аргумента: объект jqXHR (в jQuery 1.4.x, XMLHTTPRequest) и строку, классифицирующую статус запроса («успех»,,«не изменен»,,, «нет содержимого»,,, ошибка «,» тайм-аут «,« прервать »или« parsererror »). Начиная с jQuery 1.5 , настройкаcompleteможет принимать массив функций. Каждая функция будет вызываться по очереди. Это событие Ajax.содержание
Объект пар строка / регулярное выражение, которые определяют, как jQuery будет анализировать ответ, учитывая его тип содержимого. (добавлена в версии: 1.5)
contentType (по умолчанию:
'application / x-www-form-urlencoded; charset = UTF-8')При отправке данных на сервер используйте этот тип содержимого.По умолчанию это «application / x-www-form-urlencoded; charset = UTF-8», что подходит для большинства случаев. Если вы явно передаете тип содержимого в
$ .ajax (), он всегда отправляется на сервер (даже если данные не отправляются). Начиная с jQuery 1.6, вы можете передатьfalse, чтобы указать jQuery не устанавливать какой-либо заголовок типа содержимого. Примечание: Спецификация W3C XMLHttpRequest требует, чтобы кодировка всегда была UTF-8; указание другой кодировки не заставит браузер изменить кодировку. Примечание: Для междоменных запросов установка любого типа контента, кромеapplication / x-www-form-urlencoded,multipart / form-dataилиtext / plain, запустит браузер для отправки предполетный запрос OPTIONS на сервер.контекст
Этот объект будет контекстом всех обратных вызовов, связанных с Ajax. По умолчанию контекст - это объект, представляющий настройки Ajax, используемые в вызове (
$.ajaxSettingsобъединен с настройками, переданными в$ .ajax
.