jQuery를 vanilla js로 변경하는 작업중 개발이력을 남깁니다.


오래도록 jQuery를 사용했었습니다. Bootstrap 5부터 jQuery 없어도 되도록 변경되고(jQuery사용해도 무관) 수많은 라이브러리들이 이제 jQuery 기반이 아닌 순수 자바스크립트 기반으로 가는 추세이기에 이참에 jQuery였던 기본 코드부터 손을 보기로 하였습니다.

Document ready

//jQuery
$(document).ready(function(){
    
});

//Vanilla Js
document.addEventListener('DOMContentLoaded', () => {

});
//jQuery
$('.menu').addClass('active');
$('.menu').removeClass('active');

//Vanilla Js
document.querySelector('.menu').classList.add('active');
document.querySelector('.menu').classList.remove('active');

 

속성 변경

//jQuery
$('input:checkbox[name=theme_change]').attr('checked', 'checked');

//Vanilla JS
var theme_chage = document.querySelector('input:checkbox[name=theme_change]');
theme_chage.setAttribute('checked', 'checked');

 

Works의 다른 글

Menu