[JS] JQuery 찍먹

JQuery란?

HTML 요소들을 조작하는 DOM을 더 쉽게 쓸 수 있도록 해둔 라이브러리.

요즘 새로 개발할 때에는 사용을 잘 안하는 추세이지만, 아직 사용하는 곳도 있다고 한다.

미리 작성된 JavaScript로 Import 시켜야 사용이 가능

JQuery Import

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

JQuery 사용하기

셀렉터의 기본 틀은 $() 형태
id의 경우 $('#id'); 을 사용
class의 경우 $('.class_name'); 을 사용

JQuery 사용 예시

let c = [
	{'name':'GDORI', 'age':29},
	{'name':'GSOONI', 'age':31}
]

$('#old').text(c[1]['age'])

리스트-객체형의 변수에서 쥐순이의 나이를 받아 old라는 ID를 가진 오브젝트에 표기

function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	$('#q1').empty()
	fruits.forEach((a)=>{
		let temp_html = `<p>${a}</p>`
		$('#q1').append(temp_html)
	})
}

백틱(`)을 사용하면 문자열 안에 변수를 넣을 수 있다.