.ready()

jQuery Core — All 3.x Versions

  • 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

Commonly Used jQuery Event Methods

$(document).ready()


The method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.

click()

The method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a element; hide the current element:

$(«p»).click(function(){   $(this).hide(); });

dblclick()

The method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element:

$(«p»).dblclick(function(){   $(this).hide(); });

mouseenter()

The method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element:

$(«#p1»).mouseenter(function(){   alert(«You entered p1!»); });

mouseleave()

The method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element:

$(«#p1»).mouseleave(function(){   alert(«Bye! You now leave p1!»); });

mousedown()

The method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:

$(«#p1»).mousedown(function(){   alert(«Mouse down over p1!»); });

mouseup()

The method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:

$(«#p1»).mouseup(function(){   alert(«Mouse up over p1!»); });

hover()

The method takes two functions and is a combination of the and methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

$(«#p1»).hover(function(){   alert(«You entered p1!»); }, function(){   alert(«Bye! You now leave p1!»); });

focus()

The method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus:

$(«input»).focus(function(){   $(this).css(«background-color», «#cccccc»); });

blur()

The method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

Квадратные скобки

Для свойств, имена которых состоят из нескольких слов, доступ к значению «через точку» не работает:

JavaScript видит, что мы обращаемся к свойству , а затем идёт непонятное слово . В итоге синтаксическая ошибка.

Точка требует, чтобы ключ был именован по правилам именования переменных. То есть не имел пробелов, не начинался с цифры и не содержал специальные символы, кроме и .

Для таких случаев существует альтернативный способ доступа к свойствам через квадратные скобки. Такой способ сработает с любым именем свойства:

Сейчас всё в порядке.

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

Например, имя свойства может храниться в переменной:

Квадратные скобки также позволяют обратиться к свойству, имя которого может быть результатом выражения. Например, имя свойства может храниться в переменной:

Здесь переменная может быть вычислена во время выполнения кода или зависеть от пользовательского ввода. После этого мы используем её для доступа к свойству. Это даёт нам большую гибкость.

Пример:


Запись «через точку» такого не позволяет:

Мы можем использовать квадратные скобки в литеральной нотации для создания вычисляемого свойства.

Пример:

Смысл вычисляемого свойства прост: запись означает, что имя свойства необходимо взять из переменной .

И если посетитель введёт слово , то в объекте теперь будет лежать свойство .

По сути, пример выше работает так же, как и следующий пример:

…Но первый пример выглядит лаконичнее.

Мы можем использовать и более сложные выражения в квадратных скобках:

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

Подведём итог: в большинстве случаев, когда имена свойств известны и просты, используется запись через точку. Если же нам нужно что-то более сложное, то мы используем квадратные скобки.

Page events transition order

First all events can be found here: http://api.jquerymobile.com/category/events/

Lets say we have a page A and a page B, this is a unload/load order:

  1. page B — event pagebeforecreate

  2. page B — event pagecreate

  3. page B — event pageinit

  4. page A — event pagebeforehide

  5. page A — event pageremove

  6. page A — event pagehide

  7. page B — event pagebeforeshow

  8. page B — event pageshow

For better page events understanding read this:

  • , and are fired when an external page is loaded
  • , and are page change events. These events are fired when a user is navigating between pages in the applications.
  • , , and are page transition events. These events are fired before, during and after a transition and are named.
  • , and are for page initialization.
  • can be fired and then handled when a page is removed from the DOM

Page loading jsFiddle example: http://jsfiddle.net/Gajotres/QGnft/

readyState

В заключение занятия отметим свойство

document.readyState

которое в момент загрузки HTML-документа принимает следующие значения:

  • «loading» – документ в процессе загрузки;

  • «interactive» – документ был полностью прочитан (парсинг документа завершен);

  • «complete» – документ был полностью прочитан и все ресурсы (изображения, стили и т.п.) тоже загружены.

В ряде случаев это свойство бывает весьма полезно. Например, мы вызываем функцию, но не уверены, что DOM-дерево полностью построено. Поэтому, делаем такую проверку:

removeImage();
function removeImage() {
     if(document.readyState == "loading") {
          console.log("документ грузится, вешаем обработчик");
          document.addEventListener("DOMContentLoaded", removeImage);
     }
     else {
          console.log("удаляем изображение");
          document.body.remove(image);
     }
}

По аналогии могут быть обработаны и остальные свойства.

Для полноты картины пару слов о событии readystatechange, которое появилось до событий

DOMContentLoaded, load, unload, beforeunload

и в старых версиях JavaScript процесс загрузки документа контролировался через него. Например, так:

document.addEventListener('readystatechange', function() {
         console.log(document.readyState);
});

Теперь при обновлении страницы мы можем увидеть изменение состояний свойства document.readyState в процессе загрузки. Однако такой механизм отслеживания ушел в прошлое и сейчас уже нет смысла о нем подробно говорить.

Итак, на этом занятии мы с вами рассмотрели события

DOMContentLoaded, load, unload, beforeunload

и поговорили о свойстве

document.readyState

которое дополняет работу с этими событиями.

Видео по теме

JavaScipt (DOM) #1: объектная модель документа DOM и BOM

JavaScipt (DOM) #2: навигация по DOM — parentNode, nextSibling, previousSibling, chidNodes

JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById

JavaScipt (DOM) #4: свойства DOM-узлов: nodeName, innerHTML, outerHTML, data, textContent, hidden

JavaScipt (DOM) #5: работа с нестандартными свойствами DOM-элементов: getAttribute, setAttribute, dataset

JavaScipt (DOM) #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML

JavaScipt (DOM) #7: управление стилями — className, style, classList, getComputedStyle

JavaScipt (DOM) #8: метрики — clientWidth, scrollTop, scrollHeight, offsetLeft, offsetTop, clientLeft


JavaScipt (DOM) #9: HTML-документ: размеры (clientWidth, innerWidth), положение (pageYOffset, scrollBy)

JavaScipt (DOM) #10: расположение элементов — fixed, absolute, getBoundingClientRect, elementFromPoint

JavaScipt (DOM) #11: обработчики событий: onclick, addEventListener, removeEventListener, event

JavaScipt (DOM) #12: погружение и всплытие событий: stopPropagation, stopImmediatePropagation, eventPhase

JavaScipt (DOM) #13: делегирование событий, отмена действия браузера по умолчанию — preventDefault

JavaScipt (DOM) #14: события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

JavaScipt (DOM) #15: события клавиатуры keydown, keyup, событие скроллинга scroll

JavaScipt (DOM) #16: навигация и обработка элементов форм (form) — document.forms, form.elements

JavaScipt (DOM) #17: фокусировка — focus, blur, focusin, focusout, tabindex, activeElement

JavaScipt (DOM) #18: события change, input, cut, copy, paste, submit элементов input и select

JavaScipt (DOM) #19: события при загрузке — DOMContentLoaded, load, unload, beforeunload, readyState

JavaScipt (DOM) #20: события load, error; атрибуты async, defer тега script

JavaScipt (DOM) #21: пример предзагрузки изображений с помощью javascript

JavaScipt (DOM) #22: пример создания начала игры арканоид

.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

9 – $(‘.box’).css(‘color’, ‘red’);

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

Модерн

[].forEach.call( document.querySelectorAll('.box'), function(el) {
  el.style.color = 'red'; // или добавляем класс
});

Снова мы используем технику для фильтрации всех элементов с классом  и придания им красного цвета с помощью объекта .

Наследие

var box = document.getElementsByClassName('box'), // смотрите пример 10 ниже для кросс-браузерного решения
   i = box.length;
  
while ( i-- > 0 && (box.style.color = 'red') );

Мы используем трюк с циклом  . По существу, мы имитируем:

var i = 0, len;
 
for ( len = box.length; i < len; i++ ) {
   box.style.color = 'red';
}

Хотя нужно выполнить одно действие, мы можем сэкономить пару строк

Обратите внимание, что легкость чтения кода важнее сохранения пары строк кода

Page Change Times

As mentioned, when you change from one jQuery Mobile page to another, typically either through clicking on a link to another jQuery Mobile page that already exists in the DOM, or by manually calling $.mobile.changePage, several events and subsequent actions occur. At a high level the following actions occur:

  • A page change process is begun
  • A new page is loaded
  • The content for that page is “enhanced” (styled)
  • A transition (slide/pop/etc) from the existing page to the new page occurs

This is a average page transition benchmark:

Page load and processing: 3 ms

Page enhance: 45 ms

Transition: 604 ms


Total time: 670 ms

*These values are in milliseconds.

So as you can see a transition event is eating almost 90% of execution time.

Копирование по ссылке

Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению».

Например:

В результате мы имеем две независимые переменные, каждая из которых хранит строку .

Объекты ведут себя иначе.

Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него.

Проиллюстрируем это:

Сам объект хранится где-то в памяти. А в переменной лежит «ссылка» на эту область памяти.

Когда переменная объекта копируется – копируется ссылка, сам же объект не дублируется.

Если мы представляем объект как ящик, то переменная – это ключ к нему. Копирование переменной дублирует ключ, но не сам ящик.

Например:

Теперь у нас есть две переменные, каждая из которых содержит ссылку на один и тот же объект:

Мы можем использовать любую из переменных для доступа к ящику и изменения его содержимого:

Приведённый выше пример демонстрирует, что объект только один. Как если бы у нас был один ящик с двумя ключами и мы использовали один из них (), чтобы войти в него и что-то изменить, а затем, открыв ящик другим ключом (), мы бы увидели эти изменения.

Операторы равенства и строгого равенства для объектов работают одинаково.

Два объекта равны только в том случае, если это один и тот же объект.

Например, две переменные ссылаются на один и тот же объект, они равны:

В примере ниже два разных объекта не равны, хотя и оба пусты:

Для сравнений типа или для сравнения с примитивом объекты преобразуются в примитивы.

Мы скоро изучим, как работают такие преобразования объектов, но, по правде говоря, сравнения такого рода необходимы очень редко и обычно являются результатом ошибки программиста.

Объект, объявленный через , может быть изменён.

Пример:

Может показаться, что строка должна вызвать ошибку, но нет, здесь всё в порядке. Дело в том, что объявление защищает от изменений только само значение . А в нашем случае значение – это ссылка на объект, и это значение мы не меняем. В строке мы действуем внутри объекта, мы не переназначаем .

Если же мы попытаемся присвоить другое значение, то выдаст ошибку:

…Но что делать, если мы хотим сделать константами свойства объекта? Как сделать так, чтобы попытка изменить выдавала ошибку? Это тоже возможно. Мы рассмотрим эту тему в главе Флаги и дескрипторы свойств.

Значения параметров

Параметр Описание
url Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
data Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом.
complete Функция обратного вызова, которая выполняется после завершения AJAX запроса. Функция выполняется после пост-обработки и вставки HTML содержимого, она вызывается один раз для каждого элемента в коллекции jQuery. Внутри функции this ссылается на текущий DOM элемент. Функция принимает следующие параметры:
  • responseText — строка соответствующая данным, присланным от сервера.
  • textStatus — строка соответствующая статусу запроса («success«, «notmodified«, «nocontent«, «error«, «timeout«, «abort«, или «parsererror«).
  • jqXHR — содержит объект XMLHTTPRequest.

6 — $(‘#list’).next();

Метод jQuery возвращает элемент, который следует непосредственно за текущим элементом наборе.

Модерн

var next = document.querySelector('#list').nextElementSibling; // IE9

ссылается на следующий узел за элементом. К сожалению, Internet Explorer 8 и старше не поддерживают его.

Наследие

var list = document.getElementById('list'),
   next = list.nextSibling;
 
// Нам нужен следующий элемент, а не текст.
while ( next.nodeType > 1 ) next = next.nextSibling;

Есть пара способов для реализации задачи. В данном примере мы определяем тип узла , который следует на определенным элементом. Это может быть текст, элемент или, даже, комментарий. Так как нам нужен именно следующий элемент, то мы ищем равный . Если возвращает номер больше, чем , то мы пропускаем узел, так как он, вероятно, является текстом.

Don’t Use .live() / .bind() / .delegate()

I forgot to mention (and tnx andleer for reminding me) use on/off for event binding/unbinding, live/die and bind/unbind are deprecated.

The .live() method of jQuery was seen as a godsend when it was introduced to the API in version 1.3. In a typical jQuery app there can be a lot of DOM manipulation and it can become very tedious to hook and unhook as elements come and go. The method made it possible to hook an event for the life of the app based on its selector. Great right? Wrong, the method is extremely slow. The method actually hooks its events to the document object, which means that the event must bubble up from the element that generated the event until it reaches the document. This can be amazingly time consuming.

It is now deprecated. The folks on the jQuery team no longer recommend its use and neither do I. Even though it can be tedious to hook and unhook events, your code will be much faster without the method than with it.

Instead of you should use . is about 2-3x faster than .live(). Take a look at this event binding benchmark: http://jsperf.com/jquery-live-vs-delegate-vs-on/34, everything will be clear from there.


С этим читают