1. 선택자
// 기본
$(".box");
document.querySelector(".box"); // 첫번째만 반환함
document.querySelectorAll(".box"); // 모두 반환함 nodeList 형태라고 하는데 배열이라고 생각하면 편함
// find
var container = $(".container");
container.find(".box");
var container = document.querySelector(".container");
container.querySelector(".box");2. 기능실행
$(".box").hide();
// 한개
document.querySelector(".box").style.display = "none";
// 여러개
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })3. 탐색
$(".box").next();
$(".box").prev();
$(".box").parent();
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;4. 요소
// 요소 추가
$("<div/>");
$("<span/>");
document.createElement("div");
document.createElement("span");
// 요소에 텍스트 추가
var element = document.createElement("div");
element.textContent = "Text"
var text = document.createTextNode("div");
element.appendChild(text);
// 요소의 속성 수정
$(".button").text("New text");
document.querySelector(".button").textContent = "New text";
// 요소의 속성값 가져오기
$(".button").text();
document.querySelector(".button").textContent;
// 요소에 하위 요소 추가
$(".container").append($("<div/>"));
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);4. 이벤트 추가
// 기본
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) { /* handle click event */ });
$(document).keyup(function(e) { /* handle key up event */ });
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });
// 동적으로 추가하는 요소에도 이벤트 추가
$(".search-container").on("click", ".search-result", handleClick); // 기존 요소와 추가될 요소까지
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
searchElement.addEventListener("click", handleClick); // 추가한 요소에 이벤트 추가하기
// Trigger
$(document).trigger("myEvent");
$(".box").trigger("myEvent");
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));5. Style (CSS)
// 하나라면
$(".box").css("color", "#000");
document.querySelector(".box").style.color = "#000";
// 여러개라면
$(".box").css({
"color": "#000",
"background-color": "red"
});
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";
// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red";
// Class명 추가/삭제/토글
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");
// 한개
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");
// 여러개
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");
// 상호 베타적인 토글용 2개의 Class를 번갈아가며 써야 한다면
document.querySelector(".box").classList.replace("focus", "blurred");
// Class명을 가지고 있는지 확인
$(".box").hasClass("focus");
document.querySelector(".box").classList.contains("focus");6. Document Ready
$(document).ready(function() {
// 소스
});
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
// 소스
});7. Ajax
$.ajax({
url: "data.json"
}).done(function(data) {
// ...
}).fail(function() {
// Handle error
});
fetch("data.json").then(data => {
// Handle data
}).catch(error => {
// Handle error
});
출처를 기반으로 다시 정리함
출처: tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
Cheat sheet for moving from jQuery to vanilla JavaScript
This reference guide will help you convert jQuery's most common patterns to vanilla JavaScript
tobiasahlin.com