Jquery
Содержание:
- Introduction
- window.load (Built-in JavaScript)
- Plain JavaScript ready() Alternative
- document.ready (jQuery)
- jQuery Migrate — All Versions
- Выбор элементов
- link jQuery Migrate Plugin
- Ожидание готовности DOM-модели
- jQuery — Отмена стандартного поведения события
- jQuery 3.0 ready() Changes
- Функция $() библиотеки jQuery
- Добавление событий к динамически созданным объектам
- Дополнительная информация
- jQuery – События клавиатуры
- .ready( handler )Возвращает: jQuery
- Обработка событий с помощью методов jQuery
- Псевдонимы jQuery, пространство имен.
Introduction
A common question on (web) programming forums for beginners, you can find the «How do I perform various actions as soon as the page loads on the client side in JavaScript?»
These questions will mostly be answered by either «Use document.ready» or «Use window.load» sporadically.
It is quite common that people need to attach some actions to the
event on the client side. However there are two main functions that I frequently see mixed with each other when served to the beginning programmer, confusing when to use which.
Misusing
and can at times be irrelevant but on other occasions may prove critically wrong programming, especially when UI manipulation is crucial!
window.load (Built-in JavaScript)
The however will wait for the page to be fully loaded, this includes inner frames, images etc.
JavaScript
Copy Code
$(window).load(function()
{
alert("(window).load was called - window is loaded!");
});
* is a built-in JavaScript method, it is known to have some quirks in old browsers (IE6, IE8, old FF and Opera versions) but will generally work in all of them.
can be used in the body’s event like this (but I would strongly suggest you avoid mixing code like this in the HTML, as it is a source for confusion later on):
HTML
Copy Code
<html>
<head>
<script>
function foo()
{
alert("Page loaded!");
}
<script>
</head>
<bodyonload="foo()">
<h1>I didn't do it!</h1>
</body>
</html>
Warning — Do not confuse the method of the
element with the jQuery AJAX’s load method!!!
JavaScript
Copy Code
Plain JavaScript ready() Alternative
For modern browsers, and IE9+, you can listen for the event:
But, note that the callback will not be executed if the event has already fired. To make sure the callback is always run, jQuery checks the of a document () and, if it’s already , executes the callback immediately:
You could also include the domReady library, which has already implemented this solution.
Older versions of Internet Explorer
For IE versions less than or equal 8, you could use the event to detect the of a document:
Alternatively you could use the load event, like jQuery does, as this will work in any browser. This also results in a time delay, as it’ll wait for all assets to be loaded. Note that you’ll also have to check the in this solution, like explained above, to make sure the callback will still be executed even if the event has already fired.
document.ready (jQuery)
will execute right after the HTML document is loaded property, and the DOM is ready.
DOM: The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
JavaScript
Copy Code
$(document).ready(function()
{
alert("(document).ready was called - document is ready!");
});
document.ready (a jQuery event) will fire when all the elements are in place, and they can be referenced in the JS code, but the content is not necessarily loaded.
Warning — If you want to use the Height, Width properties of an image for example, then
is a deal braker!!
JavaScript
Copy Code
document.observe("dom:loaded", function()
{
});
* See more on document.observe on prototypejs.org
jQuery Migrate — All Versions
- jQuery Migrate 3.3.2 — uncompressed, minified
- jQuery Migrate 3.3.1 — uncompressed, minified
- jQuery Migrate 3.3.0 — uncompressed, minified
- jQuery Migrate 3.2.0 — uncompressed, minified
- jQuery Migrate 3.1.0 — uncompressed, minified
- jQuery Migrate 3.0.1 — uncompressed, minified
- jQuery Migrate 3.0.0 — uncompressed, minified
- jQuery Migrate 1.4.1 — uncompressed, minified
- jQuery Migrate 1.4.0 — uncompressed, minified
- jQuery Migrate 1.3.0 — uncompressed, minified
- jQuery Migrate 1.2.1 — uncompressed, minified
- jQuery Migrate 1.2.0 — uncompressed, minified
- jQuery Migrate 1.1.1 — uncompressed, minified
- jQuery Migrate 1.1.0 — uncompressed, minified
- jQuery Migrate 1.0.0 — uncompressed, minified
Выбор элементов
Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:
Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы <img>).
В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:
| Селектор | Описание |
|---|---|
| :animated | Выбирает все анимируемые в данный момент элементы |
| :contains(текст) | Выбирает все элементы, содержащие указанный текст |
| :eq(n) | Выбирает элемент с индексом n (индексы отсчитываются от нуля) |
| :even | Выбирает все четные элементы (индексы отсчитываются от единицы) |
| :first | Выбирает первый из подходящих элементов |
| :gt(n) | Выбирает все элементы, индекс которых превышает n (индексы отсчитываются от нуля) |
| :has(селектор) | Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору |
| :last | Выбирает последний из подходящих элементов |
| :lt(n) | Выбирает все элементы, индекс которых меньше n (индексы отсчитываются от нуля) |
| :odd | Выбирает все нечетные элементы (индексы отсчитываются от единицы) |
| :text | Выбирает все текстовые элементы |
Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.
В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:
| Селектор | Описание | Соответствующий элемент html |
|---|---|---|
| :button | Выбирает все элементы типа button | <input type=»button» value=»Input Button»> |
| :checkbox | Выбирает все элементы типа checkbox | <input type=»checkbox»> |
| :file | Выбирает все элементы типа file | <input type=»file»> |
| :header | Выбирает все элементы заголовков | <h1>, <h2> и т.д. |
| :hidden | Выбирает все скрытые элементы | <input type=»hidden»> |
| :image | Выбирает все элементы input для изображений | <input type=»image»> |
| :input | Выбирает все элементы input | |
| :parent | Выбирает все элементы, являющиеся родительскими по отношению к другим элементам | |
| :password | Выбирает все элементы, являющиеся паролями | <input type=»password»> |
| :radio | Выбирает все элементы типа radio | <input type=»radio»> |
| :reset | Выбирает все элементы типа reset | <input type=»reset»> |
| :selected | Соответствует всем выбранным элементам |
<select>
<option>Option<option/>
</select>
|
| :submit | Выбирает все элементы типа submit | <input type=»submit»> |
| :visible | Выбирает все видимые элементы |
link jQuery Migrate Plugin
We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.
There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:
The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:
Ожидание готовности DOM-модели
Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:
В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.
Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.
Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:
Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:
Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.
Использование альтернативной нотации
При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:
Задержка срабатывания события ready
Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:
Первой инструкцией в этом сценарии является вызов метода holdReady(). В качестве аргумента ему передается значение true, указывающее на необходимость задержки срабатывания события ready. Далее мы определяем функцию, которая должна быть выполнена при срабатывании события ready (она содержит тот же набор инструкций, который использовался в предыдущей статье для изменения непрозрачности изображений, но оформленный в виде функции).
Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:
Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.
jQuery — Отмена стандартного поведения события
Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод объекта .
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс :
$('a.service').on('click',function(e){
//отменяем стандартное действие браузера
e.preventDefault();
// действия, которые будет выполнять ссылка
...
});
Что такое всплытие и как его остановить
Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
текущий элемент (цель) -> родительский элемент цели -> прародительский элемент -> ... -> document -> window
В jQuery бывают сценарии, когда в представленной цепочке у какого-нибудь элемента то же есть обработчик для этого события, который выполнять не нужно. И чтобы это событие не распространилось на этот элемент, его необходимо остановить. Для этого в обработчике нужного элемента необходимо вызвать метод объекта . После вызова этого метода событие остановится, и не будет всплывать.
Например, необходимо чтобы при поднесении курсора к элементу с классом , его содержимое становилось оранжевым цветом.
<div class="mark">Некоторый текст...<span class="mark">фрагмент...</span>...продолжение...</div>
...
<script>
$('.mark').on('hover',
function(e){
e.stopPropagation();
$(this).css('color',orange);
},
function(e){
e.stopPropagation();
$(this).css('color',black);
}
});
</script>
В данном случае если не указывать метод , то при поднесении курсора к элементу с классом данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в , но и всего абзаца.
Если вам необходимо отменить стандартное поведение браузера и остановить всплытие события, то в jQuery вместо вызова двух этих методов можно просто вернуть в качестве результата функции значение .
$('a').on('click', function(e){
//e.preventDefault();
//e.stopPropagation();
...
return false;
});
jQuery 3.0 ready() Changes
Before the release of version 3, there were several ways you could call the method:
- on the document element:
- on an empty element:
- or directly (i.e. not on a specific element):
All above named variants are functionally equivalent. The specified handler will be called when the DOM is fully loaded, no matter on which element it was called. In other words, calling it on an image element versus the document element doesn’t indicate that the callback is fired when the specified element is loaded. Instead, it will be called when the entire DOM is fully loaded.
In jQuery 3.0, all other syntax methods except are deprecated. The official justification is:
Функция $() библиотеки jQuery
Доступ к возможностям jQuery осуществляется с помощью функции библиотеки jQuery $(…), которую мы будем называть просто функцией $(). Эта функция служит точкой входа в волшебный мир jQuery, а символ $ является удобным коротким псевдонимом пространства имен jQuery. Следующие два примера аналогичны (выводят сообщение после загрузки страницы):
Библиотека jQuery — не единственная библиотека JavaScript, в которой используется переменная $, что может привести к конфликтам имен, если в одном документе используется одновременно несколько библиотек. Чтобы не допустить возникновения проблем такого рода, можно передать контроль над переменной $ другим библиотекам, вызвав метод jQuery.noConflict(), как показано ниже (пример из предыдущей статьи):
Вы даже можете сами определить псевдоним для функции jQuery(). Это делается путем присваивания выбранной вами переменной результата вызова метода noConflict():
В этом примере для функции jQuery() создается новый псевдоним jq, который можно использовать в последующих сценариях. Независимо от выбранного способа обращения к основной функции jQuery(), ей передается один и тот же набор аргументов. Возможные варианты вызова этой функции перечислены в таблице ниже:
| Вариант вызова | Описание |
|---|---|
| $(функция) | Позволяет указать функцию, которая должна быть выполнена по завершении построения DOM |
| $(селектор) $(селектор, контекст) | Осуществляет выбор группы элементов в документе с помощью селектора |
| $(HTMLElement) $(HTMLElement[]) | Создает объект jQuery из объекта или массива объектов HTMLElement |
| $() | Создает пустой набор элементов |
| $(HTML-код) | Создает новые элементы из фрагмента HTML-кода |
Добавление событий к динамически созданным объектам
Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции :
$(document).on(eventName, selector, handler); // document или любой другой существующий родительский элемент // eventName - имя события // selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события // handler - обработчик события
Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция может программно отобрать среди элементов (элемента, который вызвал это событие () и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.
Например, добавим событие к элементу, которого ещё нет на странице:
<button id="addButton" type="button">Добавить кнопку</button>
<script>
// при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку
$('#addButton').on('click', function(e) {
$('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>');
});
// добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице
$(document).on('click','.deleteMe', function() {
$(this).remove();
});
</script>
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
$(document).on('click','#comment a',function(e) {
if(!(location.hostname === this.hostname || !this.hostname.length)) {
e.preventDefault();
location.href='away?link='+encodeURIComponent($(this).attr('href'));
}
});
Дополнительная информация
В большинстве случаев такое событие как «click» происходит сравнительно нечасто, и не заставляет нас задумываться о производительности, так как в этом случае это не является серьезной проблемой. Однако, такие события как «mousemove», или «scroll», могут срабатывать десятки раз в секунду, в этих случаях производительность может значительно снижаться, что может стать для нас большой проблемой.
Производительность может быть увеличена за счет сокращения объема работы, выполняемой в самом обработчике события, кэширования данных, необходимых обработчику, а не постоянного их пересчета, в том числе за счет ограничения скорости количества фактических обновлений страницы с помощью метода setTimeout().
Такие события как «focus» и «blur» по спецификации W3C не всплывают, но в jQuery определены кроссбраузерные события «focusin» и «focusout», которые подлежат всплытию. Когда события «focus», или «blur» используются для присоединения делегированных обработчиков событий, jQuery отображает имена и передает их как «focusin» и «focusout» соответственно. Для обеспечения согласованности и ясности используйте имена типов событий «focusin» и «focusout».
Во всех браузерах события «load», «scroll» и «error» (например, в элементе <img>) не всплывают. В Internet Explorer 8 и ниже события «paste» и «reset» не всплывают. Такие события не поддерживаются для использования с делегированием, но их можно использовать, когда обработчик событий непосредственно присоединен к элементу, генерирующему это событие.
jQuery события
jQuery – События клавиатуры
При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
keydown -> keypress -> keyup
- (клавиша нажата, но ещё не отпущена);
- (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события и позволяют узнать только о коде клавиши, но не символа);
- (генерируется браузером при отпускании клавиши).
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
<input id="target" type="text" value="">
...
<script>
$('#target').on('keydown keypress keyup', function(e) {
console.log('Тип события: ' + e.type); // keydown, keypress, keyup
console.log('Код нажатой клавиши или символа: ' + e.which); // код символа позволяет получить только keypress
console.log('Нажата клавиша Alt: ' + e.altKey);
console.log('Нажата клавиша Ctrl: ' + e.ctrlKey);
console.log('Нажата клавиша Shift: ' + e.shiftKey);
console.log('Нажата клавиша Cmd (osMac): ' + e.metaKey);
});
</script>
Пример, в котором показано, как можно прослушать событие и узнать, нажато ли указанное сочетание клавиш:
$(document).keypress("c",
function(e) {
if(e.ctrlKey) {
console.log('Нажато сочетание клавиш Ctrl+c');
}
});
Пример, как можно прослушать сочетание клавиш Ctrl+Enter:
$(document).keydown(function(e) {
// с поддержкой macOS X
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
// ваши действия...
}
}
Пример, с использованием событий и :
<input id="name" type="text">
...
<script>
$('#name').
keydown(function(){
$(this).css('background-color', 'yellow');
}).
keyup(function(){
$(this).css('background-color, 'pink');
});
</script>
.ready( handler )Возвращает: jQuery
Описание: Устанавливает обработчик готовности дерева DOM.
-
handler
Тип: Function()
A function to execute after the DOM is ready.
The method offers a way to run JavaScript code as soon as the page’s Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins. When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added. As of jQuery 3.0, jQuery ensures that an exception occuring in one handler does not prevent subsequently added handlers from executing.
Most browsers in the form of a event. However, jQuery’s method differs in an important and useful way: If the DOM becomes ready and the browser fires before the code calls , the function will still be executed. In contrast, a event listener added after the event fires is never executed.
Browsers also provide the event on the object. When this event fires it indicates that all assets on the page have loaded, including images. This event can be watched in jQuery using . In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the event instead.
Note that although the DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a event listener in code executed during a handler. For example, scripts can be loaded dynamically long after the page has loaded using methods such as . Although handlers added by will always be executed in a dynamically loaded script, the ‘s event has already occurred and those listeners will never run.
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the method, which is inefficient and can lead to incorrect assumptions about the method’s behavior. For example, the third syntax works with which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.
There is also , deprecated as of jQuery 1.8 and removed in jQuery 3.0. Note that if the DOM becomes ready before this event is attached, the handler will not be executed.
The method is typically used with an anonymous function:
|
1 2 3 |
Which is equivalent to the recommended way of calling:
|
1 2 3 |
Aliasing the jQuery Object
When is used to avoid namespace conflicts, the shortcut is no longer available. However, the handler is passed a reference to the object that called the method. This allows the handler to use a jQuery object, for example as , without knowing its aliased name:
|
1 2 3 4 |
Обработка событий с помощью методов jQuery
Перед тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить. Узнать о том, как найти нужные элементы на странице можно в статье jQuery — Выбор элементов.
В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций и , а также кратких записей .
// функция on .on(events,handler); // функция one .one(events,handler); // events - событие или список событий через пробел, при наступлении которых необходимо выполнить обработчик (handler) // handler - функция (обработчик события) // краткая запись функции on .event(handler); // event - название события (можно использовать для обработки только тех событий, для которых в jQuery создана такая краткая запись)
Функция отличается от только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции событие для всех элементов с классом :
// использование в качестве обработчика анонимной функции
$('.btn').on('click', function() {
// действия, которые будут выполнены при наступлении события...
console.log($(this).text());
});
// использование обычной функции в качестве обработчика
var myFunction = function() {
console.log($(this).text());
}
$('.btn').on('click', myFunction);
Вышеприведённый код, записанный с использованием короткой записи функции :
$('.btn').click(function() {
// действия, которые будут выполнены при наступлении события...
console.log($(this).text());
});
Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта в обработчик события осуществляется всегда посредством первого аргумента.
$('#demo').on('click', function(e){
// e – объект Event, содержащий дополнительную информацию о произошедшем событии
// часто используемые свойства объекта Event
e.preventDefault(); //отменить выполнение действия по умолчанию
e.stopPropagation(); //остановить дальнейшее всплытие события
// e.type – получить тип события
// e.target – ссылка на элемент, на котором произошло событие
// e.currentTarget - ссылка на текущий элемент (для которого сработал обработчик). Это свойство, как правило, равно функции this.
// e.currentTarget === this
// e.which – код клавиши (для мыши), код кнопки или символа (для клавиатуры)
//e.pageX, e.pageY – координаты курсора, относительно левого верхнего угла документа
});
Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Например:
// событие click в пространстве имён first
$('#demo').on('click.first',function(){
console.log('1 обработчик события click');
});
// событие click в пространстве имён second
$('#demo').on('click.second',function(){
console.log('2 обработчик события click');
});
Пространство имён — это очень удобная вещь. Она используется, например, когда вам необходимо вызвать не все события, а только с определённым именем.
// вызвать событие click в пространстве имён first
$('#demo').trigger('click.first');
// вызвать событие click в пространстве имён second
$('#demo').trigger('click.second');
Также с его помощью очень просто удалять определённые события:
//удалить обработчики события click в пространстве имён first
$('#demo').off('click.first');
//удалить обработчики события click в пространстве имён second
$('#demo').off('click.second');
Описание и примеры использования функций и рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
При необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции ). Доступ к переданным данным внутри обработчика осуществляется через объект .
Осуществляется это так (пример):
<div id="content"></div>
<button id="showContent1">Показать контент 1</button>
<button id="showContent2">Показать контент 2</button>
...
<script>
$('#showContent1').on('click', {title:'Заголовок 1', content: 'Содержимое 1...'}, function(e){
var output = '<b>'+e.data.title+': </b>' + e.data.content;
$('#content').html(output);
});
$('#showContent2').on('click', {title:'Заголовок 2', content: 'Содержимое 2...'}, function(e){
var output = '<b>'+e.data.title+': </b>' + e.data.content;
$('#content').html(output);
});
</script>
Псевдонимы jQuery, пространство имен.
Как вы уже замечали у jQuery есть псевдоним (alias) знак доллара ($), т.е. обращение к $ аналогично обращению jQuery.
При использовании сторонних JavaScript библиотек необходимо вызвать $.noConflict(), что бы избежать трудностей с именованием. После вызова $.noConflict() ярлык $ более не доступен для использования и придется писать jQuery вместо $. Однако обработчики назначаемые с помощью jQuery.ready() могут принимать аргумент, через который передается глобальный объект jQuery. Это означает, что мы можем переименовывать объект в контексте метода jQuery.ready(), не затрагивая другой код:
jQuery(function($) {
// Здесь можно использовать псевдоним $, вместо jQuery
});
