.bind() - установка обработчика событий

Описание

Метод создаёт новую «привязанную функцию» (ПФ). ПФ — это «необычный функциональный объект» ( термин из ECMAScript 6 ), который является обёрткой над исходным функциональным объектом. Вызов ПФ приводит к исполнению кода обёрнутой функции.

ПФ имеет следующие внутренние ( скрытые ) свойства:

`BoundTargetFunction` — оборачиваемый (целевой ) функциональный объект
`BoundThis` — значение, которое всегда передаётся в качестве значения this при вызове обёрнутой функции.
`BoundArguments` — список значений, элементы которого используются в качестве первого аргумента при вызове оборачиваемой функции.
] — внутренний метод. Выполняет код (функциональное выражение), связанный с функциональным объектом.

Когда ПФ вызывается, исполняется её внутренний метод `Call` со следующими аргументами Call(target, boundThis, args).

target — `BoundTargetFunction`;
boundThis — `BoundThis`;
args — `BoundArguments`.

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

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции $.ajax()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $.ajax({
	      method: "POST", // метод HTTP, используемый для запроса
	      url: "about.php", // строка, содержащая URL адрес, на который отправляется запрос
	      data: { // данные, которые будут отправлены на сервер
	        name: "Denis",
	        city: "Erebor"
	      },
	      success: function ( msg ) { // функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно (если несколько функций, то необходимо помещать их в массив)
	        $( "p" ).text( "User saved: " + msg ); // добавляем текстовую информацию и данные возвращенные с сервера
	      },
	      function () { // вызов второй функции из массива
	        console.log( "next function" );
	      }],
	      statusCode: {
	        200: function () { // выполнить функцию если код ответа HTTP 200
	          console.log( "Ok" );
	        }
	      }
	    })
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p></p>
	</body>
</html>

В этом примере с использованием jQuery функции $.ajax() мы при нажатии на элемент <button> (кнопка) выполняем асинхронный AJAX запрос со следующими параметрами:

method — указываем метод HTTP POST, используемый для запроса.

url — файл, к которому мы обращаемся («about.php»), он содержит следующий PHP код:

<?php $name = $_POST; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом name)
$city = $_POST; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом city)
echo $name.», «.$city; // выводим текстовое содержимое (значение выше созданных переменных, перечисленных через запятую)
?>

data — данные, которые будут отправлены на сервер.

success — функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно

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

statusCode — объект числовых кодов HTTP и функции, которые будут вызываться, когда код ответа сервера имеет соотвествующее значение (определенный код HTTP)

В нашем случае код 200.

Результат нашего примера:

Пример использования jQuery функции .ajax()

В следующем примере мы выполним AJAX запрос с помощью которого загрузим и выполним файл JavaScript.

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции $.ajax()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $.ajax({
	      method: "GET", // метод HTTP, используемый для запроса
	      url: "ajax_script.js", // строка, содержащая URL адрес, на который отправляется запрос
	      dataType: "script" // расценивает ответ как JavaScript и возвращает его как обычный текст
	    })
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p></p>
	</body>
</html>

В этом примере с использованием jQuery функции $.ajax() мы при нажатии на элемент <button> (кнопка) выполняем асинхронный AJAX запрос, который загружает скрипт JavaScript и выполняет его. Запрос имеет следующие параметры:

method — указываем метод HTTP GET, используемый для запроса.
url — файл, к которому мы обращаемся («ajax_script.js»), он содержит следующий JavaScript код:
```
$( "p" ).text( "Hello" ); // находим элемент <p> и добавляем текстовое содержимое
```
dataType — определяет тип данных, который вы ожидаете получить от сервера (скрипт будет выполнен даже если не указать этот параметр).

Результат нашего примера:

Пример использования jQuery функции .ajax()jQuery AJAX

innerHTML и outerHTML

предназначен для установки или получения HTML разметки элемента.

Синтаксис:

