[자바스크립트(javascript)] javascript와 jQuery

자료
https://www.bing.com/ck/a?!&&p=996735a7b52725c7JmltdHM9MTY2ODk4ODgwMCZpZ3VpZD0xZjk1N2NjMC1jZTdkLTZhOTEtMzE0Yi03NmE4Y2E3ZDY5MmEmaW5zaWQ9NTE2Ng&ptn=3&hsh=3&fclid=1f957cc0-ce7d-6a91-314b-76a8ca7d692a&psq=jQuery%ec%99%80+%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8&u=a1aHR0cHM6Ly96ZXJvLWdyYXZpdHkudGlzdG9yeS5jb20vMzIx&ntb=1

$(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;
});