Jquery.get()

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

Большинство событий, как например нажатие мышью по элементу (click) происходят относительно редко и проблем с их обработкой практически не возникает. Однако такие события как mousemove и scroll могут происходить несколько раз в секунду. В этом случае, частое выполнение обработчиков может потребовать значительных вычислительных ресурсов компьютера и приводить к зависанию. Избежать этого можно, если грамотно организовать выполнение обработчиков. Например, стоит кэшировать вычисляемые величины, вместо того, чтобы считать их каждый раз заново. И в первую очередь следует кэшировать объекты jQuery, поскольку их создание зачастую требует весомых вычислительных затрат. Например, рассмотрим случай, когда нужно в элементе с идентификатором elm прописывать координаты мыши, когда она движется над элементом с классом mousemove-elm:

// неэффективное выполнение задачи - элемент с id=elm
// ищется заново при каждом выполнении обработчика
$('.mousemove-elm').on('mousemove', function(event){
  $("#elm").text(event.pageX + ", " + event.pageY);
});
 
 
// эффективное выполнение задачи - элемент с id=elm
// ищется только один раз
var elm = $("#elm");
$('.mousemove-elm').on('mousemove', function(event){
  elm.text(event.pageX + ", " + event.pageY);
});

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

// ограничим выполнение обработчика не более чем двумя вызовами в секунду
var elm = $("#elm");
var canExe = true;
$('.mousemove-elm').on('mousemove', function(event){
  if(canExe == true){
    elm.text(event.pageX + ", " + event.pageY);
    canExe = false;
    setTimeout(function(){canExe = true}, 500); 
    //вызывать следующий обработчик можно будет только через 500 мл.секунд
  }
});

Чтобы привязывать события к элементам страницы, jQuery требуется возможность устанавливать на них данные, в качестве свойств. Элементы object, embed и applet не имеют таких особенностей, поэтому установленные на них обработчики работать не будут.

Событие error объекта window, обладает нестандартными входными параметрами и возвращаемым значением, поэтому jQuery не поддерживает его обработку. Установить обработчик на это событие можно только стандартным методом — присвоив функцию величине window.onerror.

Пример:

Преобразуем html в текст, при клике по параграфу.


