[jQuery] .addClass() .removeClass()

See the Pen [jQuery] .addClass() .removeClass() by mill (@millfeel) on CodePen.

 

특정 요소에 클래스를 추가하고 제거하는 구문이다.

// 클래스 추가하기
$('선택자').addClass('추가할 클래스명');

// 클래스 제거하기
$('선택자').removeClass('제거할 클래스명');

 

[JS와 비교하기]

// JS
const $box = document.querySelector('.box');

$box.addEventListener('mouseover', function () {
  this.classList.add('box__circle');
});
$box.addEventListener('mouseout', function () {
  this.classList.remove('box__circle');
});

// jQuery
$(document).ready(function () {
  $('.box').mouseover(function(){
    $(this).addClass('box__circle');
  }).mouseout(function(){
    $(this).removeClass('box__circle');
  });
});

---

[공부좌표]

인터랙티브 웹디자인북 p145