Работа с dom-объектами

jQuery Core — All 1.x Versions

• jQuery Core 1.12.4 — uncompressed, minified
• jQuery Core 1.12.3 — uncompressed, minified
• jQuery Core 1.12.2 — uncompressed, minified
• jQuery Core 1.12.1 — uncompressed, minified
• jQuery Core 1.12.0 — uncompressed, minified
• jQuery Core 1.11.3 — uncompressed, minified
• jQuery Core 1.11.2 — uncompressed, minified
• jQuery Core 1.11.1 — uncompressed, minified
• jQuery Core 1.11.0 — uncompressed, minified
• jQuery Core 1.10.2 — uncompressed, minified
• jQuery Core 1.10.1 — uncompressed, minified
• jQuery Core 1.10.0 — uncompressed, minified
• jQuery Core 1.9.1 — uncompressed, minified
• jQuery Core 1.9.0 — uncompressed, minified
• jQuery Core 1.8.3 — uncompressed, minified
• jQuery Core 1.8.2 — uncompressed, minified
• jQuery Core 1.8.1 — uncompressed, minified
• jQuery Core 1.8.0 — uncompressed, minified
• jQuery Core 1.7.2 — uncompressed, minified
• jQuery Core 1.7.1 — uncompressed, minified
• jQuery Core 1.7.0 — uncompressed, minified
• jQuery Core 1.7.0 — uncompressed, minified
• jQuery Core 1.6.4 — uncompressed, minified
• jQuery Core 1.6.3 — uncompressed, minified
• jQuery Core 1.6.2 — uncompressed, minified
• jQuery Core 1.6.1 — uncompressed, minified
• jQuery Core 1.6.0 — uncompressed, minified
• jQuery Core 1.5.2 — uncompressed, minified
• jQuery Core 1.5.1 — uncompressed, minified
• jQuery Core 1.5.0 — uncompressed, minified
• jQuery Core 1.4.4 — uncompressed, minified
• jQuery Core 1.4.3 — uncompressed, minified
• jQuery Core 1.4.2 — uncompressed, minified
• jQuery Core 1.4.1 — uncompressed, minified
• jQuery Core 1.4.0 — uncompressed, minified
• jQuery Core 1.3.2 — uncompressed, minified, packed
• jQuery Core 1.3.1 — uncompressed, minified, packed
• jQuery Core 1.3.0 — uncompressed, minified, packed
• jQuery Core 1.2.6 — uncompressed, minified, packed
• jQuery Core 1.2.5 — uncompressed, minified, packed
• jQuery Core 1.2.4 — uncompressed, minified, packed
• jQuery Core 1.2.3 — uncompressed, minified, packed
• jQuery Core 1.2.2 — uncompressed, minified, packed
• jQuery Core 1.2.1 — uncompressed, minified, packed
• jQuery Core 1.2.0 — uncompressed, minified, packed
• jQuery Core 1.1.4 — uncompressed, packed
• jQuery Core 1.1.3 — uncompressed, packed
• jQuery Core 1.1.2 — uncompressed, packed
• jQuery Core 1.1.1 — uncompressed, packed
• jQuery Core 1.1.0 — uncompressed, packed
• jQuery Core 1.0.4 — uncompressed, packed
• jQuery Core 1.0.3 — uncompressed, packed
• jQuery Core 1.0.2 — uncompressed, packed
• jQuery Core 1.0.1 — uncompressed, packed
• jQuery Core 1.0.0 — uncompressed, packed

Дополнительная информация

В большинстве случаев такое событие как «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 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

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.

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:

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>

jQuery Core — All 3.x Versions

• jQuery Core 3.6.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.5.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.5.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.0.0 — uncompressed, minified, slim, slim minified

Ожидание готовности 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.

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!

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:

.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:

Which is equivalent to the recommended way of calling:

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:

link Downloading jQuery using Bower

jQuery is also registered as a package with Bower. You can install the latest version of jQuery with the command:

This will install jQuery to Bower’s install directory, the default being . Within you will find an uncompressed release, a compressed release, and a map file.