// получим HTML содержимое $elem
const html = $elem.innerHTML;
// установим $elem новый HTML
$elem.innerHTML = '<div>...<div>';

Например, установим элементу новое HTML содержимое:

// получим HTML элемент ul по его id
const $elem = document.querySelector('#list');
// установим $elem новый HTML
$elem.innerHTML = `<li>HTML</li><li>CSS</li><li>JavaScript</li>`;

Пример, в котором получим HTML разметку некоторого элемента:

<div class="message">Я люблю <strong>JavaScript</strong>! Он позволяет <span>сделать что угодно со страницей</span>.</div>

<script>
// получим HTML элемент .message
const $elem = document.querySelector('.message');
// получим HTML код $elem
const html = $elem.innerHTML;
</script>

Задание HTML содержимого элементу с помощью всегда сопровождается удалением его контента и установкой ему новой HTML разметки, но основе указанной строки, которая была разобрана внутренним парсером браузера как HTML.

Начинающие веб-разработчики при написании такого кода полагают что он добавит только указанную HTML разметку в конец содержимого :

$someElem.innerHTML += '<div>...</div>';

Но на самом деле это не так. Этот код выполняет следующее:

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

Эквивалентная запись кода, приведённого выше:

let html = $someElem.innerHTML;
html = html + '<div>...</div>';
$someElem.innerHTML = html;

Таким образом, используя такую запись мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».

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

Пример использования для очистки содержимого элемента:

$elem.innerHTML = '';

Например, получить и изменить HTML контент элемента с :

var myP = document.getElementById("myP");
//получить HTML содержимое элемента, имеющего id="myP"
myP.innerHTML;
//изменить HTML содержимое элемента, имеющего id="myP"
myP.innerHTML = "<em>Что-то новое</em>";

Например, удалить HTML контент элемента , имеющего :

document.getElementById("demo").innerHTML = "";

outerHTML

Свойство устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.

Например, получить и изменить HTML контент списка , имеющего :

var myList = document.getElementById("myList");
//получить HTML список
myList.outerHTML;
//заменить HTML список на новый
myList.outerHTML = "<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>";

Передача данных

Необязательный параметр eventData используется редко. Данный параметр, позволяет нам передавать в обработчик дополнительную информацию. К примеру, представьте, что у нас есть два обработчика, которые ссылаются на одну и ту же внешнюю переменную:

var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
 alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
 alert( message );
});

В обоих случая мы увидим сообщение “Not in the face!”, даже если в нашем случае значение переменной меняется. Для того, чтобы логика не была нарушена, передаём eventData:

var message = "Spoon!";
$( "#foo" ).bind( "click", {
 msg: message
}, function( event ) {
 alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
 msg: message
}, function( event ) {
 alert( event.data.msg );
});

В этом случае, мы передаём сообщение в каждый из обработчиков. В результате, в первом обработчике выведется сообщение “Spoon!”, а во втором “Not in the face!”.

Поиск по индексированному полю

Для поиска по другим полям объекта нам нужно создать дополнительную структуру данных, называемую «индекс» (index).

Индекс является «расширением» к хранилищу, которое отслеживает данное поле объекта. Для каждого значения этого поля хранится список ключей для объектов, которые имеют это значение. Ниже будет более подробная картина.

Синтаксис:

– название индекса,
– путь к полю объекта, которое индекс должен отслеживать (мы собираемся сделать поиск по этому полю),
– необязательный объект со свойствами:
- – если true, тогда в хранилище может быть только один объект с заданным значением в . Если мы попытаемся добавить дубликат, то индекс сгенерирует ошибку.
- – используется только, если является массивом. В этом случае, по умолчанию, индекс обрабатывает весь массив как ключ. Но если мы укажем true в , тогда индекс будет хранить список объектов хранилища для каждого значения в этом массиве. Таким образом, элементы массива становятся ключами индекса.

В нашем примере мы храним книги с ключом .

Допустим, мы хотим сделать поиск по полю .

