JavaScript без jQuery - несколько примеров

Не нужно использовать jQuery там, где вся его мощь ни к чему, т.к. многие вещи вполне спокойно делаются и без него

Ниже вы увидите примеры для следующих ситуаций:

• Подписывание на окончание загрузки документа
• Выборка элементов используя css-селекторы
• Добавление/удаление подписчиков на события
• Манипуляция с классами элемента
• Работа с аттрибутами элементов
• Управление контентом
• Добавление/удаление элементов
• Проход по DOM
• Использование анимации
• AJAX

Окончание загрузки документа

Привычное использование:


Без jQuery:

Но стоит заметить, что в IE8 и ниже событие это не поддерживается, и если вам не посчастливилось их поддерживать, то рекомендую к использованию jquery.documentReady.js

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

Несколько примеров на jQuery:

Вполне спокойно заменяются на простом JS:

И да, первый элемент в jQuery можно было выбрать через first, т.е. $('.monsters:first')

Если вы поддерживаете старые браузеры и хотите использовать jQuery только для выборки элементов, то стоит заюзать Sizzle, но позволит использовать CSS3-селекторы для поиска элементов DOM.
Использование довольно простое: Sizzle('div.someClassName'), т.е. как и в jQuery, только помните - если элементов нет, то Sizzle вернёт пустой массив:

Добавление и удаление подписчиков на события:

jQuery предоставляет нам целый зоопарк методов, для подписки на события, некоторые из них являются упрощением вызова метода on:

• one:
• hover, bind/unbind, delegate/undelegate
  

Но в большинстве случаев вам нужно лишь навесить событие на элемент или контейнер элементов примерно так:


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

Кода стало не на много больше, а работает и без жквери
Только стоит иметь ввиду разницу в контексте в методе onItemClick и всё, а разница получается совсем небольшая. Да - больше клавиш нажать нужно, но intellisence вам в помощь да сниппеты )

Манипуляция классами

Должно быть некоторые даже понятия не имеют как проверить наличие класса у элемента, кроме как проверять значение indexOf свойства className :)

Хотя жквери почти так и делает, см. ниже:

И потому предпочитают использовать jQuery, оборачивая this в jQuery и вызывая метод hasClass (см. работу с классами в jQuery по адресу https://github.com/jquery/jquery/blob/master/src/attributes/classes.js)

Несколько примеров работы с классами на jQuery:

Собственно да - ничего сложного, но не менее сложно использовать нативный JS:

Работа с атрибутами

jQuery:


Vanilla JS:

И вновь - всё просто, главное помнить, что jQuery attr вернёт undefined, а getAttribute - null

Управление контентом

jQuery имеет два удобных метода для установки или получения содержимого элемента:

• text() - просто текста
• html() - html-текста

Вместо этого спокойно можно использовать нативные свойства объектов:

• textContent - возвращает текстовое содержимое элемента (только внимание - текст тегов style/script также вернётся, но вы же, надеюсь, не вставляете их в элементы, текст коих собираетесь считывать)
• innerHTML - при чтении возвращает html-содержимое элемента, а при присвоении - устанавливает переданное значение

Добавление и удаление элементов

jQuery:

Простой JS:

Да, здесь немного неудобно, но в целом всё очень похоже и при достаточности и несложности простого js - не следует подключать jQuery только для манипуляций DOM, тем более, что для этого уже существует полно всяких шаблонизаторов

Проход по дереву DOM

jQuery.parent() заменяется element.parentNode
jQuery.prev() => element.previousElementSibling
jQuery.next() => element.nextElementSibling
jQuery.children() => element.children

Здесь всё просто, но сложнее с методом closest
Предлагается реализовывать свою функцию хождения по родительским элементам, что я, бывало, и делал:

Использование анимации

Безусловно, во времена, когда не было CSS3 анимационный функционал jQuery был очень удобен, сейчас же можно многие вещи делать на простом css, а через js просто добавлять/удалять нужные классы

На github есть замечательный проект Animate.css, с заранее подготовленными многими css-анимациями, которые, естественно, не обязательно все включать в проект

Вставляю оригинальный исходник, см. вкладку Result:

AJAX

Использование AJAX в jQuery довольно удобно, тем более, что есть множество упрощённых методов (get, post, getJSON), но опять таки - если нужен от jQuery только ajax, то не следует его подключать, а можно использовать классический XMLHttpRequest или один из множества готовых скриптов, реализующих упрощённый ajax
В примере ниже используются XMLHttpRequest и библиотека reqwest, которая очень даже напоминает jQuery в использовании )




Решил сделать эту заметку по мотивам http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
+ к тому же чтобы не забыть, что уже доавно хотел записать. Я уже несколько месяцев почти не использую JS, и в будущем пока не предполагается, потому лишним не будет, да и пригодится может кому