JavaScript ➡️ JQuery

2021-11-05 최대 1 분 소요

JQuery?🍍

제이쿼리? 그게 뭘까

앞선 게시글에서 쌩JS의 엄청난 메서드길이를 보았다. 이것을 해결하기위해 제이쿼리가 나오게됐다. 짧고 간단하며 직관적이다. 꼭 배우자 근데 요즘은 jQuery의 상위버전인 React를 쓴다던데... 하지만 여전히 JQuery로 개발된 웹이 많기에 배워야한다.

index.html

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

JQuery CDN에서 호스팅된걸 갖다 쓰자. minified는 공백을 제거한것이다. 닫히는 body태그의 바로 위에 놔두는것이 정석이다.

index.html

  <body>

    <h2 class="hi">ㅎㅇ</h2>  //안녕하세요

    <script>

      $(".hi").html("안녕하세요");

    </script>

  </body>

‘JQuery로 바꾸기’

$(‘’) ➡️ 안은 css와 똑같이 .name(클래스이름) #name(아이디이름)으로 넣어주면 된다. .html .text

index.html

 <body>
    <button class="aa">ㅎㅎㅎ</button>
    <button class="aa">ㅎㅎㅎ</button>
    <button class="aa">ㅎㅎㅎ</button>  // '안녕'
    <button class="aa">ㅎㅎㅎ</button>

    <script>
      $(".aa").eq(2).text("안녕");
    </script>
  </body>

‘JQuery로 바꾸기(2)’

eq를 사용하면 배열의 몇번째 인덱스를 사용하듯이 선택할 수 있다.

index

  <body>
    <button class="aa">누르면 사라짐</button> // 없어진다~~

    <script>
      $(".aa").on("click", () => {
        $(".aa").fadeOut();
      });
    </script>
  </body>

‘JQuery로 addEventListener’

제이쿼리에서는 addEventListener ➡️ on 으로 표현한다. 그 안의 문법은 쌩JS랑 같다. 또한 fadeOut, show 등등 다양한 애니매이션을 사용할 수 있다.

index

  <body>
    <button class="aa">누르면 움직임</button>

    <script>
      $(".aa").click(() => {
        $(".aa").animate({ marginLeft: "100px" });
      });

    </script>

  </body>

‘JQuery로 animate’

animate({CSS},동작시간) 이 기능은 간단한 css는 유용할 것 같으나 복잡한 명령은 느리다. 그러므로 css의 Transition을 사용하자 (with transform)

~제이쿼리의 문법은 많으므로 나머지는 필요할때마다 검색을 통해 알아내자~

Twitter Facebook LinkedIn

Lee Jun Hyeok

JavaScript ➡️ JQuery

JQuery?🍍

공유하기