Сначала нам нужно создать индекс. Индексы должны создаваться в , как и хранилище объектов:

Индекс будет отслеживать поле .
Поле price не уникальное, у нас может быть несколько книг с одинаковой ценой, поэтому мы не устанавливаем опцию .
Поле price не является массивом, поэтому флаг не применим.

Представим, что в нашем есть 4 книги. Вот картинка, которая показывает, что такое «индекс».

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

Индексы автоматически обновляются, нам не нужно об этом заботиться.

Мы также можем использовать , чтобы создать диапазон и найти дешёвые/дорогие книги:

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

Дополнительные примечания

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

События и , по стандарту W3C, не являются всплывающими, но jQuery определяет кросс-браузерные всплывающие события и . Когда используются и , для назначения делегированных обработчиков событий, jQuery изменяет их имена и передает как и соответственно. Для согласованности и прозрачности, используйте всплывающие типы событий.

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

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

Получение значения элемента формы

В jQuery чтение значений элементов , и осуществляется посредством метода .

Например, получим значение элемента :

<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>

Метод , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
  // получим значение первого элемента в коллекции
  var valColor = $('input').val();
  console.log(valColor); // white
  // получим значение выбранной (checked) радиокнопки
  var valCheckedColor = $( "input:checked" ).val();
  console.log(valCheckedColor); // green
</script>

Для получения значения выбранного элемента (, , или кнопок) используйте .

// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input:checked').val();
// получить значение установленной радиокнопки
$('input:checked').val();

Если коллекции нет элементов, то метод возвращает значение .

Например, получим значение элемента , имеющего имя :

var valDescription =  $('textarea').val();
if (valDescription !== undefined) {
  console.log('Значение элемента textarea: ' + valDescription);
} else {
  console.log('Элемент textarea с именем description на странице не найден!');
}

Получим значение элемента :

<select id="volume">
  <option>16Gb</option>
  <option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
  var volume = $(this).val();
  console.log(volume);  
});
</script>

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

<select id="brands" multiple="multiple">
  <option selected="selected">Acer</option>
  <option>Samsung</option>
  <option selected="selected">Asus</option>
</select>

<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>

Как проверить подключён ли jQuery

Проверить подключён ли jQuery к странице можно так:

if (window.jQuery) {
  // jQuery подключен к странице
}

Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:

if (window.jQuery) {
  // jQuery подключен к странице
} else {
  // jQuery не подключен к странице
}

Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:

if (!window.jQuery) {
  document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>')
}

