Урок — jquery.ready()

Выбор элементов

Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

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

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

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

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

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

jQuery — Событие загрузки (load)

Событие браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: , , и .

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

$(window).on('load', function() {
  // действия после полной загрузки страницы...

});

Например, выведем сообщение в консоль, когда указанное изображение будет загружено:

<img id="image" src="image.png">
...
<script>
$('#image').on('load', function() {
  console.log('Изображение загружено');
});
</script>

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

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

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

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

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

Описание метода jQuery.ready().

В JavaScript существует событие load, которое выполняется после разбора HTML-документа, когда загружены все изображения. в большинстве случаев скрипты могут быть запущены, как только DOM-дерево полностью построено

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

В случае когда код зависит от загрузки дополнительных данных (например, нужны размеры изоюражения), то код следует помещать в обработчики события load.

Важно:

Как правило метод jQuery.ready() не совместим с атрибутом onload элемента <body>. Если необходимо использовать событие load или не используют jQuery.ready() или используют jQuery.load() для присоединения обработчиков для события load окна или или другого элемента (например изображения).

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

Проверка выборки

Мы можем определить, соответствует ли выборка определённому критерию, с помощью метода .is(). Этот метод наиболее часто используется, чтобы предоставить селектор в качестве единственного аргумента. Он возвращает true или false в зависимости от того, соответствует ли выборка селектору:

Вы также можете передать в метод .is() объект jQuery, исходный элемент DOM или даже функцию, если вам нужна комплексная проверка. Смотрите документацию для получения подробной информации.

Получение, установка и неявный перебор

Есть много методов, которые вы можете вызвать после создания выборки. Эти методы, как правило, делятся на две категории: метод чтения (геттер) и устанавливающий метод (сеттер). Методы чтения извлекают фрагмент информации из выборки, а методы установки в некотором роде изменяют выборку. Практически во всех случаях методы чтения оперируют только первым элементом в выборке (.text() является известным исключением); методы установки же работают для всех элементов в выборке используя то, что известно как неявный перебор.

Неявный перебор означает, что jQuery автоматически перебирает все элементы в выборке, когда вы вызываете для выборки устанавливающий метод. Это означает, что если вы хотите сделать что-то для всех элементов в выборке, то не должны вызывать метод для каждого элемента в вашей выборке — просто вызываете метод для самой выборки и jQuery обработает элементы для вас.

Предположим, что вы хотите изменить HTML у всех пунктов списка на странице. Чтобы сделать это мы должны использовать метод .html(), который изменит HTML у всех выбранных пунктов списка.

Вы также можете передать функцию в метод установки jQuery. Возвращаемое значение этой функции используется в качестве нового значения и оно получает два аргумента: индекс элемента в выборке и старое значение, которое вы пытаетесь изменить. Это полезно, когда вам необходима информация о текущем состоянии элемента, чтобы правильно установить новое состояние.

Явный перебор

Иногда задача, которую вы пытаетесь решить, не вписываются ни в один из существующих методов jQuery и тогда вы должны сделать явный перебор выборки с помощью метода .each(). В следующем коде в начало пункта списка мы добавляем тег <b> содержащий индекс элемента списка.

Заметьте, что внутри функции, которую мы передаём в .each(), у нас есть два способа доступа к текущему исходному элементу DOM: через this и через elem. Как обсуждалось в разделе «Основы JavaScript», this — специальное ключевое слово в JavaScript, указатель на объект, который является текущим контекстом функции. В jQuery this почти всегда относится к исходному элементу DOM, с которым функция в данный момент работает. Так, в случае .each(), this относится к текущему элементу в наборе элементов которые мы перебираем.

Цепочки

Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.

Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение

Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки

Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.

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

link Using jQuery with a CDN

CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe. This also offers an advantage that
if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it won’t have to be re-downloaded.

jQuery’s CDN provided by StackPath

The jQuery CDN supports Subresource Integrity (SRI) which allows the browser to verify that the files being delivered have not been modified. This specification is currently being implemented by browsers. Adding the new integrity attribute will ensure your application gains this security improvement as browsers support it.

To use the jQuery CDN, just reference the file in the script tag directly from the jQuery CDN domain. You can get the complete script tag, including Subresource Integrity attribute, by visiting https://code.jquery.com and clicking on the version of the file that you want to use. Copy and paste that tag into your HTML file.

