Ванильный 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