728x90
addClass() 메서드는 선택한 요소에 클래스를 생성
removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제한다.
toggleClass() 메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고 있을경우에는 삭제한다.
hasClass() 메서드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고, 없으면 false를 반환한다.
* 기본형
| 1) $("요소 선택").addClass("class 값"); 2) $("요소 선택").removeClass("class 값"); 3) $("요소 선택").toggleClass("class 값"); 4) $("요소 선택").hasClass("class 값"); |
1) 요소를 선택하여 지정한 class값을 생성
2) 요소를 선택하여 지정한 class값을 삭제
3) 요소를 선택하여 지정한 class값이 있으면 삭제하고, 없으면 생성
4) 선택한 요소에 지정한 class값이 있으면 true , 없으면 false를 반환
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 객체 조작 및 생성 </title> <script src="js/jquery.js"></script> <script> $(function( ){ $("#p1").addClass("aqua"); $("#p2").removeClass("red"); $("#p3").toggleClass("green"); $("#p4").toggleClass("green"); $("#p6").text($("#p5").hasClass("yellow")); }); </script> <style> .aqua{background-color:#0ff;} .red{background-color:#f00;} .green{background-color:#0f0;} .yellow{background-color:#ff0;} </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> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| prop() 메서드 (0) | 2021.08.21 |
|---|---|
| val() 메서드 (0) | 2021.08.21 |
| attr() / removeAttr() 메서드 (0) | 2021.08.21 |
| html() / text() 메서드 (0) | 2021.08.21 |
| 속성 탐색 선택자 (0) | 2021.08.19 |
