제이쿼리는 선택자,함수를 통해서 간단하게 조작할 수 있다는 장점이 있다.

기본 형식

$('선택자').함수(function(){
			$('선택자').메서드();
	});

$('.btn').click(function(){
			$('.modal').fadeln();
	});

<aside> <img src="/icons/window_lightgray.svg" alt="/icons/window_lightgray.svg" width="40px" /> 선택자 종류 CSS 클래스 선택 CSS 아이디 선택자 CSS 태그 선택자 this

</aside>

<aside> <img src="/icons/window_lightgray.svg" alt="/icons/window_lightgray.svg" width="40px" /> 필수 함수 종류(이벤트 리스너 역할) click mouseenter mouseleave

</aside>

<aside> <img src="/icons/window_lightgray.svg" alt="/icons/window_lightgray.svg" width="40px" /> 필수 메서드 종류 √ sideDown() √ slideUp() √ stop() √ show() √ hide() √ fadeIn() √ fadeOut() √ addClass() √ removeClass() √ children() √ siblings()

</aside>

            보이기 감추기 효과 메서드
.show() 선택요소 보이기
.hide() 선택요소 감추기
.toggle() 선택요소 보이기/감추기
.slideDown() 선택요소 서서히 보이기
.slideUp() 선택요소 서서히 감추기
.slideToggle() 선택요소 서서히 보이기/감추기

기본 예제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box1 {
        width: 200px;
        height: 200px;
        background-color: aqua;
      }

      .btn {
        width: 100px;
        height: 50px;
        background-color: antiquewhite;
      }
    </style>

    <script src="<https://code.jquery.com/jquery-3.6.3.min.js>"></script>
    <!-- <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>"></script> -->
    <script>
      //$(' ') :팩토리 함수,선택자로 선택한 엘리먼트를 반환 한다.
      // 이벤트 리스너 -> 이벤트 핸들러(익명,콜백함수)
      $("document").ready(function () {
        $("#hide-btn").click(function () {
          $("#box1").hide();
        });

        $("#show-btn").click(function () {
          $("#box1").show();
        });
      });
    </script>
  </head>
  <body>
    <div class="btn" id="hide-btn">감추기</div>
    <div class="btn" id="show-btn">보이기</div>

    <div id="box1">box1</div>
  </body>
</html>

image.png