DevSSOM
jQuery 이벤트 - Class 이벤트 본문
Class 이벤트
HTML 문서에서 특정 태그가 어떤 클래스를 가지고 있는지, 특정 클래스를 가지고 있다면 그 클래스를 제거하거나, 특정 클래스를 가지고 있지 않다면, 새로운 클래스를 붙이거나 할 때 다음의 제이쿼리 이벤트들을 활용함.
$("h1").addClass(); // 대상에 괄호 안 클래스 추가
$("h1").removeClass(); // 대상에 괄호 안 클래스 제거
$("h1").toggleClass(); // addClass와 removeClass 둘 다
$("h1").hasClass(); // 대상에 괄호 안 클래스 있는지 확인
실습문제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제이쿼리 기초</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Blue Font</h1>
<h2>Red Font</h2>
<button class="addClass">Add Class</button>
<button class="removeClass">Remove Class</button>
<button class="hasClass">Has Class</button>
<script src="jquery-3.3.1.js"></script>
<script src="index.js"></script>
</body>
</html>css 파일엔 이미 blue와 important를 만들어뒀음.
.blue {
color: blue;
}
.important {
color: red;
font-weight: bold;
font-size: xx-large;
}
저 3개의 버튼의 기능을 구현하기 위해서 제이쿼리로 index.js 파일에 코드를 작성해줄거임.
가장 먼저, #addClass 영역을 클릭하면, <h1>에 .blue클래스를, <h2>에 .important 클래스가 추가되도록 만들기. 여기서 Class 이벤트에 인자를 넣을 때는, 클래스임에도 불구하고 앞에 온점.을 붙이시면 안 된다는 점에 유의.
$(function() {
$(".addClass").click(function() {
$("h1").addClass("blue");
$("h2").addClass("important");
});
});이제 Add Class 버튼을 누르면 폰트 컬러와 크기가 아래처럼 바뀌게 됨.
크롬 개발자도구 요소검사로 어떻게 동작하는지를 확인해보면, 처음에 <h1>, <h2> 태그에는 class가 없었음.
근데, 이제 Add Class 버튼을 누르면, <h1>과 <h2>에 class가 생기는 걸 볼 수 있어.
이어서 Remove Class 버튼도 이벤트를 추가하기. #removeClass 영역을 클릭하면, <h1>의 .blue클래스가, <h2>의 .important 클래스가 제거되도록 해보는거야.
$(function() {
$(".addClass").click(function() {
$("h1").addClass("blue");
$("h2").addClass("important");
});
$(".removeClass").click(function() {
$("h1").removeClass("blue");
$("h2").removeClass("important");
});
});그럼 Remove Class 버튼을 눌렀을 때 다시 처음의 검정 폰트와 크기로 돌아오게 됨.
이제 마지막으로 #hasClass 영역을 클릭하면, 클래스.blue와 .important가 없으면 추가가, 있으면 제거가 되도록 해보기.
$(function() {
$(".addClass").click(function() {
$("h1").addClass("blue");
$("h2").addClass("important");
});
$(".removeClass").click(function() {
$("h1").removeClass("blue");
$("h2").removeClass("important");
});
$(".hasClass").click(function() {
if($("h1").hasClass("blue") && $("h2").hasClass("important")) {
$("h1").removeClass("blue");
$("h2").removeClass("important");
} else {
$("h1").addClass("blue");
$("h2").addClass("important");
}
});
});Has Class 이벤트를 이렇게 if문으로 코드를 짜도 되지만, 지금처럼 하면 너무 복잡해. 그래서 제이쿼리에서는 토글 클래스라는 걸 만들어놨어. toggleClass(); 이걸 활용해서 다시 코드를 짜보면
$(function() {
$(".addClass").click(function() {
$("h1").addClass("blue");
$("h2").addClass("important");
});
$(".removeClass").click(function() {
$("h1").removeClass("blue");
$("h2").removeClass("important");
});
$(".hasClass").click(function() {
$("h1").toggleClass("blue");
$("h2").toggleClass("important");
});
});이벤트는 동일하게 작동되지만, 코드는 훨씬 깔끔해짐.
'JavaScript' 카테고리의 다른 글
| 자바스크립트 - 데이터 타입 (Boolean 불리언) (0) | 2021.07.03 |
|---|---|
| 자바스크립트 - 데이터 타입 (undefined, null) (0) | 2021.07.02 |
| 자바스크립트 - 데이터 타입 (배열, 객체) (0) | 2021.07.01 |
| 자바스크립트 - 데이터 타입 (문자열, 숫자, 함수) (0) | 2021.06.30 |
| 자바스크립트 - 기초 개념, 변수 생성 (0) | 2021.06.24 |
