[javascript/jQuery] javascript와 jQuery 비교 정리.

jQueyr와 같은 여타 다른 JS라이브러리를 사용하지 않고 javascript만 사용하는 걸 pure javascript 혹은 vanillaJS 혹은 plain javascript라고 부른다.

 

요즘 순수 자바스크립트만으로 개발할 경우가 생겨서 이참에 자주 사용하는 코드들을 정리해봤다.

 

$(document).ready(function() {
	console.log("jQuery document ready!");
});

document.addEventListener("DOMContentLoaded", function(event) {
	console.log("javascript document ready!");
});


// 1. 클래스명으로 값 가져오기.
// jQuery
$(".someClassName").val();

// javascript
document.getElementsByClassName("someClassName").value;
document.querySelector(".someClassName").value;


// 2. 클래스명으로 텍스트 가져오기.
// jQuery
$(".someClassName").text();

// javascript
document.getElementsByClassName("someClassName").innerHTML;
document.querySelector(".someClassName").innerHTML;


// 3. 아이디로 값 가져오기.
// jQuery
$("#someId").val();

// javascript
document.getElementById("someId").value;
document.querySelector("#someId").value;


// 4. 아이디로 텍스트 가져오기.
// jQuery
$("#someId").text();

// javascript
document.getElementById("someId").innerHTML;
document.querySelector("#someId").innerHTML;


// 5. selectbox change 이벤트
// jQuery
$(".selectBoxClassName").change(function() {
	let selectedValue = $(this).val();
	let selectedText = $(this).text();

});

// javascript
let someSelectBox = document.querySelector("#selectBoxId");
someSelectBox.addEventListener("change", function(){
	let selectedValue = someSelectBox.value;
	let selectedText = someSelectBox.text;
});


let tableTbody = document.querySelector("#tableTbody");
let prevSelectedValue = "";
tableTbody.addEventListener("click", function(e){
	if(e.target && e.target.className == "selectBoxClassName") { // 동적으로 생성된 태그에 이벤트를 부여하고자 할 때는 부모 element에서 찾아야 함.
		prevSelectedValue = e.target.options[e.target.selectedIndex].value;
		console.log("셀렉트박스 변경 전 value: " + prevSelectedValue);
	}
});

let tableTbody = document.querySelector("#tableTbody");
tableTbody.addEventListener("change", function(e){
	if(e.target && e.target.className == "selectBoxClassName") { // 동적으로 생성된 태그에 이벤트를 부여하고자 할 때는 부모 element에서 찾아야 함.
    	let element = e.target;
    	let selectBoxId = element.id;
    	let selectedValue = element.options[element.selectedIndex].value;
    	let selectedText = element.options[element.selectedIndex].text;
    }
});


// 6. selectbox value 값으로 select하기.
// jQuery
$("#selectBox").val("선택");

// javascript
document.querySelector("#someId").value = "선택";


// 7. forEach문
// jQuery
let dataList = ??? // json객체나 배열 등..
$(dataList).each(function(index, item){
	let someValue = item.key;
});

// javascript
dataList.forEach(function (item, index, array) {
	let someValue = item.key;
});