Ванильный JavaScript в браузере теперь имеет многие из встроенных функций jQuery.

Следовательно, нам не нужно использовать jQuery для многих вещей.

В этой статье мы рассмотрим ванильный JavaScript-эквивалент функций jQuery.

Прослушивание событий для динамически добавляемых элементов

Во многих случаях мы хотим прослушивать события динамически добавляемых элементов.

В jQuery мы бы использовали метод on для прослушивания события на всех выбранных элементах.

Например, мы можем написать:

$("div").on("click", ".search-result", (e) => {
  //...
});

для прослушивания щелчков по элементам с классом search-result в div с методом on для присоединения к ним прослушивателей событий.

Чтобы сделать то же самое с обычным JavaScript, мы можем использовать делегирование событий.

Например, мы можем написать:

document
  .querySelector('div')
  .addEventListener('click', (e) => {
    if (e.target.className === 'search-result') {
      //...
    }
  })

вызвать addEventListener в div.

Затем в обработчике события щелчка мы используем e.target.className, чтобы получить имя класса элемента, по которому мы щелкнули.

Затем мы сравниваем это, чтобы увидеть, щелкнули ли мы что-нибудь с классом search-result.

Запуск и создание событий

В jQuery мы можем использовать метод trigger для запуска события.

Например, мы можем написать:

$(document).trigger("myEvent");
$("div").trigger("myEvent");

Чтобы сделать то же самое с ванильным JavaScript, мы пишем:

document.dispatchEvent(new Event("myEvent"));
document.querySelector("div").dispatchEvent(new Event("myEvent"));

Wd вызовет dispatchEvent для выбранного элемента, чтобы вызвать одно наше событие.

Элементы стиля

В jQuery есть метод css, позволяющий стилизовать элементы.

Например, мы можем написать:

$("div").css("color", "#000");

Чтобы сделать то же самое с ванильным JavaScript, мы можем написать:

document.querySelector("div")
  .style.color = "#000";

Мы устанавливаем свойство style.color, чтобы установить свойство CSS color выбранного div.

Мы также можем передать объект в css метод jQuery:

$("div").css({
  "color": "#000",
  "background-color": "red"
});

Чтобы сделать то же самое с обычным JavaScript, мы просто устанавливаем свойства свойства объекта style на нужные нам значения:

const div = document.querySelector("div");
div.style.color = "#000";
div.style.backgroundColor = "red";

Мы также можем установить свойство style.cssText для установки нескольких стилей:

const div = document.querySelector("div");
div.style.cssText = "color: #000; background-color: red";

hide() и show()

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

И мы можем использовать show метод jQuery для отображения выбранных элементов.

Например, мы можем написать:

$("div").hide();
$("div").show();

чтобы скрыть и показать div соответственно.

Чтобы сделать то же самое с обычным JavaScript, мы можем установить для свойства display CSS значение, которое мы хотим с помощью JavaScript:

document.querySelector("div").style.display = "none";
document.querySelector("div").style.display = "block";

Мы скрываем div, устанавливая style.display на 'none'.

И мы показываем div, устанавливая style.display на 'block'.

Заключение

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

Больше контента на plainenglish.io