01. 문서 로딩

window.onload = function(){
    //실행 코드
}

$(document).ready(function(){
    //실행 코드
});

01. id 선택자

document.getElementById("id").style.color = "red";

$("#id").css("color","red");

02. class 선택자

document.querySelector(".class").style.color = "red";

$(".class").css("color","red");

03. 다중 선택자

document.querySelectorAll(".class").style.color = "red";

$(".class").css("color","red");

04. 자식 선택자

document.querySelector(".class .child").style.color = "red";

$(".class .child").css("color","red");

01. 스타일

document.querySelector(".class").style.color = "red";
document.querySelector(".class").style.transform = "translate(100px)";

$(".class").css("color","red");
$(".class").css("transform","translate(100px");

01. 클래스 추가

document.querySelector(".class").classList.add("show");

$(".class").addClass("show");

02. 클래스 삭제

document.querySelector(".class").classList.remove("show");

$(".class").removeClass("show");

03. 클래스 토글

document.querySelector(".class").classList.toggle("show");

$(".class").toggleClass("show");

04. 클래스 확인하기

document.querySelector(".class").contain("show");

$(".class").hasClass("show");

01. 텍스트 삽입

document.querySelector(".class").textContent = "글자를 추가합니다."; 
document.querySelector(".class").innerText = "글자를 추가합니다.";

$(".class").text("글자를 추가합니다.");

02. 태그 & 텍스트 삽입

document.querySelector(".class").innerHTML = "
글자를 추가합니다.
";

$(".class").html("태그를 추가합니다.");

01. show

document.querySelector(".class").style.display = "block";

$(".class").show();

02. hide

document.querySelector(".class").style.display = "none";

$(".class").hide();

03. fadeOut

document.querySelector(".class").addEventListener("click", function(){
    document.querySelector(".class").style.opacity = "0";
    document.querySelector(".class").style.transition = "400ms";
})

$(".class").fadeOut();

04. fadeIn

document.querySelector(".class").addEventListener("click", function(){
    document.querySelector(".class").style.opacity = "1";
    document.querySelector(".class").style.transition = "400ms";
})

$(".class").fadeIn();

05. slideUp

document.querySelector(".class").addEventListener("click", function(){
    document.querySelector(".class").style.height = "0";
    document.querySelector(".class").style.transition = "400ms";
})

$(".class").slideUp();

06. slideDown

document.querySelector(".class").addEventListener("click", function(){
    document.querySelector(".class").style.height = "100px";
    document.querySelector(".class").style.transition = "400ms";
})

$(".class").slideDown();

01. width

document.querySelector(".class").clientWidth; //패딩 포함
document.querySelector(".class").offsetWidth; //패딩 포함
document.querySelector(".class").getBoundingClientRect();

$(".class").width()      
$(".class").innerWidth() //패딩 포함
$(".class").outerWidth() //패딩 포함 보더 포함

02. height

document.querySelector(".class").clientHeight; //패딩 포함
document.querySelector(".class").offsetHeight; //패딩 포함
document.querySelector(".class").getBoundingClientRect();

$(".class").Height()      
$(".class").innerHeight() //패딩 포함
$(".class").outerHeight() //패딩 포함 보더 포함

01. clone

document.querySelector(".class").cloneNode(true);

$(".class").clone();

01. before

let clone = document.querySelector(".class").cloneNode(true);
document.querySelector(".class").insertAdjacentElement("beforebegin", clone);

let clone = $(".class").clone();
$(".class").before(clone)

02. after

let clone = document.querySelector(".class").cloneNode(true);
document.querySelector(".class").insertAdjacentElement("afterend", clone);

let clone = $(".class").clone();
$(".class").after(clone)

03. prepend

let clone = document.querySelector(".class").cloneNode(true);
document.querySelector(".class").insertAdjacentElement("afterbegin", clone); 

let clone = $(".class").clone();
$(".class").prepend(clone)

04. append

let clone = document.querySelector(".class").cloneNode(true);
document.querySelector(".class").insertAdjacentElement("beforeend", clone);

let clone = $(".class").clone();
$(".class").append(clone)
aa