addClass()

addClass()

addClass() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.

---

addClass()

addClass() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.

특징	설명
버전(version)	1.x
결과값(return)	클래스 추가
사용성	★★★★★

문법(Syntax)

"선택자".addClass(클래스 이름)
"선택자".addClass(함수)

//클래스 이름을 추가하는 경우
$("div").addClass("className");

//함수를 사용하는 경우
$("div").addClass(function(){});

• 선택자(selector) : 클래스 이름을 추가할 선택자를 설정합니다.
• 클래스 이름(class name) : 추가할 클래스 이름을 설정합니다.
• 함수(function) : 클래스를 추가한 후 실행되는 함수를 설정합니다.

정의(Definition)

• addClass() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.

클래스와 관련된 메서드(class Related method)

• addClass() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.
• removeClass() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다.
• hasClass() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다.
• toggleClass() 메서드는 선택한 요소한테 클래스를 추기/삭제합니다.

비교(Compare)

• jQuery에서 클래스 추가는 addClass()를 사용합니다.
• Javascript에서 클래스 추가는 classList.add를 사용합니다.

예제1(Sample)

버튼을 클릭하면 이미지에 클래스가 추가되는 예제입니다.

리셋 버튼을 클릭하면 클래스가 추가되어 이미지 효과가 나타납니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="샘플이미지1"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" alt="샘플이미지2"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="샘플이미지3"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지4"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="샘플이미지5"></div>
</div>

.jsample {
    overflow: hidden;
}
.jsample > div {
    float: left;
    width: 18%;
    margin: 1%;
    border: 5px solid transparent;
    box-sizing: border-box;
}
.jsample > div img {
    width: 100%;
    margin: 0;
    border-radius: 3px;
}
.jsample > div.selected {
    border: 5px solid #7d0f2a;
    position: relative;
    box-sizing: border-box;
    border-radius: 10px;
    background: #b02b4c;
}
.jsample > div.selected img {
    opacity: 0.2;
}
.jsample > div.selected::before {
    content: 'selected';
    position: absolute;
    left: 50%; top: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

$(".sampleBtn .reset").click(function(e){
    e.preventDefault();
    $(".jsample > div").removeClass("selected");
});
$(".sampleBtn .btn1").click(function(e){
    e.preventDefault();
    $(".jsample > div").addClass("selected");
});

호환성(Compatibility)

						6	7	8	9	10	11
.removeClass()	jQeury 1.x 버전	○	○	○	○	○	○	○	○	○	○	○	○	○	○
	jQeury 2.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○
	jQeury 3.x 버전	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• jquery

---