if (window.jQuery) {
  var verJquery = jQuery.fn.jquery;
  // выведем версию jQuery в консоль
  console.log(verJquery);
}

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery функции $.post()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "form" ).submit(function(){
	    var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки

	    $.post( "user.php", formData, function( data ) { //  передаем и загружаем данные с сервера с помощью HTTP запроса методом POST
	      $( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<form method = "post">
			<input type = "text" placeholder = "Имя" name = "firstName" required> <!-- поле обязательно к заполнению -->
			<input type = "text" placeholder = "Фамилия" name = "lastName" required> <!-- поле обязательно к заполнению -->
			<input type = "submit" value = "Добавить">
		</form>
		<div></div>
	</body>
</html>

В этом примере мы привязываем JavaScript обработчик событий «submit» (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки — результат выполнения метода .serialize().
После этого с использованием jQuery функции $.post() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («user.php»), он содержит следующий PHP код:

<?php $firstName = $_POST; // создаем переменную firstName, которая содержит переданные скрипту через HTTP метод POST данные (с ключом firstName)
$lastName = $_POST; // создаем переменную lastName, которая содержит переданные скрипту через HTTP метод POST данные (с ключом lastName)
echo «Пользователь «.$firstName.» «.$lastName.» добавлен»; // выводим текстовое содержимое (значение выше созданных переменных)
?>

data — данные, которые будут отправлены на сервер (значение переменной formData).

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера, которые мы и вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования jQuery функции $.post()jQuery AJAX

Поиск по ключам

Есть два основных вида поиска в хранилище объектов:

По ключу или по диапазону ключей. То есть: по в хранилище «books».
По полям объекта, например, .

Сначала давайте разберёмся с ключами и диапазоном ключей .

Методы поиска поддерживают либо точные ключи, либо так называемые «запросы с диапазоном» – объекты, которые задают «диапазон ключей».

Диапазоны создаются с помощью следующих вызовов:

означает: (или , если это true)
означает: (или , если это true)
означает: между и , включительно, если соответствующий равен .
– диапазон, который состоит только из одного ключа , редко используется.

Все методы поиска принимают аргумент , который может быть либо точным ключом, либо диапазоном ключей:

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

Например, в хранилище у нас есть множество книг. Помните, поле является ключом, поэтому все эти методы могут искать по ключу .

Примеры запросов:

Хранилище объектов всегда отсортировано

Хранилище объектов внутренне сортирует значения по ключам.

Поэтому запросы, которые возвращают много значений, всегда возвращают их в порядке сортировки по ключу.

Открыть базу данных

Для начала работы с IndexedDB нужно открыть базу данных.

Синтаксис:

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

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

После этого вызова необходимо назначить обработчик событий для объекта :

: база данных готова к работе, готов «объект базы данных» , его следует использовать для дальнейших вызовов.
: не удалось открыть базу данных.
: база открыта, но её схема устарела (см. ниже).

IndexedDB имеет встроенный механизм «версионирования схемы», который отсутствует в серверных базах данных.

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

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

Это событие также сработает, если базы данных ещё не существует, так что в этом обработчике мы можем выполнить инициализацию.

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

Когда мы публикуем вторую версию:

Таким образом, в мы обновляем базу данных. Скоро подробно увидим, как это делается. А после того, как этот обработчик завершится без ошибок, сработает .

После у нас есть объект базы данных в , который мы будем использовать для дальнейших операций.

Удалить базу данных:

А что, если открыть предыдущую версию?

Что если мы попробуем открыть базу с более низкой версией, чем текущая? Например, на клиенте база версии 3, а мы вызываем .

Возникнет ошибка, сработает .

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

Раз уж мы говорим про версионирование, рассмотрим связанную с этим небольшую проблему.

Проблема заключается в том, что база данных всего одна на две вкладки, так как это один и тот же сайт, один источник. И она не может быть одновременно версии 1 и 2. Чтобы обновить на версию 2, все соединения к версии 1 должны быть закрыты.

Чтобы это можно было организовать, при попытке обновления на объекте базы возникает событие . Нам нужно слушать его и закрыть соединение к базе (а также, возможно, предложить пользователю перезагрузить страницу, чтобы получить обновлённый код).

Если мы его не закроем, то второе, новое соединение будет заблокировано с событием вместо .

Код, который это делает:

Здесь мы делаем две вещи:

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

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

Такой конфликт при обновлении происходит редко, но мы должны как-то его обрабатывать, хотя бы поставить обработчик , чтобы наш скрипт не «умирал» молча, удивляя посетителя.

Обработка ошибок

Запросы на запись могут выполниться неудачно.

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

При ошибке в запросе соответствующая транзакция отменяется полностью, включая изменения, сделанные другими её запросами.

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

В примере ниже новая книга добавляется с тем же ключом (), что и существующая. Метод генерирует в этом случае ошибку . Мы обрабатываем её без отмены транзакции:

Нужны ли обработчики onerror/onsuccess для каждого запроса? Не всегда. Мы можем использовать делегирование событий.

События IndexedDB всплывают: → → .

Все события являются DOM-событиями с фазами перехвата и всплытия, но обычно используется только всплытие.

Поэтому мы можем перехватить все ошибки, используя обработчик , для оповещения пользователя или других целей:

…А если мы полностью обработали ошибку? В этом случае мы не хотим сообщать об этом.

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

6 ответов

Решение

Внутренне отображается непосредственно на в текущей версии jQuery. (То же самое касается .) Таким образом, при использовании вы получите небольшой, но практически незначительный удар по производительности. вместо.

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

289

2012-08-07 13:26

Все эти фрагменты выполняют одно и то же:

Тем не менее, они очень отличаются от этих, которые все выполняют одно и то же:

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

JQuery-х Функция не вводит никаких новых функциональных возможностей, которые еще не существовали, это просто попытка стандартизировать обработку событий в jQuery (вам больше не нужно выбирать между live, bind или делегатом).

2012-08-07 13:29

Прямые методы и превосходные API для и нет никакого намерения осудить их.

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

превосходит из-за порядка аргумента:

Вы сразу знаете, что это делегировано, потому что, ну, это говорит делегат. Вы также мгновенно видите селектор.

С не сразу понятно, делегировано ли оно, и вам нужно посмотреть в конце селектор:

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

2012-08-07 13:42

Если вы посмотрите в исходном коде для вы обнаружите, что это просто функция перезаписи :

2012-08-07 13:28

Из документации по jQuery:

2012-08-07 13:27

Начиная с Jquery 3.0 и выше.bind устарел, и вместо этого они предпочитают использовать.on. Как @Blazemonger ответил ранее, что он может быть удален, и это точно, что он будет удален. Для более старых версий.bind также будет вызывать.on внутри, и между ними нет никакой разницы. Пожалуйста, смотрите API для более подробной информации.

2016-12-01 21:18

Примеры

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

Следующим простейшим способом использования является создание функции с предопределёнными аргументами. Эти аргументы (если они есть) передаются после значения и вставляются перед аргументами, передаваемыми в целевую функцию при вызове привязанной функции.

По умолчанию, внутри (en-US) контекст устанавливается в объект (или ). При работе с методами класса, требующими для ссылки на экземпляры класса, вы можете явно привязать к колбэк-функции для сохранения экземпляра.

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

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

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

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

Метод также полезен в случаях, если вы хотите создать сокращение для функции, требующей определённое значение .

Возьмём, например, метод , который вы можете использовать для преобразования массивоподобного объекта в настоящий массив. Вы можете создать подобное сокращение:

С помощью метода , это сокращение может быть упрощено. В следующем куске кода является функцией, привязанной к функции объекта (en-US), со значением , установленным в функцию объекта . Это означает, что дополнительный вызов может быть устранён:

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

Параметр	Описание
selector	Строка, содержащая выражение селектор, который будет использоваться для сопоставления с элементами.
function(index, element)	Функция, используемая в качестве проверки (сопоставления) каждого элемента в наборе. Функция принимает два аргумента: index — индекс элемента в коллекции jQuery. element — текущий элементу DOM.
selection	Cуществующий объект jQuery, который будет использован для сопоставления с текущим набором элементов.
elements	Один, или несколько элементов DOM, которые будет использованы для сопоставления с текущим набором элементов.

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim. Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects. Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim.

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом ) так и в несжатом виде.

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

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

А это очень важно для производительности сайта

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x, 2.x и 3.x.

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и .

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

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как…».

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

Итого

IndexedDB можно рассматривать как «localStorage на стероидах». Это простая база данных типа ключ-значение, достаточно мощная для оффлайн приложений, но простая в использовании.

Лучшим руководством является спецификация, текущая версия 2.0, но также поддерживаются несколько методов из 3.0 (не так много отличий) версии.

Использование можно описать в нескольких фразах:

Подключить обёртку над промисами, например idb.
Открыть базу данных:
- Создание хранилищ объектов и индексов происходит в обработчике .
- Обновление версии – либо сравнивая номера версий, либо можно проверить что существует, а что нет.
Для запросов:
- Создать транзакцию (можно указать readwrite, если надо).
- Получить хранилище объектов .
Затем для поиска по ключу вызываем методы непосредственно у хранилища объектов.
Если данные не помещаются в памяти, то используйте курсор.

Демо-приложение:

Результат
index.html