코딩이 즐겁다

jquery 란, 제이쿼리 사용 방법 갓벽 가이드 본문

Jquery

jquery 란, 제이쿼리 사용 방법 갓벽 가이드

코즐 2025. 2. 27. 20:00
반응형

 

 

  • jQuery는 JavaScript를 더 쉽게 쓰게 해주는 라이브러리
  • HTML 조작, 이벤트 처리, 애니메이션, AJAX를 간단하게 구현 가능
  • 예전엔 필수였지만, 최근엔 순수 JavaScript(ES6+)를 더 많이 사용

 

 

jQuery란?

jQuery는 JavaScript 라이브러리로, 웹 개발을 쉽게 하기 위해 만들어졌습니다. 적은 코드로 더 많은 기능을 구현하는 게 핵심 목표입니다. HTML 요소 조작, 이벤트 처리, 애니메이션, Ajax 등을 쉽게 구현할 수 있습니다.

 

 

주요 특징

  • 적은 코드 → 복잡한 JavaScript 코드를 간단하게 줄여줌.
  • HTML 조작 간편 → document.querySelector 없이도 요소 선택 가능.
  • 이벤트 처리 쉬움 → onclick, addEventListener 없이도 이벤트 바인딩 가능.
  • Ajax 쉽게 사용 → XMLHttpRequest 없이 AJAX 요청 가능.
  • 브라우저 호환성 높음 → 다양한 브라우저에서 안정적으로 동작.

 

 

jQuery 로드 방법

jQuery를 사용하려면 먼저 jQuery 라이브러리를 포함해야 합니다.

💡 CDN 방식

CDN 방식 : HTML 파일의 <head>나 <body> 태그 안에 아래 코드를 추가하면 됩니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

 

기본 문법

$(document).ready(function() {
    alert("jQuery가 실행되었습니다!");
});
  • "$" 기호는 jQuery 객체를 나타내는 기호입니다. 
  • $(document).ready(...)는 HTML 문서가 로드된 후 실행할 코드를 정의합니다.

 

 

jQuery 주요 기능

반응형

HTML 요소 선택

JavaScript의 document.querySelector 없이 간단하게 요소 선택이 가능합니다.

✅ 예제 코드:

// ID 선택자
$("#myId").text("Hello!");

// 클래스 선택자
$(".myClass").css("color", "red");

// 태그 선택자
$("p").hide();
  • $("#id") → ID 선택
  • $(".class") → 클래스 선택
  • $("tag") → 태그 선택

 

이벤트 처리

JavaScript의 addEventListener 없이 쉽게 이벤트 등록이 가능합니다.

✅ 예제 코드:

// 클릭 이벤트
$("#btn").click(function() {
    alert("버튼이 클릭됨!");
});

// 마우스 오버 이벤트
$("#box").mouseenter(function() {
    $(this).css("background-color", "yellow");
});
  • .click() → 클릭 이벤트
  • .mouseenter() → 마우스가 요소에 올라갔을 때

애니메이션 효과

JavaScript의 setTimeout, setInterval 없이도 간단하게 애니메이션 구현이 가능합니다.

✅ 예제 코드:

// 1초 동안 점점 사라짐
$("#box").fadeOut(1000);

// 2초 동안 크기 변경
$("#box").animate({ width: "300px", height: "300px" }, 2000);
  • .fadeOut() → 서서히 사라짐.
  • .animate() → CSS 속성을 애니메이션 효과로 변경

 

AJAX 요청 (비동기 통신)

JavaScript의 fetch나 XMLHttpRequest 없이도 간단하게 서버 요청이 가능합니다.

✅ 예제 코드:

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    type: "GET",
    success: function(data) {
        console.log("데이터 받음:", data);
    },
    error: function() {
        console.log("오류 발생!");
    }
});
  • $.ajax({}) → AJAX 요청
  • success → 요청 성공 시 실행
  • error → 요청 실패 시 실행

 

jQuery를 써야 할까?

  • 사용하면 좋은 경우
    • 기존 레거시 프로젝트 유지보수
    • 빠르게 개발해야 하는 경우
    • 브라우저 호환성이 중요한 경우
  • 사용하지 않는 게 좋은 경우
    • 최신 웹 개발(React, Vue, Vanilla JS)
    • JavaScript(ES6+)를 충분히 사용할 수 있는 경우

 

반응형
저작자표시 비영리 변경금지

'Jquery' 카테고리의 다른 글

[jQuery] $(document).ready() vs window.onload 차이 갓벽 가이드  (13) 2025.03.10
[jQuery] $(document).ready() 개념과 사용법 갓벽 가이드  (15) 2025.03.10
[jQuery] 마우스 더블 클릭 이벤트의 모든 것 갓벽 가이드  (18) 2025.03.09
[jQuery] click 이벤트 활용의 모든 것 갓벽 가이드  (19) 2025.03.08
'Jquery' Related Articles more