속성 조작 메서드
addClass() / removeClass() / toggleClass() / hasClass()
addClass() 메서드 : 선택한 요소에 클래스를 생성
removeClass() 메서드 : 선택한 요소에서 지정된 클래스를 삭제
toggleClass() 메서드 : 선택한 요소에 지정한 클래스가 없으면 생성하고, 있을 경우에는 삭제
hasClass() 메서드 : 선택한 요소에 지정한 클래스가 있으면 true 를 반환하고, 없으면 false를 반환
기본형 :
$("요소 선택").addClass("class 값")
$("요소 선택").removeClass("class 값")
$("요소 선택").toggleClass("class 값")
$("요소 선택").hasClass("class 값")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('#p1').addClass('aqua');
$('#p2').removeClass('red');
$('#p3').toggleClass('green'); // 없는건 추가하고
$('#p4').toggleClass('green'); // 있는건 제거하고
$('#p5').hasClass("yellow");
$('#p6').text($('#p5').hasClass("yellow")); // p5의 내용을 가져와서 p6에 나타냄
});
</script>
<style>
.aqua { background-color: cyan;}
.red {background-color: red;}
.green { background-color: green;}
.yellow { background-color: yellow;}
</style>
</head>
<body>
<p id="p1">내용1</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" class="yellow">내용5</p>
<p id="p6"></p>
</body>
</html>
