Как обойтись без jQuery

JQuery вездесущ. Но зачем он всё-таки нужен? Если вы пользуетесь только тем, о чём пойдёт речь дальше, то считайте, что jQuery вам не нужен. Достаточно обычного JavaScript.

1. Селекторы

Можно использовать функции querySelector (возвращает первый элемент из соответствующих критериям) и querySelectorAll (возвращает NodeList из всех элементов, удовлетворяющих критериям). Они покрывают почти все нужды.

2. Обработчики событий

Обработку событий сейчас легко делать с помощью addEventListener. Например, так:

3. Управление классами и атрибутами

Классы можно присваивать/удалять при помощи свойства classList.

Аттрибуты можно присваивать с помощью setAttribute().

4. Вставка и удаление элементов страницы

Это делать не так удобно, как на jQuery, но всё же возможно при помощи функций createElement (создать не привязанный к DOM новый элемент. До поры он будет «висеть в воздухе»), appendChild (добавить дочерний элемент, который может быть создан, например, предыдущей функцией), insertBefore(втсавить элемент перед тем, на котором вызывается функция) и т.п. Удалять элемент из дерева DOM можно функцией removeChild.

5. Получить содержимое элемента или поменять его

Это делается с помощью свойств элемента textContent (берем только текст) и innerHTML (берем полностью HTML внутри элемента).

6. Обработка массивов

Пройти по всем элементам массива можно сс помощью forEach или функции map

7. Осуществить действия по готовности страницы (document ready)

Это делается так:

Выводы

Все упомянутые вещи легко делать с помощью нативного JavaScript. За рамками рассмотрения остались некоторые другие часто нужные задачи, такие как навигация по DOM, но она тоже реализуется с помощью JavaScript достаточно легко, хотя и не так красиво, как в jQuery. Вместо AJAX-вызова jQuery можно использовать объекты XMLHttpRequest и его методы, либо какую-нибудь небольшую библиотеку, специально для этого предназначенную. Возможно, если ваш сайт нагружен визуальными эффектами вроде анимации, то отказываться от jQuery и рано, хотя если дело только в этом, то имеется много маленьких, быстрых специализированных библиотек для этих задач.

 

Поделиться: Share on LinkedIn
Linkedin
Share on VK
VK
Share on Facebook
Facebook
0Share on Google+
Google+
0Tweet about this on Twitter
Twitter

Оставить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Яндекс.Метрика