jQuery?
- HTML 요소들을 조작하는 자바스크립트를 미리 더 쉽게 작성해둔 것, 라이브러리
// Javascript
document.getElementById('hello').innerHTML = '안녕';
// jQuery
$('#hello').html('안녕');
사용법
- jQuery CDN을 HTML head 태그 사이에 import 해줘야 쓸 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>제이쿼리 임포트 하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
</script>
<body>
</body>
</html>
🙋♀️ CDN이란??
- Contents Delivery Networt ⚡️
- 지연을 최소화하면서 사용자에게 콘텐츠를 배포하는 데 도움이 되는 서버 및 해당 데이터 센터의 지리적으로 분산된 네트워크이다.
- https://www.cdnetworks.com/ko/what-is-a-cdn/
🧐 제이쿼리 연습하기
1) 리스트 자료형으로 연습하기
- fruits 리스트 나열하기
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let fruits = ["apple", "banana", "lemon"];
fruits.forEach((i) => {
let fruit_html = `<p>${i}</p>`;
$("#fruitsArr").append(fruit_html);
});
}
</script>
<body>
<h1>fruits list</h1>
<button onclick="checkResult()">Check!!</button>
<div id="fruitsArr"></div>
</body>
</html>🔍 결과
- Check!! 버튼 누르면 fruits 배열 안에 요소들이 출력되는걸 확인할 수 있다.
2) 딕셔너리 자료형으로 연습하기
- 수영이가 좋아하는 과일은?
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let favFruit = { name: "수영", fruit: "pineapple" };
$("#sooFavFruit").text(favFruit["fruit"]);
}
</script>
<body>
<h1>Favoite fruits list</h1>
<button onclick="checkResult()">Check!!</button>
<p id="sooFavFruit"></p>
</body>
</html>🔍 결과
3) 리스트 - 딕셔너리 자료형으로 연습하기
- 사람들이 좋아하는 과일을 결과물로 출력하기
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let favFruitArr = [
{ name: "영수", fruit: "apple" },
{ name: "철수", fruit: "banana" },
{ name: "수영", fruit: "pineapple" },
{ name: "수철", fruit: "grape" },
];
favFruitArr.forEach((i) => {
// 변수로 지정해 쉽게 쓰기
let name = i["name"];
let fruit = i["fruit"];
let temp_html = `<p>${name}: ${fruit}</p>`;
$("#fruitsArr").append(temp_html);
});
}
</script>
<body>
<h1>Favoite fruits list</h1>
<button onclick="checkResult()">Check!!</button>
<div id="fruitsArr"></div>
</body>
</html>🔍 결과
