Jquery

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

jQuery события | jQuery справочник

Метод Описание
.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; /* эффект

jQuery методы DOM | jQuery справочник

Метод Описание
.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()

Если будет вызван данный метод, то действие события по умолчанию не будет выполнено.

event.relatedTarget

Возвращает дополнительный 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
  • duration (по умолчанию: 400).
    Тип: Number, или String.
    Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing).
    Тип: String.
    Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true).
    Тип: Boolean, или String.
    Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( «имя очереди» ), чтобы запустить её.
  • specialEasing.
    Тип: PlainObject.
    Объект, содержащий одно

Методы событий jQuery

live ().

.

Метод / свойство Описание
привязка () Не рекомендуется в версии 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. Присоединяет обработчик события к событию выгрузки

.

jQuery HTML / CSS методы

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

Приведенные ниже методы работают как для документов HTML, так и для XML. Исключение: метод html ().

Метод Описание
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

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2021 © Все права защищены. Карта сайта