우당탕탕 개발일지
제이쿼리 적용하는 방법, JQuery로 토글 구현하기 본문
제이쿼리란?
누군가가 만들어둔 JS 코드를 그냥 가져다가 쓰는 것
그렇기 때문에 import가 필요하다(마치 파이썬에서 import matplotlib.pyplot as plt 하는 것처럼)
제이쿼리를 적용하는 방법
<head>와 </head> 사이에 아래 태그를 넣으면 끝!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>코드를 적다보면 <head>와 </head> 사이에 많은 태그들이 있는데,
위치는 상관없다. 강의에서는 <head>안에서 <title>과 <link>사이에 넣었다.
제이쿼리로 하고자 하는 것
제이쿼리를 통해 버튼을 클릭하여 PostBox 열고 닫는 기능을 구현하고자 한다.
일단 버튼에 onclick="openclose()"라는 함수를 적용하여 클릭시 openclose() 함수가 실행되도록 한다.
<body>
<div class="mytitle">
<h1>My Album</h1>
<button onclick = "openclose()">Keep Good Memories</button>
</div>openclose() 함수를 제대로 적기 전에 버튼을 클릭하였을 때 함수가 잘 작동되는지 아래의 간단한 함수로 확인한다.
<script>
function openclose() {
alert("안녕");
}
</script>실제 함수는 다음과 같다.
<script>
function openclose() {
$('#postingbox').toggle();
}
</script>제이쿼리에 내장되어 있는 .toggle() 함수를 이용해서 postingbox가 나타났다가 사라지게 한다.
마무리
1. 제이쿼리를 이용하면 간편한데, <head> 태그 안에<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 넣으면 된다.
2. <style> 태그 아래에 <script> 태그를 만들고, 이 안에 함수들을 넣는다.
3. 특정 버튼을 클릭했을 때 특정 함수가 작동되게 하려면 태그에 onclick="함수명()" 을 넣으면 된다.
'웹개발' 카테고리의 다른 글
| 제이쿼리 이용해서 새로운 카드를 생성하는 코드 짜기 (0) | 2024.07.12 |
|---|---|
| 자바스크립트에서 변수 표시할 때 ${}와 $()의 차이 (0) | 2024.07.12 |
| [스프링 입문 김영한 인프런] 섹션4 . 스프링 빈과 의존관계 - 자바 코드로 직접 스프링 빈 등록하기 (0) | 2023.10.12 |
| [스프링 입문 김영한 인프런] 섹션4 . 스프링 빈과 의존관계 - 컴포넌트 스캔과 자동 의존관계 설정 (0) | 2023.10.11 |
| [스프링 입문 김영한 인프런] 섹션 3. 회원 관리 예제 - 회원 서비스 테스트 (0) | 2023.10.11 |
'웹개발' Related Articles
more
