본문 바로가기
FE/JavaScript

[JavaScript] JQuery 사용법

저녕호 2024. 3. 27. 12:40

 

 

 

 

 

JQuery 사용법

JQuery

 

- jQuery CDN 사이트 -

 

jQuery CDN

jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac

releases.jquery.com

구글에 jquery CDN - minified 클릭
스크립트 코드가 나오는데 위 코드를 html 파일에 붙여넣으면 jQuery 적용 끝
위 : CDN 으로 적용, 아래 : jQuery 파일을 다운로드 받아 프로젝트 내에 저장하여 사용
jquery 다운로드 받은 모습

 

 

 

 

 

 

 

 

 

사용 예시 1

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
      // JQuery 구문은 $ 로 시작한다
      $(document).ready(function () {
        $(".hide").click(function () {
          // hide 라는 클래스를 가진 태그가 클릭되면 함수를 시작
          $("p").hide();
        });
        $(".show").click(function () {
          // show 라는 클래스를 가진 태그가 클릭되면 함수를 시작
          $("p").show();
        });
      });
    </script>
  </head>
  <body>
    <p>이벤트 처리</p>
    <button class="hide">메세지 삭제</button>
    <button class="show">메세지 보기</button>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

사용 예시 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      var n = 0;
      $().ready(function () {
        $("div.out").mouseenter(() => {
          $("p").first().html("<b>마우스 포인트 들어옴</b>");
          $("p").last().text(++n);
        });

        $("div.out").mouseleave(() => {
          $("p").first().html("<b>마우스 포인트 나감</b>");
          $("p")
            .last()
            .text("최종 횟수 : " + n);
        });
      });
    </script>
    <style>
      .out {
        width: 200px;
        height: 100px;
        border: 1px solid black;
        text-align: center;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <p>마우스 이벤트</p>
      <p>0</p>
    </div>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

 

사용 예시 3

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      var cnt = 1;
      var myVar;
      $(() => {
        $("img").mousedown(() => {
          myVar = setInterval(imgFunc, 100);
          console.log("txt : " + cnt);
        });
        $("img").mouseup(() => {
          clearInterval(myVar);
        });
      });
      const imgFunc = () => {
        if (cnt == 10) cnt = 1;
        $("#img").attr("src", "resources/images/p" + cnt + ".png");
        cnt++;
      };
    </script>
  </head>
  <body>
    <div align="center">
      <img
        id="img"
        src="resources/images/p1.png"
        width="100px"
        height="100px"
      />
    </div>
  </body>
</html>

사용한 이미지 파일

코드 실행 ( 마우스 클릭 유지시 달림, 마우스 클릭하지 않으면 멈춤 )
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27
[JavaScript] confirm, open  (0) 2024.03.27
[JavaScript] 자바스크립트로 비밀번호 유효성 검사  (0) 2024.03.27

'FE/JavaScript' Related Articles

티스토리툴바