Учитывая распространенность применения классов в современном веб-дизайне, для них были предусмотрены три удобных метода. Первые два из них,  .addClass() и .removeClass()  предназначены соответственно для добавления и удаления атрибута класса.

 
$("p:first").addClass("bat");
console.log("Текст: "+$(".bat").text());
$("p:first").removeClass("bat");
console.log("Текст: "+$(".bat").text());

 
Выполнив этот фрагмент, вы получите в консоли следующий результат.
_________________________________________________________

_________________________________________________________

Третий метод, .toggleClass(), принимает имя (или имена) класса, а затем либо добавляет класс, если он пока еще отсутствует в элементе, либо удаляет его, если класс уже существует.

 
Добавьте класс baz во второй абзац примера страницы и удалите из него класс  foo, воспользовавшись следующим кодом:
   $("p.foo").toggleClass("foo baz")
Выполнение этого кода изменяет абзац, удаляя из него старый класс и добавляя новый (рис. 2.17).

 Рис. 2.17. Абзац с удаленным классом f оо и добавленным классом baz

Чтобы вернуть обратно исходный класс f оо и удалить класс baz, выберите абзац и вновь примените метод .toggleClass().
   $("p.baz").toggleClass("foo baz")
Выполнение этого кода возвращает абзац в прежнее состояние, в котором имеется только класс f оо.