jQuery(제이쿼리)는 2006년에 처음 출시된 인기 있는 오픈 소스 자바스크립트 라이브러리입니다. jQuery는 자바스크립트 코드를 더 간단하고 쉽게 작성할 수 있도록 도와줍니다. 웹 페이지의 HTML 문서 탐색, 이벤트 처리, 애니메이션, AJAX 상호작용 등 여러 작업을 간소화하는 기능을 제공합니다.
jQuery의 주요 특징은 다음과 같습니다:
- 간단한 문법: jQuery는 복잡한 자바스크립트 코드를 짧고 간결하게 작성할 수 있게 해줍니다. 예를 들어, HTML 요소를 선택하고 조작하는 작업을 매우 쉽게 할 수 있습니다.
- 브라우저 호환성: jQuery는 다양한 웹 브라우저에서 일관되게 동작하도록 설계되었습니다. 이를 통해 개발자는 특정 브라우저에 대한 호환성 문제를 덜 걱정할 수 있습니다.
- AJAX 지원: jQuery는 AJAX를 쉽게 사용할 수 있는 기능을 제공합니다. 이를 통해 웹 페이지를 새로 고침하지 않고도 서버와 데이터를 주고받을 수 있습니다.
- 풍부한 플러그인 생태계: jQuery는 다양한 플러그인을 통해 기능을 확장할 수 있습니다. 커뮤니티에서 만들어진 수많은 플러그인을 통해 특정 작업을 손쉽게 처리할 수 있습니다.
- 애니메이션 효과: jQuery를 사용하면 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. CSS와 결합하여 웹 페이지의 디자인을 동적으로 만들 수 있습니다
1.CND
CDN(Content Delivery Network)을 통해 jQuery 라이브러리를 불러오는 스크립트 태그
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>자바스크립트 코드
let card = document.createElement("div"); div DOM을 만들고 setAttribute로 id랑 class를만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid black;
padding: 10px;
}
.card {
border: 1px solid lightgray;
box-shadow: 0 4px 4px 0 grey;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>반복문으로 리스트 만들기</h1>
<button onclick="render()">render</button>
<div class="box" id="outerBox">
</div>
<script>
//1. 그림그리기
function render(){
let el = document.querySelector("#outerBox");
for (let i = 1; i < 5; i++) {
el.append(makeCard(i));
}
}
//2, DOM 만들기
function makeCard(id){
let card = document.createElement("div");
card.setAttribute("class", "card");
card.setAttribute("id", "card-"+id);
card.innerHTML = `
<h3>제목${id} 입니다</h3>
<p>내용${id} 입니다</p>
<button onclick="del(${id})">삭제</button>
`;
return card;
}
function del(id){
let el = document.querySelector("#card-"+id);
el.remove();
}
</script>
</body>
</html>제이쿼리로 변환코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid black;
padding: 10px;
}
.card {
border: 1px solid lightgray;
box-shadow: 0 4px 4px 0 grey;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>반복문으로 리스트 만들기</h1>
<button onclick="render()">render</button>
<div class="box" id="outerBox">
</div>
<script>
// 1. 그림그리기
function render() {
for (let i = 1; i < 5; i++) {
$("#outerBox").append(makeCard(i));
}
}
// 2. DOM 만들기
function makeCard(id) {
return `<div id="card-${id}" class="card">
<h3>제목${id} 입니다</h3>
<p>내용${id} 입니다</p>
<button onclick="del(${id})">삭제</button>
</div>`;
}
function del(id) {
$(`#card-${id}`).remove();
}
</script>
</body>
</html>보기 편하게 바뀐모습을 확인할 수 있다
추가적으로 <button onclick="del(${id})">삭제</button> dom객체를 만들떄 이벤트 위임을 같이 해놔서 사용가능하다.
Share article
