jQuery로 HTML 요소의 클래스 조작하기

by

jQuery는 웹 개발에서 HTML 요소의 클래스를 조작하는 데 매우 유용한 도구입니다. 클래스를 추가, 제거, 토글하고, 존재 여부를 확인하는 다양한 함수를 제공합니다. 이 블로그 포스팅에서는 jQuery의 클래스 관련 함수와 예제를 살펴보겠습니다.


1. 클래스 추가하기: addClass()

HTML 요소에 클래스를 추가하려면 addClass() 함수를 사용합니다. 이 함수는 선택한 요소에 하나 이상의 클래스를 추가합니다.

// 단일 클래스 추가
$("p").addClass("highlight");

// 여러 클래스 추가
$("div").addClass("bg-color text-bold");


2. 클래스 제거하기: removeClass()

HTML 요소에서 클래스를 제거하려면 removeClass() 함수를 사용합니다. 이 함수는 선택한 요소에서 하나 이상의 클래스를 제거합니다.

// 단일 클래스 제거
$("p").removeClass("highlight");

// 여러 클래스 제거
$("div").removeClass("bg-color text-bold");


3. 클래스 토글하기: toggleClass()

HTML 요소에서 클래스를 토글(추가 또는 제거)하려면 toggleClass() 함수를 사용합니다. 두 번째 매개변수로 true를 전달하면 클래스를 추가하고, false를 전달하면 클래스를 제거합니다.

// 클래스 토글 (추가 또는 제거)
$("p").toggleClass("highlight");

// 클래스 추가
$("div").toggleClass("bg-color", true);

// 클래스 제거
$("span").toggleClass("text-italic", false);


4. 클래스 존재 여부 확인하기: hasClass()

특정 클래스가 HTML 요소에 존재하는지 확인하려면 hasClass() 함수를 사용합니다. 이 함수는 true 또는 false를 반환합니다.

if ($("p").hasClass("highlight")) {
  // 클래스가 있는 경우
} else {
  // 클래스가 없는 경우
}


5. 클래스 교체하기: replaceClass()

HTML 요소에서 클래스를 다른 클래스로 교체하려면 replaceClass() 함수를 사용합니다.

// "old-class" 클래스를 "new-class" 클래스로 교체
$("div").replaceClass("old-class", "new-class");


jQuery의 클래스 관련 함수들은 HTML 요소의 동적인 스타일 변경과 클래스 조작을 효과적으로 수행하는 데 큰 도움이 됩니다. 이러한 함수들을 적절히 활용하면 웹 페이지를 보다 동적으로 만들 수 있으며, 사용자 경험을 향상시키는 데 기여할 수 있습니다.



Leave a Comment