jQuery의 클래스 선택자 (“.클래스명”)

jQuery의 클래스 선택자인 (“.클래스명”)는 특정한 클래스를 가진 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 HTML 요소 중에서 특정한 클래스를 가진 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 특정 클래스를 가진 요소에 스타일 적용하기

<div class="box red">빨간 상자</div>
<div class="box blue">파란 상자</div>
<div class="box green">초록 상자</div>

$(".red").css("color", "red");

이 예제는 클래스가 "red"인 요소에 텍스트 색상을 빨간색으로 변경합니다.

예제 2: 클래스를 조합하여 요소 선택하기

<div class="item active">활성 항목</div>
<div class="item">비활성 항목</div>

$(".item.active").addClass("highlight");

이 예제는 클래스가 "item"과 "active" 두 가지를 동시에 가진 요소를 선택하여 "highlight" 클래스를 추가합니다.

예제 3: 특정 부모 요소 안의 클래스 선택하기

<div class="parent">
    <div class="child">자식 요소 1</div>
    <div class="child">자식 요소 2</div>
</div>

$(".parent .child").addClass("highlight");

이 예제는 클래스가 "parent"인 요소 안에 있는 클래스가 "child"인 요소를 선택하여 "highlight" 클래스를 추가합니다.

jQuery의 클래스 선택자를 활용하면 특정한 클래스를 가진 요소를 쉽게 선택하여 스타일이나 동작을 조작할 수 있습니다.