제이쿼리 적용하는 방법, JQuery로 토글 구현하기

웹개발

하고파 2024. 7. 12. 09:16

제이쿼리란?

누군가가 만들어둔 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="함수명()" 을 넣으면 된다.