am-monkey

/*	jQuery	*/
// Выбрать все эл-ты с классом .box
$(".box");


/*	js	*/
// Выбирает 1-й элемент с классом box
document.querySelector(".box");

// …или выбрать все элементы с классом .box  

am-monkey

// jQuery
// Скрыть все элементы с классом .box
$(".box").hide();

// Без  jQuery
// Запускаем цикл по массиву с вложенными элементами в блоке .box, чтобы применить к ним метод/функцию
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }

am-monkey

// jQuery
// Выбираем 1-й элемент с классом .box в блоке .container
var container = $(".container");
// затем…
container.find(".box");

// Без jQuery
// Выбираем 1-й элемент с классом .box в блоке .container
var container = document.querySelector(".container");
// затем…

am-monkey

// jQuery
// Возвращает следующий, предыдущий и родительский элемент, относительно элемента с классом .box
$(".box").next();
$(".box").prev();
$(".box").parent();

// Без jQuery
// Возвращает следующий, предыдущий и родительский элемент, относительно элемента с классом .box
var box = document.querySelector(".box");
box.nextElementSibling;

am-monkey

// jQuery
$(".button").click(function(e) { /* обработчик на событие click */ });
$(".button").mouseenter(function(e) {  /* обработчик на событие click */ });
$(document).keyup(function(e) {  /* обработчик на нажатие клавиши */  });

// Без jQuery
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

am-monkey

// jQuery
// перехватываем событие click на элементе .search-result
// даже если он появляется в DOM динамически
$(".search-result").on("click", handleClick);

// Без jQuery
// Создаем и добавляем элемент в DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Вешаем обработчик событий на этот элемент

am-monkey

// jQuery
// Выбираем элемент .box меняем цвет текста в нем на черный #000
$(".box").css("color", "#000");

// Без jQuery
// Выбираем 1-й элемент .box меняем цвет текста в нем на черный #000
document.querySelector(".box").style.color = "#000";

am-monkey

// jQuery
// Добавляем сразу несколько свойств к объекту .box
$(".box").css({
  "color": "#000",
  "background-color": "red"
});

// Без jQuery
// Выставляем цвет текста #000 и задаем фон red
var box = document.querySelector(".box");

am-monkey

// jQuery
// Скрываем и показываем элемент
$(".box").hide();
$(".box").show();

// Без jQuery
// Скрываем и показываем элемент меняя свойство "display" на block и none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

am-monkey

// jQuery
$(document).ready(function() { 
  /* код, который выполняется после того, как прогрузился DOM */
});

// Без jQuery
// Объявляем свой метод и далее используем его
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);