클래스메소드라서 메소드 뒤의 ()괄호안에 매개변수는 . 을 붙이지않아도 됨
- addClass('클래스1 클래스2') : 클래스1과 클래스2를 추가
- removeClass('클래스1 클래스2') : 클래스1과 클래스2를 제거
- toogleClass('클래스1 클래스2') : 클래스1이 있으면 제거, 없으면 추가/
클래스2가 있으면 제거, 없으면 추가
- hasClass('클래스') : 해당 클래스가 있으면 true, 없으면 false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 관련 메소드</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('.box1').addClass('box4'); //box1,4는 우선순위가 같으므로 나중에적용된 box4가 1덮음
$('.box2').removeClass('box2'); //box2없어져서 inner-box배경색이 비춰짐
$('.box3').toggleClass('box5'); //box5가없었으니까 box3위로 생김
$('.box3').toggleClass('box5'); //toggle=>위에 생긴애가 다시 없어져서 원래 box3색이 됨
console.log($('.box3').hasClass('inner-box')); //.box3에 inner-box가 있으니까 ture값
})
</script>
<style>
.inner-box{
height: 20px; background: yellowgreen; margin-bottom: 10px;
}
.box1{background: tomato;}
.box2{background: brown;}
.box3{background: peru;}
.box4{background: slateblue;}
.box5{background: teal;}
</style>
</head>
<body>
<div class="box">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
<div class="inner-box box3"></div>
</div>
</body>
</html>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_CSS메소드 (0) | 2021.06.23 |
|---|---|
| JQ_메뉴선택예제 (0) | 2021.06.23 |
| JQ_요소제거(remove, empty) (1) | 2021.06.23 |
| JQ_input창 추가하기(이력서 경력추가기능) (1) | 2021.06.23 |
| JQ_checkbox 선택을 나열(표시)하기 (0) | 2021.06.23 |