jQuery를 순수자바스크립트로 변경하기

// jQuery: 모든 .element 인스턴스 선택
$.(".element");

// .element 첫번째 요소만 선택
document.querySelector(".element");

// .element 모든 요소 선택
document.querySelectorAll(".element");

// jQuery
$(".element").click(function(e) { /* 클릭 이벤트 처리 */ });
$(".element").mouseenter(function(e) { /* 클릭 이벤트 처리 */ });
$(document).keyup(function(e) { /* 키 입력 이벤트 처리 */ });

// vanillaJS
document.querySelector(".element").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".element").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

// jQuery에서 모든 요소 안보이게 하기
$(".element").hide();

// VanillaJS에서는 .element 엘리먼트 배열의 각 원소마다 함수를 호출
document.querySelectorAll(".element").forEach(ele => { ele.style.display = "none" }

// jQuery에서 .container 엘리먼트들중 .element의 첫 번째 엘리먼트 가져오기
var container = $(".container");
container.find(".element");

// VanillaJS에서 동일한 기능 수행
var container = document.querySelector(".container");
container.querySelectorAll(".element");

// jQuery
$(".element").next();
$(".element").prev();
$(".element").parent();

// VanillaJS
var element = document.querySelector(".element");
element.nextElementSibling;
element.previousElementSibling;
element.parentElement;

// jQuery
// .item 엘리먼트가 DOM에 동적으로 추가 되는 경우에도 클릭 이벤트를 처리할 수 있다
$(".list").on("click", ".item", handleClick);

// VanillaJS
// 엘리먼트를 생성하고 DOM에 추가
var list = document.createElement("div");
document.querySelector(".item").appendChild(list);
// 엘리먼트에 이벤트 등록
list.addEventListener("click", handleClick);

// jQuery
// document와 .element에서 customEvent 실행
$(document).trigger("customEvent");
$(".element에서").trigger("customEvent");

// vanillaJS
// customEvent 생성과 실행
document.dispatchEvent(new Event("customEvent"));
document.querySelector(".element에서").dispatchEvent(new Event("customEvent"));

// jQuery
// .element 를 선택하고 텍스트 색상을 검정으로 변경
$(".element").css("color", "#000");

// vanillaJS
// .element 에 해당하는 첫번째 엘리먼트를 선택하고 텍스트 색상을 검정으로 변경
document.querySelector(".element").style.color = "#000";

// jQuery
// 여러개의 스타일 적용
$(".element").css({
    "color": "#000",
    "Background-color": "red"
});

// vanillaJS
// 스타일을 한번에 적용 (그러나 이 엘리먼트에 있던 모든 CSS가 사라지고 이것으로 대체된다)
element.style.cssText = "color: #000; background-color: red";

// jQuery
$(document).ready(function() {
    /* DOM이 완전히 로드된 후에 할 일들 */
});

// vanillaJS
// 메소드를 정의하고 그것을 호출한다
var ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => {
    /* DOM이 완전히 로드된 후에 할 일들 */
});

// jQuery
// focus 클래스의 추가, 제거, 적용/비적용
$(".element").addClass("focus");
$(".element").removeClass("focus");
$(".element").toggleClass("focus");

// vanillaJS
// focus 클래스의 추가, 제거, 적용/비적용
var element = document.querySelector(".element");
element.classList.add("focus");
element.classList.remove("focus");
element.classList.toggle("focus");

// focus, highlighted 클래스를 추가하고, 다시 제거한다
var element = document.querySelector(".element");
element.classList.add("focus", "highlighted");
element.classList.remove("focus", "highlighted");

// focus클래스를 제거하고 blurred클래스를 추가
document.querySelector(".element").classList.replace("focus", "blurred");

// jQuery
// "focus" 클래스가 적용 되어있는지에 따라 작업 수행
if ($(".element").hasClass("focus")) {
    // 작업 수행
}

// vanillaJS
// "focus" 클래스가 적용 되어있는지에 따라 작업 수행
if (document.querySelector(".element").classList.contains("focus")) {
    // 작업 수행
}

// jQuery
$.ajax({
    url: "data.json"
    }).done(function(data) {
        // 응답 처리
    }).fail(fucntion() {
        // 에러 처리
    });

// vanillaJS
fetch("data.json")
    .then(data => {
        // 응답 처리
    }).catch(error => {
        // 에러 처리
    });

// jQuery
$("<div/>");
$("<span/>");

// VanillaJS
document.createElement("div");
document.createElement("span");

//
$("#result").load("data.php");

//
$("#result").load("data.php", funcion() {
    alert("Load was performed.");
});

// 받은페이지 일부만 사용.
$("#result").load("data.php #container");

<header data-include="./include/header.html"></header>