<!DOCTYPE html>
<html>
<head>
 <style>
 p { margin:8px; font-size:20px; color:blue;
     cursor:pointer; }
 b { text-decoration:underline; }
 button { cursor:pointer; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p>
   <b>Click</b> to change the <span id="tag">html</span>
 </p>
 <p>
   to a <span id="text">text</span> node.
 </p>
 <p>
   This <button name="nada">button</button> does nothing.
 </p>
<script>
$("p").click(function () {
 var htmlStr = $(this).html();
 $(this).text(htmlStr);
});
</script>
</body>
</html>

Демо:

Метод .html() может использоваться так же для замещения содержимого элемента.

Возьмём следующий HTML фрагмент:

<div class="demo-container">
 <div class="demo-box">Demonstration Box</div>
</div>

Контент элемента <div class=»demo-container»> может быть задан следующим образом:

$('div.demo-container')
 .html('<p>All new content. <em>You bet!</em></p>');

Данная строчка заменит содержимое элемента <div class=»demo-container»>:

<div class="demo-container">
 <p>All new content. <em>You bet!</em></p>
</div>

Начиная с jQuery 1.4, метод .html() позволяет формировать HTML контент элемента в отдельной функции.

$('div.demo-container').html(function() {
 var emph = '<em>' + $('p').length + ' paragraphs!</em>';
 return '<p>All new content for ' + emph + '</p>';
});

Дан документ с шестью параграфами. Заменим их содержимое с <div class=»demo-container»> на <p>All new content for <em>6 paragraphs!</em></p>.

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>

Функции alert, prompt, confirm

В заключение этого занятия познакомимся с функциями alert, prompt, confirm, которые реализуются в JavaScript движках, работающих в браузерах. То есть, вызывая эти функции, мы предполагаем, что наш скрипт запущен именно в браузере, а не какой-то другой среде.

Первая функция alert() отображает окно с сообщением и приостанавливает дальнейшее исполнение скрипта. Синтаксис функции такой:

alert(<сообщение>);

Например:

alert("Hello");

выведет на экран модальное окно с сообщением «Hello». Модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы до тех пор, пока окно открыто. Для продолжения работы скрипта пользователь должен нажать кнопку «OK». Окно будет закрыто и программа продолжит свою работу.

Следующая функция prompt() отображает модальное окно для ввода каких-либо данных. Синтаксис этой функции такой:

result = prompt(title, );

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

let age = prompt("Сколько вам лет?", 18);
console.log(age);

Выведет окно и попросит ввести ваш возраст. Если пользователь нажмет кнопку OK, то переменная age будет содержать введенный возраст, а при нажатии на «Отмена» (или нажав клавишу ESC) – значение null.

Заметка: для браузера IE лучше всегда указывать второй параметр, иначе значение по умолчанию будет равно undefined.

Третья функция confirm() отображает модальное окно с текстом вопроса и имеет такой синтаксис:

result = confirm(question);

здесь question – текст вопроса; result – результат ответа: принимает значение true, если пользователь нажал на кнопку OK и false – в других случаях. Пример:

let isCar = confirm("У тебя есть машина?");
console.log(isCar);

Все эти функции нам понадобятся в дальнейшем при изучении JavaScript.

Видео по теме

JavaScipt #1: что это такое, с чего начать, как внедрять и запускать

JavaScipt #2: способы объявления переменных и констант в стандарте ES6+

JavaScript #3: примитивные типы number, string, Infinity, NaN, boolean, null, undefined, Symbol


JavaScript #4: приведение типов, оператор присваивания, функции alert, prompt, confirm

JavaScript #5: арифметические операции: +, -, *, /, **, %, ++, —

JavaScript #6: условные операторы if и switch, сравнение строк, строгое сравнение

JavaScript #7: операторы циклов for, while, do while, операторы break и continue

JavaScript #8: объявление функций по Function Declaration, аргументы по умолчанию

JavaScript #9: функции по Function Expression, анонимные функции, callback-функции

JavaScript #10: анонимные и стрелочные функции, функциональное выражение

JavaScript #11: объекты, цикл for in

JavaScript #12: методы объектов, ключевое слово this

JavaScript #13: клонирование объектов, функции конструкторы


JavaScript #14: массивы (array), методы push, pop, shift, unshift, многомерные массивы

JavaScript #15: методы массивов: splice, slice, indexOf, find, filter, forEach, sort, split, join

JavaScript #16: числовые методы toString, floor, ceil, round, random, parseInt и другие

JavaScript #17: методы строк — length, toLowerCase, indexOf, includes, startsWith, slice, substring

JavaScript #18: коллекции Map и Set

JavaScript #19: деструктурирующее присваивание

JavaScript #20: рекурсивные функции, остаточные аргументы, оператор расширения

JavaScript #21: замыкания, лексическое окружение, вложенные функции

JavaScript #22: свойства name, length и методы call, apply, bind функций

JavaScript #23: создание функций (new Function), функции setTimeout, setInterval и clearInterval

Обработчики событий (параметр handler)

В качестве параметра handler должна быть указана функция (или значение false, но об этом позже). Это может быть анонимная функция:

$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

или именем заданной функции:

function myFunction(){
  alert('Вы нажали на элемент "foo"');
});
 
$('#foo').on('click', myFunction);

Когда происходит событие, jQuery передает в вызываемый обработчик объект event, в котором содержится вся вспомогательная информация по происходящему событию. Этот объект немного отличается от стандартных объектов событий, которые предоставляют браузеры (их получают обработчики, установленные обычными средствами javascript). Библиотека jQuery, изменяет некоторые поля для обеспечения кроссбраузерности. Так или иначе, всегда можно добраться и до нативного объекта события (тот, который предоставляет браузер), он лежит в поле event.originalEvent.

После возникновения, событие всегда всплывает по иерархии DOM вплоть до объекта document. Если при обработке события необходимо остановить всплытие, нужно вызвать метод event.stopPropagation() внутри обработчика. В результате, данное событие прекратит далнейшее всплытие по дереву DOM. Однако, если на текущем элементе были установлены другие невыполненные обработчики, они будут выполнены. Чтобы этого избежать нужно вместо stopPropagation() вызвать event.stopImmediatePropagation().

Если вместо функции в параметре handler задать false, то event.stopPropagation() и event.preventDefault() будут вызваны автоматически. Вообще, задание false идентично установке такого обработчика:

function(){ return false; }

То есть, например после кода:

$("a.disabled").on("click", false);

нажатие по ссылкам с классом disabled не будет приводить к переходу на другие страницы, а так же, событие не будет передаваться родительским элементам.

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


С этим читают