JQuery는 javascript를 미리 더 쉽게 작성해 둔 것이며, 라이브러리이다.
javascript로도 충분히 기능을 구현할 수 있지만 코드가 복잡하고, 브라우저간 호환성 문제 등등.. 발생할 수 있기 때문에 사용한다.
JQuery 사용 방법
위의 코드를
head 태그 사이에 넣어주면 사용할 수 있다.
이전 블로그에서 했던 나만의 추억앨범과 스파르타 플릭스에 JQuery를 적용할 것이다.
1. 추억앨범 alert 기능 사용해보기
추억 저장하기 버튼에 onclick 기능 추가
<button onclick="openclose()">추억 저장하기</button>
script 태그를 만들고 onclick에 대한 function 만들어주기
alert 추가해서 클릭시 알람테스트
<script>
function openclose(){
alert('안녕');
}
</script>
2. toggle기능 사용해보기
mypostbox div태그에 id = "postingbox" 추가
<div class="mypostbox" id = "postingbox">
<script>
function openclose(){
$('#postingbox').toggle();
}
</script>
지존의 alert를 지워주고 $('#아이디값')으로 postingbox 태그지정 여기서 주의할점은 태그 넣을때 #꼭 넣기!
추억 저장하기 버튼을 눌러주면 포스팅 박스가 사라진다.
3. 카드 추가해보기
body 부분 mypostobx 클래스 태그 id="postingbox" 추가하기
아래의 각각 from-floating 클래스 div태그에 대한 id 넣기
id="image"
id="title"
id="content "
id="date"
클래스 mybtn div의 onclick 생성
<div class="mybtn">
<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>
완성 코드
<div class="mypostbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="앨범 이미지">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="앨범 제목">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="content " placeholder="앨범 내용">
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="앨범 날짜">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
scrip태그 사이에 makeCard 함수 생성
각각 이미지, 제목, 내용, 날짜에 대한 데이터를 저장할 변수설정
temp_html 생성하여 `(땀)`(땀) 안에 mycard 클래스 div에서 col클래스 div부분 복사 후 붙여 넣어주기
<div class="col">
<div class="card h-100">
<img
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
이후 생성해둔 변수 태그하기 이때 변수는 #없이 그냥 사용해도 된다.
.val(): 데이터 값을 가저오는 메소드이다.
function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
<div class="card-body"
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
</div>`
$('#card').append(temp_html);
}
원하는 이미지 주소와 각종 내용 기입
기록하기 버튼 클릭!
실행 화면
JQuery를 배우고 처음 적용해보니 직관적이라 신기한 부분이 많다. 이후 스파르타 플릭스에도 적용해서 나의 지식으로 만들것이다.
