[Dseok의 코딩스터디] javascript & jquery .hasClass() 한방에 끝내기 | 개념, 실용 예제 10가지

📌 .hasClass()란?

jQuery.hasClass() 메서드는 선택한 요소에 특정 클래스가 있는지 확인하는 기능을 합니다.
주로 CSS 스타일 적용 여부를 체크하거나, 특정 동작을 조건부로 실행할 때 활용됩니다.

✅ 기본 문법

$(selector).hasClass("클래스명");

• selector : 클래스 여부를 확인할 요소
• 클래스명 : 확인할 클래스 이름
• 반환값 : true(클래스가 있음), false(클래스가 없음)

 

📌 .hasClass() 실용 예제 10가지

1️⃣ 특정 요소가 클래스 포함 여부 확인

if($("#box").hasClass("active")) {
    console.log("#box에 active 클래스가 있습니다.");
} else {
    console.log("#box에 active 클래스가 없습니다.");
}

✅ 설명: #box 요소가 active 클래스를 가지고 있는지 확인하고 콘솔에 출력합니다.

 

2️⃣ 버튼 클릭 시 클래스 존재 여부 체크

$("#checkBtn").on("click", function() {
    if($("#box").hasClass("highlight")) {
        alert("highlight 클래스가 있습니다!");
    } else {
        alert("highlight 클래스가 없습니다!");
    }
});

✅ 설명: 버튼을 클릭하면 #box 요소에 highlight 클래스가 있는지 여부를 확인합니다.

 

3️⃣ 특정 클래스가 있는 경우 스타일 변경

$(".item").each(function() {
    if($(this).hasClass("selected")) {
        $(this).css("background-color", "yellow");
    }
});

✅ 설명: .item 요소 중 selected 클래스를 가진 요소만 배경색을 노란색으로 변경합니다.

 

4️⃣ 클래스가 없으면 추가, 있으면 제거 (토글 기능)

$("#toggleBtn").on("click", function() {
    if($("#target").hasClass("active")) {
        $("#target").removeClass("active");
    } else {
        $("#target").addClass("active");
    }
});

✅ 설명: #toggleBtn 버튼을 클릭하면 #target의 active 클래스를 추가 또는 제거합니다.

 

5️⃣ 특정 클래스가 없을 때만 추가하기

$("#addClassBtn").on("click", function() {
    if(!$("#box").hasClass("new-class")) {
        $("#box").addClass("new-class");
    }
});

✅ 설명: #box 요소에 new-class 클래스가 없을 경우에만 추가합니다.

 

6️⃣ 입력 필드가 특정 클래스를 가지면 경고 메시지 출력

$("#submitBtn").on("click", function() {
    if($("#inputField").hasClass("error")) {
        alert("입력 필드에 오류가 있습니다. 다시 확인하세요.");
    }
});

✅ 설명: 입력 필드(inputField)에 error 클래스가 있으면 경고 메시지를 띄웁니다.

 

7️⃣ 특정 클래스를 가진 항목만 선택하여 숨기기

$(".product").each(function() {
    if($(this).hasClass("sold-out")) {
        $(this).hide();
    }
});

✅ 설명: sold-out 클래스를 가진 .product 항목을 자동으로 숨깁니다.

 

8️⃣ 네비게이션 메뉴에서 활성화된 항목 찾기

let activeMenu = $(".menu-item").filter(function() {
    return $(this).hasClass("active");
});
console.log("현재 활성화된 메뉴: ", activeMenu.text());

✅ 설명: .menu-item 중 active 클래스를 가진 항목을 찾아 콘솔에 출력합니다.

 

9️⃣ 특정 클래스를 가진 요소만 클릭 이벤트 적용

$(".btn").on("click", function() {
    if($(this).hasClass("disabled")) {
        alert("이 버튼은 비활성화되어 있습니다.");
        return false;
    }
    alert("버튼이 정상적으로 클릭되었습니다.");
});

✅ 설명: .disabled 클래스를 가진 버튼은 클릭을 방지합니다.

 

🔟 특정 클래스가 있는 경우 텍스트 변경

$("#changeTextBtn").on("click", function() {
    if($("#message").hasClass("warning")) {
        $("#message").text("⚠ 경고 상태입니다!");
    } else {
        $("#message").text("✔ 정상 상태입니다!");
    }
});

✅ 설명: #message 요소가 warning 클래스를 가지면 경고 메시지를 표시합니다.

📌 마무리 🎯

• .hasClass()는 특정 요소에 특정 클래스가 존재하는지 확인하는 중요한 기능
• CSS 변경, 이벤트 제어, UI 동적 변경 등에 유용하게 활용 가능
• 조건문과 함께 사용하면 더욱 다양한 기능 구현 가능

🚀 이제 .hasClass()를 활용해 동적인 웹 페이지를 만들어 보세요!