[jQuery/제이쿼리]클래스 확인, 클래스 추가, 클래스 제거 removeClass(), addClass(), hasClass()

---

---

# 목적

웹 개발을 할 경우 동적으로 클래스를 추가하거나 삭제 

또는 클래스 확인이 필요한 경우가 존재합니다.

그럴경우 이용하는게 이번에 배워볼 addClass(), removeClass(), hasClass()입니다.

# addClass()

.addClass(className)

타입

String

설명

셀렉터에 해당하는 태그에 className에 해당하는 클래스를 추가합니다. className은 여러개의 클래스가 추가 될 수 있습니다.

.addClass(function)

타입

Function(Integer index, String currentClassName)

return String

설명

클래스 명이 아닌 함수를 넣을 경우 함수에서 리턴된 String 값이 클래스로 추가됩니다. 매게변수로 index는 말그대로 셀렉터 태그의 인덱스들을 가져옵니다. 예를 들어 셀렉터가 <ul>태그의 <li>태그들일 경우 여러개 존재 할 수 있습니다. 그 여러개들을 가져오면 각각의 index 들을 메게변수로 보내주게 됩니다. currentClassName은 해당 태그의 현재 클래스들을 가져옵니다. 

---

실행결과

---

See the Pen yvvoVM by HyeonJun, Bang (@UmNyaUm) on CodePen.

---

<코드가 정렬되어 보이지 않을경우 스크롤 이용 또는 Result를 클릭하여 안보이게 한후 보세요>

해당 실행결과 소스코드는 예시코드이며 이해를 돕기위해 제작된 것입니다.

그럼 한번 보도록 합시다.

첫번째 버튼은 addClass(string) 형식으로 구현된 버튼입니다.

해당 버튼을 클릭시 텍스트가 파란색으로 바뀌며 폰트사이즈가 커지게 됩니다.

자 그럼

LearningjQuery.ClickAddClass()

이 함수를 봐봅시다.

이 함수에서 아래와 같은 구문이 있습니다.

$('#text').addClass('blue upfontsize');

위 구문은 css의 blue 라는 클래스와 upfontsize 라는 클래스를 

id가 text인 태그에 넣도록 해주는 구문입니다.

두번째 버튼은 addClass(function) 형식으로 구현된 버튼 입니다.

파란색 텍스트가 빨간색으로 바뀌게 됩니다.

LearningjQuery.ClickAddClassFunctino()

이 함수를 봐 봅시다.

이 함수에는 currentClass 라는 매게변수를 이용하는데.

이 매게변수에서 blue 라는 클래스가 존재할 경우 red라는 문자열을 리턴하고

만약 존재하지 않을경우 blue 라는 문자열을 리턴합니다.

리턴 값은 그대로 addClass("red")  형식으로 되며

해당 클래스가 추가되도록 되어집니다. 

물론 이 리턴값 또한 여러개의 클래스로 구성이 가능합니다.

# removeClass()

.removeClass(className)

타입

String

설명

셀렉터에 해당하는 태그에 className에 해당하는 클래스를 제거합니다. className은 여러개의 클래스가 추가 될 수 있습니다.

.removeClass(function)

타입

Function(Integer index, String currentClassName)

return String

설명

클래스 명이 아닌 함수를 넣을 경우 함수에서 리턴된 String 값이 제거됩니다. 매게변수로 index는 말그대로 셀렉터 태그의 인덱스들을 가져옵니다. 예를 들어 셀렉터가 <ul>태그의 <li>태그들일 경우 여러개 존재 할 수 있습니다. 그 여러개들을 가져오면 각각의 index 들을 메게변수로 보내주게 됩니다. currentClassName은 해당 태그의 현재 클래스들을 가져옵니다. 

---

실행결과

---

See the Pen removeClass exam by HyeonJun, Bang (@UmNyaUm) on CodePen.

---

<코드가 정렬되어 보이지 않을경우 스크롤 이용 또는 Result를 클릭하여 안보이게 한후 보세요>

해당 실행결과 소스코드는 예시코드이며 이해를 돕기위해 제작된 것입니다.

그럼 한번 보도록 합시다.

첫번째 버튼은 removeClass(string) 형식으로 구현된 버튼입니다.

해당 버튼을 클릭시 텍스트 컬러가 사라지며 폰트사이즈가 작아지게 됩니다.

LearningjQuery.ClickremoveClass()

이 함수를 봐봅시다.

이 함수에서 아래와 같은 구문이 있습니다.

$('#text').removeClass('blue upfontsize');

위 구문은 css의 blue 라는 클래스와 upfontsize 라는 클래스를 

id가 text인 태그에 제거해주는 구문입니다.

두번째 버튼은 removeClass(function) 형식으로 구현된 버튼 입니다.

한번 클릭시 파란색 텍스트가 사라지고 두번 클릭시 크기가 줄어듭니다.

LearningjQuery.ClickremoveClassFunctino()

이 함수를 봐 봅시다.

이 함수에는 currentClass 라는 매게변수를 이용하는데.

이 매게변수에서 blue 라는 클래스가 존재할 경우 blue라는 문자열을 리턴하고

만약 존재하지 않을경우 upfontsize 라는 문자열을 리턴합니다.

리턴 값은 그대로 removeClass("blue")  형식으로 되며

해당 클래스가 추가되도록 되어집니다. 

물론 이 리턴값 또한 여러개의 클래스로 구성이 가능합니다.

# hasClass()

.hasClass(className)

타입

String

설명

셀렉터에서 className에 해당하는 클래스 이름이 존재하는지 검색합니다. 만약 존재할 경우 "true"를 반환하고 존재하지 않을 경우 "false"를 반환합니다.

---

실행결과

---

See the Pen hasClass exam by HyeonJun, Bang (@UmNyaUm) on CodePen.

---

<코드가 정렬되어 보이지 않을경우 스크롤 이용 또는 Result를 클릭하여 안보이게 한후 보세요>

해당 실행결과 소스코드는 예시코드이며 이해를 돕기위해 제작된 것입니다.

그럼 한번 보도록 합시다.

먼저 텍스트 입력창에 red 라고 입력 해보고 클래스 확인 이라는 버튼을 클릭해 봅시다.

그럼 결과창에 false 라고 뜹니다.

해당 결과 값은 텍스트 입력창에 입력된 값이

text 라는 id 태그에 해당하는 클래스가 입력되지 않았기 때문에

$('#text').hasClass("red")는 false 가 리턴되게 됩니다.

이번엔 텍스트 입력창에 blue 라고 입력을 해 봅시다.

그럼 결과창에는 true 가 리턴됩니다.

그 이유는 무엇일까요?

당연히 text 라는 id 태그에 해당하는 클래스가 입력되었기 때문에

$('#text').hasClass("blue") 는 true 가 리턴되게 됩니다.

# 마무리

오늘은 removeClass(), addClass(), hasClass() 에 대해서 알아보았습니다.

만약 궁금한 사항이나 잘못된 점이 존재하면 댓글을 남겨주세요

감사합니다.