The jQuery Bower package contains additional files besides the default distribution. In most cases you can ignore these files, however if you wish to download the default release on its own you can use Bower to install jQuery from one of the above urls instead of the registered package. For example, if you wish to install just the compressed jQuery file, you can install just that file with the following command:

Обработка событий с помощью методов 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>

link Downloading jQuery

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.
You can also download a sourcemap file for use when debugging with a compressed file.
The map file is not required for users to run jQuery, it just improves the developer’s debugger experience.
As of jQuery 1.11.0/2.1.0 the comment is not included in the compressed file.

To locally download these files, right-click the link and select «Save as…» from the menu.

jQuery

For help when upgrading jQuery, please see the upgrade guide most relevant to your version.
We also recommend using the jQuery Migrate plugin.

You can also use the slim build, which excludes the ajax and effects modules:

Псевдонимы jQuery, пространство имен.

Как вы уже замечали у jQuery есть псевдоним (alias) знак доллара ($), т.е. обращение к $ аналогично обращению jQuery.

При использовании сторонних JavaScript библиотек необходимо вызвать $.noConflict(), что бы избежать трудностей с именованием. После вызова $.noConflict() ярлык $ более не доступен для использования и придется писать jQuery вместо $. Однако обработчики назначаемые с помощью jQuery.ready() могут принимать аргумент, через который передается глобальный объект jQuery. Это означает, что мы можем переименовывать объект в контексте метода jQuery.ready(), не затрагивая другой код:

jQuery(function($) {
	// Здесь можно использовать псевдоним $, вместо jQuery
});

Сужение области поиска с помощью контекста

По умолчанию jQuery осуществляет поиск элементов в пределах всего DOM-дерева. Область поиска можно сузить, предоставив функции $() дополнительный аргумент. Это позволяет ограничить поиск определенным контекстом, который используется в качестве отправной точки при нахождении подходящих элементов. Соответствующий пример приведен ниже:

В этом примере одно множество элементов, выбранных селектором jQuery, используется в качестве контекста для выбора другого множества. Сначала определяется контекст, которому соответствуют все элементы, имеющие класс drow. После этого набор выбранных элементов передается селектору img:odd в качестве контекста.

Если вы предоставляете контекст, содержащий несколько элементов, то каждый из них используется в качестве отправной точки для поиска. При этом следует учитывать одну тонкость: сначала выбирается совокупность элементов, соответствующих контексту, а уже после этого из них выбираются элементы с помощью основного селектора. В отношении нашего примера это означает, что селектор img:odd применяется ко множеству элементов, отобранных с помощью селектора drow, откуда следует, что этот набор нечетных элементов не будет совпадать с тем их набором, который был бы найден при выполнении поиска по всему документу.

Конечный результат состоит в том, что эффект изменения непрозрачности применяется к нечетным элементам img в каждом элементе div, принадлежащем классу drow. Этим условиям соответствуют изображения нарцисса и примулы. Если опустить контекст, то эффект будет применен к изображениям нарцисса, пиона и подснежника.

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 — Отмена стандартного поведения события

Некоторые элементы в 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 — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы <img>).

В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.

В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

<select>
    <option>Option<option/>
</select>

link About the Code

jQuery is provided under the MIT license.

The code is hosted and developed in the jQuery GitHub repository. If you’ve spotted some areas of code that could be improved, please feel free to discuss it on the Developing jQuery Core Forum. If you’d like to participate in developing jQuery, peruse our contributor site for more information.

To find and download plugins developed by jQuery contributors, please visit the Plugins site. Plugin authors are responsible for maintenance of their plugins. Feedback on plugins should be directed to the plugin author, not the jQuery team.

Build from Git

Note: To just use the latest work-in-progress version of jQuery, please try the jQuery Pre-Release Build described above.

All source code is kept under Git revision control, which you can browse online. The repository’s README has more information on building and testing your own jQuery, as well as instructions on creating a custom build that excludes some APIs to reduce file size.

If you have access to Git, you can connect to the repository here:

You can also check out and build a specific version of jQuery from GitHub:

The README file for a specific version will have instructions for building that version, as the process has changed over time.

Добавление событий к динамически созданным объектам

Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции :

$(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'));
  }
});