jQuery란? 기본 개념과 사용법, 코드 예제로 알아보기

제이쿼리(jQuery)는 자바스크립트 라이브러리(Javascript library)로, Html 문서 조작, 이벤트 처리, 애니메이션 등 다양한 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이번 포스팅에서는 jQuery의 기본 개념과 사용법을 코드 예제를 곁들여서 자세히 살펴보도록 하겠습니다.

 

jQuery란? 기본 개념과 사용법, 코드 예제로 알아보기

---

jQuery의 라이브러리 로딩

jQuery 라이브러리를 사용하기 위해서는 먼저 jQuery 라이브러리 파일을 HTML 문서에 로딩해야 합니다. jQuery 라이브러리 파일은 jQuery 공식 웹사이트에서 다운로드하거나, CDN(Content Delivery Network)에서 제공하는 파일을 사용할 수 있습니다.

 

HTML 예시

<!-- 로컬 파일 로딩 예시 -->
<script src="jquery.js"></script>

<!-- CDN 파일 로딩 예시 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

선택자(Selector)

Query를 사용하여 HTML 요소를 선택하기 위해서는 선택자(selector)를 사용합니다. 선택자는 CSS 선택자와 동일한 문법을 사용합니다.

 

Javasript 예시

// id가 "myDiv"인 요소 선택 예시
$("#myDiv")

// 클래스가 "myClass"인 요소 선택 예시
$(".myClass")

// 태그 이름이 "p"인 요소 선택 예시
$("p")

 

 

이벤트 처리

jQuery를 사용하게 되면, HTML 요소에 이벤트 처리를 쉽게 할 수 있습니다. 이벤트 처리를 위해서는 on() 메서드를 사용하게 됩니다.

 

Javascript 예시

// 클릭 이벤트 처리 예시
$("button").on("click", function() {
  alert("클릭 이벤트 발생");
});

// 마우스 오버 이벤트 처리 예시
$("p").on("mouseover", function() {
  $(this).css("background-color", "yellow");
});

 

HTML  문서 조작

jQuery를 사용하여 HTML 요소를 쉽게 조작할 수 있습니다. 예를 들어 아래와 같이 HTML 요소의 텍스트를 빠르게 변경할 수 있습니다.

 

// HTML 요소의 텍스트 변경 예시
$("p").text("변경할 텍스트");

 

HTML 요소의 속성값도 쉽게 변경할 수 있습니다.

// HTML 요소의 속성 변경 예시
$("img").attr("src", "change-image.jpg");

 

애니메이션

jQuery를 사용하여 애니메이션 효과를 적용할 수 있습니다. 예를 들어, 다음과 같이 HTML 요소를 서서히 사라지게 할 수 있습니다.

 

// HTML 요소를 서서히 사라지게 하는 예시
$("p").fadeOut("slow");

 

이 외에도 다양한 애니메이션을 jQuery를 사용하게 되면 매우 쉽게 생성하고 제어할 수 있습니다. 최근에는 jQuery의 인기는 하락세이긴 하지만 아직도 jQuery를 많이 사용하고 있으며, 아직도 많은 예제들이 jQuery로 만들어진 것들이 많기에 기본적으로 jQuery를 이해한 후 다른 프론트엔드 라이브러리를 이해하는 것이 좋습니다.