티스토리 뷰
JQuery는 HTML 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리다.
document.getElementById("element").style.display = "none";$('#element').hide();
예를 들면 위의 자바스크립트의 코드를 Jquery를 사용해 짧게 나타낼 수 있는 것이다.
이런 Jquery를 사용하기 위해서는 사전에 '임포트'를 해야 한다
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>위의 코드는 임포트 코드이다.
css와 마찬가지로, Jquery를 쓸 때에도 대상을 지정해야 조작이 가능하다.
<div class = "mypost" id = "post-box">css는 class를 사용했다면, Jquery는 id를 사용해 태그를 한다.(<body></body> 안)
Jquery의 몇 가지 기능들을 둘러보자.
$('#post-box').show()
$('#post-box').hide()처음으로 살펴볼 것은 show, hide이다. 이것들을 사용하면 원하는 요소들을 나타내거나 숨길 수 있다.
function openbox() {
$("#post-box").show()
}
function closebox() {
$('#post-box').hide()
}버튼에 onclik을 사용해서 위에서 정의한 openbox()와 closebox() 함수를 작동시킨다.
<button onclick = "openbox()">❤️ 영화 기록하기 ❤️</button><button onclick = "closebox()" type="button" class="btn btn-light">닫기</button>
다음은 temp_html이다.
temp_html을 사용할 때 문자열은 `(백 틱)을 사용한다. 이는 문자열을 html의 형식으로 변환해주는 방법이다.
let temp_html = `<button>나는 버튼이다</button>`
$('#card-box').append(temp_html)
tip) script 함수 작업할 때 alert 또는 console.log를 사용해서 확인하며 작업하면 좋다.
'[학습일지] > Python' 카테고리의 다른 글
| [학습일지] 웹개발 2-8 ~ 2-9 (서버-클라이언트 통신 이해하기, API, Ajax) (0) | 2022.07.05 |
|---|---|
| [학습일지] 웹개발 2-6 ~ 2-7 (JQuery 연습하기) (0) | 2022.07.05 |
| [학습일지] 웹개발 (방명록 만들어보기) (0) | 2022.07.01 |
| [학습일지] 웹개발 1-14 ~ 1-20 (javascript 기초) (0) | 2022.07.01 |
| [학습일지] 웹개발 1-13 (별점 탭 만들기) (0) | 2022.06.30 |