JQuery 기초
Javascript를 작성할 때 일일이 처음부터 작성하는 수고로움을 덜기 위해 JQuery라는 라이브러리를 사용한다고 한다.
미리 전문개발자들이 짜놓은 코드를 가져와서 사용하는 것이기때문에 사용하기 전 미리 import하는 코드를 작성해야한다. 이 때, 이 임포트 코드는 head에 넣는다.
예를 들어,
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>CSS에서는 class값을 선택자로 불러온다면 JQuery는 id값을 불러온다.
HTML의 태그에 id를 적어준 뒤,
$('#id값').empty();
$('#id값').append();
$('#id값').text();등을 사용할 수 있다.
이때 append나 text 뒤의 괄호에 넣을 값을 입력하면 되는데, 임시 html을 만들어 이를 불러올 수도 있다.
html 변수 만들기
html 변수를 만들 때는 백틱(`)을 사용하여 만들 수 있다.
let temp_html = `<p>'사과'</p>`이런 식이다.
임시 html 안에 변수를 넣을 때는 ${}안에 넣는다.
예를 들어,
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})