. Trigger() и запуск события без вызова пользователем
Вызывает событие для каждого элемента набора.
Trigger() Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
Заметка: “myCustomEvent” - любое несуществующее название.
$(document).ready(function(){
$("#myElementId").on("myCustomEvent",function(event){
$("#myElementId").addClass("green");
});
$("#myElementId").trigger("myCustomEvent");
});
При загрузке страницы окрашивает див.
_____________________________________________________________________________________
.delegate() (eng. посилати)
Attaches handlers to many elements at once.
Устанавливает обработчик события на элементы, соответствующие заданному селектору. Особенностью метода является то, что если на страницу будут вставлены новые элементы, которые соответствуют этому селектору, то они также будут реагировать на заданные события. Выбранные элементы играют роль контекста выполнения метода (то есть, поиск элементов, для установки обработчиков событий, будет производиться только внутри выбранных элементов). Метод имеет один вариант использования:
.delegate(selector, eventType, [eventData], handler)
selector — селектор для поиска элементов, на которые будет установлен заданный обработчик событий. eventType — тип обрабатываемого события. Например "click", "resize" (список всех типов событий). eventData — данные, передаваемые обработчику событий. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...}. handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.
$(document.body).delegate('p','click', function() {
$(this).after($('<p>No click me!</p>'));
});
Плодится, куда не нажми.
P.S. Если заменить $(this) на $(‘p’) – получится очень даже вредная штука ;)
_____________________________________________________________________________________
The code "after" the return is actually on the "same line" (there's no semicolon and the "new line" starts with a dot). In other words, the following two things are identical...
$("div").addClass("blue").append("<span>Text</span>");
$("div")
.addClass("blue")
.append("<span>Text</span>");
_____________________________________________________________________________________
Создание одновременно двоих див с разными классами внутри друг друга.
$(".draw-area").append($("<div/>").addClass("armbox body-part").append($("<div/>").addClass("torso body-part")))
_____________________________________________________________________________________
Массив с функциями
var drawSequence = [ drawHead,
drawTorso,
drawLeftArm,
drawRightArm,
drawLeftLeg,
drawRightLeg ];
_____________________________________________________________________________________
.next()
Осуществляет поиск элементов, лежащих непосредственно после заданных элементов (по одному для каждого из заданных). Метод имеет один вариант использования:
.next([selector])
Возвращает элементы, которые находятся непосредственно после каждого из выбранных элементов. При необходимости, можно задать селектор selector для фильтрации результата.
Примеры использования:
$("div").next() |
вернет элементы, которые находятся непосредственно после div-элементов на странице. |
$("div").next(".bigBlock") |
вернет элементы класса bigBlock, которые находятся непосредственно после div-элементов. |
_____________________________________________________________________________________
.change()
Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие. Метод имеет три варианта использования:
.change(handler(eventObject))
Устанавливает функцию handler в качестве обработчика события change, на выбранные элементы. Метод является аналогом bind("change", handler(eventObject)).
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.
.change(eventData, handler(eventObject))
Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные. Является аналогом bind("change", eventData, handler(eventObject)).
handler(eventObject) — см. выше. eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...}.
.change()
Вызывает событие change, у выбранных элементов страницы. Метод является аналогом trigger("change").
Убрать установленный обработчик можно с помощью метода unbind().
Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования change(), можно найти в описании этих методов.
Напомним, что событие change происходит не непосредственно в момент изменения, а только при потери фокуса измененного элемента формы.
// установим обработчик события change, элементу с идентификатором foo
$('#foo').change(function(){
alert('Элемент foo был изменен.');
});
// вызовим событие change на элементе foo
$('#foo').change();
// установим еще один обработчик события change, на этот раз элементам
// с классом block. В обработчик передадим дополнительные данные
$('.block').change({a:12, b:"abc"}, function(eventObject){
var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
alert('Элемент с классом block был изменен. '+
'В обработчик этого события переданы данные: ' + externalData );
});
_____________________________________________________________________________________
.keydown()
Oбрабатывает переход клавиши клавиатуры в нажатое состояние.
The keydown option triggers for any key, any key at all. This means that we would be checking if we got an event for things like backspace, escape, enter and that sort of thing. While that's helpful in some cases we really only want things a player can guess.
This method is a shortcut for .bind('keydown', handler) in the first and second variations, and .trigger('keydown') in the third.
The keydown event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.
$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});
To trigger the event manually, apply .keydown() without an argument:
$('#other').click(function() {
$('#target').keydown();
});
_____________________________________________________________________________________
.keyup()
Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.
keyup really is what we are looking for as it catches the last moment of a keyboard input. This means that the value in our '#letter-input' is set and something we can delete. It is the only handler that fits our needs for the hangman game. Using a keyup handler is a great way to ensure something only happens once, as while a keyboard might repeat a letter if it is held down, a keyboard key can only move 'up' once per key press.
$('#letter-input').keyup(testKeypress());
_____________________________________________________________________________________
.keypress()
Данное событие обычно активируется, когда нажата клавиша на клавиатуре. Событие keypress рассматривается как keydown и keyup на одной и той же клавише. Таким образом, последовательность событий представляет собой:
keydown
keypress
keyup
// установим обработчик события keypress, элементу с идентификатором foo
$('#foo').keypress(function(eventObject){
alert('Вы ввели символ с клавиатуры. Его код равен ' + eventObject.which);
});
// вызовем событие keypress на элементе foo
$('#foo').keypress();
// установим еще один обработчик события keypress, на этот раз элементам
// с классом block. В обработчик передадим дополнительные данные
$('.block').keypress({a:12, b:"abc"}, function(eventObject){
var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
alert('Вы ввели символ с клавиатуры. '+
'В обработчик этого события переданы данные: ' + externalData);
});
_____________________________________________________________________________________
JQuery UI