Starting with jQuery 1.9, are available on the jQuery CDN. However, as of version 1.10.0/2.1.0 the compressed jQuery no longer includes the sourcemap comment in CDN copies because it requires the uncompressed file and sourcemap file to be placed at the same location as the compressed file. If you are maintaining local copies and can control the locations all three files, you can add the sourcemap comment to the compressed file for easier debugging.

To see all available files and versions, visit https://code.jquery.com

Other CDNs

The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host ; check the site’s documentation.

Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.

• CDNJS CDN
• jsDelivr CDN

Почему $, а не что-то ещё?

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

Конечно, если вы уже видели любой jQuery-код, то, вероятно, больше привыкли к чему-то вроде этого:

Как обсуждалось в разделе Основы JavaScript, корректные имена в JavaScript могут быть достаточно произвольны, если только они не начинаются с цифры и не включают в себя дефис. Таким образом, $ в коде просто более короткое и удобное имя для функции jQuery. На деле в конце исходного кода jQuery вы найдёте:

При вызове функции $() и передаче в неё селектора вы создаёте новый объект jQuery. Конечно, в JavaScript функции тоже объекты, это означает что у $ (и jQuery, естественно) также есть свойства и методы. Например, вы можете обратиться к свойству $.support за информацией о том, что поддерживает текущий браузер, а с помощью метода $.ajax сделать запрос через AJAX.

Далее в руководстве мы будем использовать $ вместо jQuery для краткости

Обратите внимание, что если ваша страница содержит более одной библиотеки JavaScript, то $ может применяться другой библиотекой и это может привести к тому, что jQuery перестанет работать. Если вы столкнулись с подобным, то должны рассмотреть использование jQuery.noConflict перед загрузкой других библиотек

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

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

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

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 Core — All 2.x Versions

• jQuery Core 2.2.4 — uncompressed, minified
• jQuery Core 2.2.3 — uncompressed, minified
• jQuery Core 2.2.2 — uncompressed, minified
• jQuery Core 2.2.1 — uncompressed, minified
• jQuery Core 2.2.0 — uncompressed, minified
• jQuery Core 2.1.4 — uncompressed, minified
• jQuery Core 2.1.3 — uncompressed, minified
• jQuery Core 2.1.2 — uncompressed, minified
• jQuery Core 2.1.1 — uncompressed, minified
• jQuery Core 2.1.0 — uncompressed, minified
• jQuery Core 2.0.3 — uncompressed, minified
• jQuery Core 2.0.2 — uncompressed, minified
• jQuery Core 2.0.1 — uncompressed, minified
• jQuery Core 2.0.0 — uncompressed, minified

Получаем некоторые элементы

Самое простое, что мы можем делать с jQuery — это получить некоторые элементы и что-то ними выполнить. Если вы знакомы с селекторами CSS, получить произвольные элементы очень легко: вы просто передаёте соответствующий селектор в $().

Важно понимать, что любая сделанная выборка будет содержать только те элементы, которые существовали на странице на момент выбора. Иными словами, если вы пишете var anchors = $( ‘a’ ), а затем позже добавите ещё один элемент на свою страницу, то переменная anchors не будет содержать этот новый элемент

Моя выборка содержит что-нибудь?

Иногда вам требуется что-то сделать, только когда вашему выбору соответствует несколько элементов. Поскольку функция $() всегда возвращает объект jQuery и он всегда истинный, вы должны проверить содержимое вашей выборки, чтобы определить, было ли что-то найдено.

Внимание! Ошибочный код

Мы можем сократить проверку ещё больше, если вспомним, что 0 это ложное значение:

Получение отдельных элементов из выборки

Если вам нужно работать с исходным элементом DOM из выборки, то следует получить доступ к элементу из объекта jQuery. Например, если вы хотите напрямую получить доступ к свойству value элемента <input>, то должны работать с исходным элементом DOM.

Заметьте, что вы не можете вызвать методы jQuery для исходных элементов DOM. Поэтому следующий пример работать не будет:

Если вам требуется работать с одним элементом в выборке и вы хотите использовать методы jQuery для этого элемента, то можете получить новый объект jQuery, содержащий единственный элемент, через .eq(), передавая ему индекс элемента.