jQuery метод .one()
Определение и применение
jQuery метод .one() приcоединяет для выбранных элементов функцию обработчика, которая будет выполнена не более одного раза к каждому элементу по каждому типу событий.
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). |
Пример использования
<html>
<head>
<title>Использование jQuery метода .one()</title>
<style>
div {
display: inline-block; /* блочно-строчные элементы */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background: green; /* цвет заднего фона зеленый */
margin: 10px; /* внешние отступы элемента */
transition: 0.5s; /* эффект перехода занимает пол секунды */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").one("click", function () {
// приcоединяем для выбранных элементов функцию обработчика события "click"
$(this).css("width", "+=50"); // устанавливаем элементу на котором было вызвано событие новую ширину
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
В этом примере с использованием jQuery метода .one() мы приcоединяем для выбранных элементов <div> функцию обработчика события, которая будет выполнена не более одного раза к каждому элементу по типу события "click" (клик левой кнопкой мыши). При срабатывании события функция с помощью метода .css() изменяет текущую ширину элемента, прибавляя к текущей ширине элемента 50 пикселей.
Пример использования метода one(): попробуйте сами
index.html
<div></div>
<div></div>
<div></div>
main.js
$(document).ready(function () {
$("div").one("click", function () {
$(this).css("width", "+=50");
});
});
style.css
div{
display:inline-block;
width:50px;
height:50px;
background:green;
margin:10px;
transition: .5s;
}
Результат нашего примера:
В следующем примере мы рассмотрим как присоединить для выбранных элементов функции обработчика для различных событий:
<html>
<head>
<title>Использование jQuery метода .one() (несколько событий)</title>
<style>
div {
display: inline-block; /* блочно-строчные элементы */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background: blue; /* цвет заднего фона синий */
margin: 10px; /* внешние отступы элемента */
transition: 0.5s; /* эффект перехода занимает пол секунды */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").one({
click: function () {
// приcоединяем для выбранных элементов функцию обработчика события "click"
$(this).css("width", "+=50"); // устанавливаем элементу на котором было вызвано событие новую ширину
},
dblclick: function () {
// приcоединяем для выбранных элементов функцию обработчика события "dblclick"
$(this).css("height", "+=50"); // устанавливаем элементу на котором было вызвано событие новую высоту
},
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
В этом примере с использованием jQuery метода .one() мы приcоединяем для выбранных элементов <div> функции обработчики события, которые будут выполнены не более одного раза к каждому элементу по типу события "click" (клик левой кнопкой мыши) и "dblclick" (двойной клик левой кнопкой мыши).
При срабатывании события "click" функция с помощью метода .css() изменяет текущую ширину элемента, прибавляя к текущей ширине элемента 50 пикселей. При срабатывании события "dblclick" функция с помощью метода .css() изменяет текущую высоту элемента, прибавляя к текущей ширине элемента 50 пикселей.
Пример использования метода one() (несколько событий): попробуйте сами
index.html
<div></div>
<div></div>
<div></div>
main.js
$(document).ready(function () {
$("div").one({
"click": function () {
$(this).css("width", "+=50");
},
"dblclick": function () {
$(this).css("height", "+=50");
},
});
});
style.css
div{
display:inline-block;
width:50px;
height:50px;
background:blue;
margin:10px;
transition: .5s;
}
Результат нашего примера:
