Шпаргалка по переходу от jQuery к vanilla JavaScript

Шпаргалка по переходу от jQuery к vanilla JavaScript

От автора: jQuery по-прежнему является полезной и прагматичной библиотекой, но есть все больше шансов на то, что вы не будете зависеть от нее для выполнения основных задач, таких как выбор элементов, их стилизация, анимация и выборка данных — вещи, которые были хороши в jQuery. Благодаря широкой поддержке браузерами ES6 (более 96% на момент написания статьи) сейчас, вероятно, самое время отойти от jQuery.

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

Выбор элементов

Выбор одного или нескольких элементов DOM для чего-либо является одной из основных задач jQuery. Эквивалентом $() или jQuery() в JavaScript является querySelector() или querySelectorAll(), который, как и в jQuery, можно вызвать с помощью селектора CSS.

Запуск функции для всех элементов в выборке

querySelectorAll() возвращает, как и в jQuery, массив элементов, с которыми вы можете работать. Но, в то время как с jQuery вы можете запустить функцию для всей выборки, просто вызвав ее для объекта jQuery, с помощью JavaScript вам придется перебрать массив элементов через цикл:

Поиск одного элемента в другом

Обычным шаблоном jQuery является выбор элемента внутри другого элемента с использованием .find(). Вы можете достичь того же, ограничивая выделение для дочерних элементов, вызывая querySelector или querySelectorAll для элемента:

Прохождение дерева с помощью parent(), next() и prev()

Если вы хотите пройти DOM, чтобы выбрать одноуровневый или родительский элемент относительно другого элемента, вы можете получить доступ к ним через nextElementSibling, previousElementSibling и parentElement для этого элемента:

Работа с событиями

Существует множество способов прослушивания событий в JQuery, но не зависимо о того, используете ли вы .on(), .bind(), .live или .click(), вы можете сделать это с по делать с помощью JavaScript эквивалента .addEventListener:

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

Метод jQuery .on() позволяет работать с «интерактивными» обработчиками событий, когда вы прослушиваете события для объектов, которые динамически добавляются в DOM. Чтобы сделать нечто подобное без jQuery, вам нужно добавить обработчик событий к элементу, когда вы добавляете его в DOM:

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

Эквивалент для ручного запуска событий с помощью trigger() можно реализовать с помощью вызова dispatchEvent(). Метод dispatchEvent() может быть вызван для любого элемента, он принимает Event качестве первого аргумента:

Стили элементов

Если вы вызываете .css() для элемента, чтобы изменить его встроенный CSS с помощью jQuery, вам нужно использовать JavaScript .style и присвоить значения его различным свойствам для достижения того же эффекта:

С помощью jQuery вы можете передать объект с парами ключ-значение для стилизации нескольких свойств одновременно. В JavaScript вы можете установить значения по одному или задать строку всех стилей:

hide() и show()

.hide() и .show() — это удобные методы, эквивалентные доступу к свойству .style и установке для display none и block:

Полная загрузка документа

Если вам нужно дождаться полной загрузки DOM, прежде чем, например, присоединять события к объектам в DOM, вы обычно используете в jQuery $(document).ready() или обычное сокращение $(). Мы можем легко создать аналогичную функцию, прослушивая DOMContentLoaded:

Работа с классами

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

Если вы хотите удалить или добавить несколько классов, то можете просто передать несколько аргументов в .add() и .remove():

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

Проверка наличия у элемента класса

Если вы хотите запустить функцию в зависимости от того, имеет ли элемент определенный класс, вы можете заменить .hasClass() из JQuery на .classList.contains():

Сетевые запросы с помощью .get() или .ajax()

fetch() позволяет создавать сетевые запросы аналогично методам jQuery ajax() и get(). fetch() принимает URL-адрес в качестве аргумента и возвращает Promise, который можно использовать для обработки ответа:

Создание элементов

Если вы хотите динамически создать элемент в JavaScript, чтобы добавить его в DOM, вы можете вызвать createElement() для document и передать имя тега, чтобы указать, какой элемент вы хотите создать:

Если вы хотите добавить в эти элементы некоторое содержимое, вы можете просто установить свойство textContent или создать текстовый узел с помощью createTextNode и добавить его в элемент:

Обновление DOM

Если вы хотите изменить текст элемента или добавить новые элементы в DOM, есть вероятность, что вы столкнетесь с innerHTML(), но его использование может быть сопряжено с опасностью атак межсайтового скриптинга (XSS). Хотя вы можете обойти это и очистить HTML, есть несколько более безопасных альтернатив.

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

Если вы создаете новый элемент, вы можете добавить этот элемент к другому, используя метод родительского элемента appendChild():

И теперь все вместе, как создать div, обновить его текст и класс и добавить его в DOM:

Заключение

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

Выбор элементов с помощью querySelector и querySelectorAll

Прослушивание событий с помощью addEventListener

Обновление CSS и стилей через свойство style

Работа с классами через свойство classList

AJAX запрос с помощью fetch

Запуск событий с помощью dispatchEvent

Создание элементов с помощью createElement

Обновление текста через свойство textContent

Добавление элементов в DOM с помощью appendChild

Автор: Tobias Bjerrome Ahlin

Источник: //tobiasahlin.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: