[jQuery] 클래스 관련 메서드 알아보기

jQuery : 클래스 관련 메서드

제이쿼리에서 사용되는 클래스 관련 메서드에 대해 알아봅시다.

addClass() 메서드

요소에 class 속성을 추가한다.

실행 분류	형식
추가	$("div").addClass("클래스명");
콜백 함수	$("div").addClass(function(index, className) { 　// index는 각 div 요소의 index 0,1,2 　// className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가함. }); …… <div>내용1</div> <div>내용2</div> <div>내용3</div>

addClass() 메서드 : 예제 코드

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>addClass() 메서드<title> 
    <script src="jquery-3.3.1.min.js"></script> 
    <style> 
        * {
            margin: 0;
            padding: 0;
        }
        #m2 {
            text-align: center;
        }
        .box {
            border-bottom: 2px solid #ccc;
            text-align: center;
            padding: 20px;
            margin-bottom: 10px;
        }
        .circle0,
        .circle1,
        .circle2 {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            border: 4px solid #ff6600;
            line-height: 200px;
            display: inline-block;
        }
    </style> 
    <script> 
        $(document).ready(function() {
            $("#m1 > div").addClass("box");
            $("#m2 > div").addClass(function(index) {
                return "circle" + index;
            });
        });
    </script> 
</head> 
<body> 
    <div id="m1">
        <div>jQuery</div>
    </div>
    <div id="m2">
        <div>html</div>
        <div>css</div>
        <div>javascript</div>
    </div>
</body> 
</html>

결과 보기

<div id="m1">
    <div class="box">jQuery</div>
</div>
<div id="m2">
    <div class="circle0">html</div>
    <div class="circle1">css</div>
    <div class="circle2">javascript</div>
</div>

코드펜 결과

removeClass() 메서드

요소에서 class 속성을 제거한다.

실행 분류	형식
제거	$("div").removeClass("클래스명");
콜백 함수	$("div").removeClass(function(index, className) { 　// index는 각 div 요소의 index 0,1,2 　// className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 제거함. }); …… <div>내용1</div> <div>내용2</div> <div>내용3</div>

removeClass() 메서드 : 예제 코드

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>removeClass() 메서드<title> 
    <script src="jquery-3.3.1.min.js"></script> 
    <script> 
        $(document).ready(function() {
            $("#m1 > div").removeClass("con");
            $("#m2 > div").removeClass(function() {
                return "bg";
            });
        });
    </script> 
</head> 
<body> 
    <div id="m1">
        <div class="con">콘텐츠</div>
    </div>
    <div id="m2">
        <div class="c1 bg">내용1</div>
        <div class="c2 bg">내용2</div>
        <div class="c3 bg">내용3</div>
    </div>
</body> 
</html>

결과 보기

<div id="m1">
    <div class="con">콘텐츠</div>
</div>
<div id="m2">
    <div class="c1">내용1</div>
    <div class="c2">내용2</div>
    <div class="c3">내용3</div>
</div>

코드펜 결과

toggleClass() 메서드

요소에 class 속성이 없으면 addClass()를, 속성이 있으면 removeClass()를 적용한다.

실행 분류	형식
추가/제거	$("div").toggleClass("클래스명");

toggleClass() 메서드 : 예제 코드

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>toggleClass() 메서드<title> 
    <script src="jquery-3.3.1.min.js"></script> 
    <script> 
        $(document).ready(function() {
            $("#m_menu a.m").click(function() {
                $(this).next().addBack().toggleClass("on").end().find(".m ul").
                removeClass("on").end().parent().siblings().find(".m ul").removeClass("on");
                
                return false;
            });
        });
    </script> 
</head> 
<body> 
    ……
</body> 
</html>

hasClass() 메서드

if문의 조건식으로 사용되며 선택한 요소 클래스가 있으면 true, 없으면 false를 반환한다.

if($("#box").hasClass("m")) {
    console.log("클래스 있음");     // 클래스 있음    
} else {
    console.log("클래스 없음");   
}
……
<div id="#box" class="m">내용</div>

'jQuery' 카테고리의 다른 글

[jQuery] 스타일 관련 메서드 알아보기 (5)	2022.09.03
[jQuery] 속성 관련 메서드 알아보기 (4)	2022.09.03
[JavaScript] jQuery(제이쿼리) - 탐색 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 필터 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 속성 선택자 (4)	2022.08.30

코딩공책📚

[jQuery] 클래스 관련 메서드 알아보기

jQuery : 클래스 관련 메서드

addClass() 메서드

addClass() 메서드 : 예제 코드

코드펜 결과

removeClass() 메서드

removeClass() 메서드 : 예제 코드

코드펜 결과

toggleClass() 메서드

toggleClass() 메서드 : 예제 코드

hasClass() 메서드

'jQuery' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[jQuery] 클래스 관련 메서드 알아보기

jQuery : 클래스 관련 메서드

addClass() 메서드

addClass() 메서드 : 예제 코드

코드펜 결과

removeClass() 메서드

removeClass() 메서드 : 예제 코드

코드펜 결과

toggleClass() 메서드

toggleClass() 메서드 : 예제 코드

hasClass() 메서드

'jQuery' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바