Как изменить класс jquery

Статья, в которой разберем методы jQuery для управления классами элементов. Рассмотрим это как c использованием универсальных методов (attr(), removeAttr(), prop()), так и методов специально предназначенных для этого: addClass, hasClass(), removeClass(), toggleClass().

Что такое классы HTML-элементов?

Класс – это некоторый признак, который можно добавить к элементам, а затем использовать его в CSS (для добавления к ним стилей) или JavaScript.

В HTML-коде установка класса элементу осуществляется через атрибут class.

Пример, в котором установим HTML-элементу <div> класс container:

<div class="container">...</div>

При этом к элементу можно добавить не только один, но и несколько классов. Для установки нескольких классов их необходимо отделить друг от друга с помощью пробела.

Пример, в котором установим <a> три класса: btn, btn-red и btn-large:

<a class="btn btn-red btn-large" href="...">...</a>

Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис («-«) и подчеркивание («_»).

<!-- Корректное имя класса -->
<p class="alert-info">...</p>
<!-- Неправильное имя класса, т.к. он не должен начинаться с цифры -->
<p class="9alert">...</p>
<!-- Ошибочное имя класса, т.к. он содержит недопустимый символ -->
<p class="alert?">...</p>

Кроме этого, при указании класса обращайте внимание на то, что он является регистрозависимым. Т.е., например, класс Alert это не одно и тоже что alert.

<!-- Элемент p, имеющий класс alert -->
<p class="alert">...</p>
<!-- Элемент p, имеющий класс Alert. Но Alert - это не одно и то же, что alert -->
<p class="Alert">...</p>

Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.

Пример использования классов:

<!-- CSS -->
<style>
  .bg__theme {
    background-color: #dcedc8;
  }
  .bg__theme_hover {
    background-color: #ffecb3;
  }
</style>

<!-- HTML -->
<p class="bg__theme">...</p>
<p class="bg__theme">...</p>
<p class="bg__theme">...</p>

<!-- JavaScript -->
<script>
// Сценарий JavaScript с использованием библиотеки jQuery
// при поднесении курсора к элементу .bg__theme к нему добавляется класс bg__theme_hover, а при покидания курсора данный класс удаляется (bg__theme_hover)
$('.bg__theme').hover(
  function () {
    $(this).addClass('bg__theme_hover');
  },
  function () {
    $(this).removeClass('bg__theme_hover');
  }
);
</script>

Работа с классами через атрибут class

В jQuery выполнить операции над классами элементов можно с помощью методов attr и removeAttr. Данные методы предназначены для работы с любыми атрибутами, а не только с class.

Основное ограничение данных методов относительно работы с классами связано с тем, что они оперируют с ними как с целой строкой. Т.е. с их помощью, например, нельзя просто добавить какой-то один дополнительный класс к элементу или удалить его у него. Чтобы это выполнить нужно писать какой-то дополнительный код, что не очень удобно. Но если работать с классами элемента не нужно по отдельности, то данные методы будут очень удобными и в этом случае лучше использовать их. Например, когда вам нужно при создании элемента добавить к нему один или несколько классов.

Пример работы с атрибутом class:

<img id="logo" class="img-responsive" src="..." alt= "">

<script>
// получим элемент #logo
var logo = $('#logo');
// получим значение атрибута class и выведем его в консоль
console.log(logo.attr('class'));
// изменим значение атрибута class
logo.attr('class', 'img-fluid');
// удалим атрибут class у элемента
logo.removeAttr('class');
// или (удалить ещё можно так)
logo.attr('class', null);
// добавим атрибут класс к элементу
logo.attr('class', 'img-logo');
</script>

Работа с классами через DOM-свойство className

Другой вариант – это работать с классами элемента не через атрибут class, а через DOM-свойство className. Этот вариант более предпочтительный чем вариант работы с классами через атрибут class. Но он также, как и предыдущий инструмент позволяет оперировать с ними, только как с целой строкой. Более подробно почитать про атрибуты и DOM-свойства можно в этой статье.

Если кратко, то сначала нужно разобраться что такое DOM.

DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут class и соответствующее ему DOM-свойство className нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия className. В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.

В jQuery для работы с DOM-свойствами используется метод prop.

Рассмотрим применения данного метода для управления классами элемента.

<img id="logo" class="img-responsive" src="..." alt= "">

<script>
// получим элемент #logo
var logo = $('#logo');
// получим значение DOM-свойства className
console.log(logo.prop('className'));
// кстати в jQuery к нему можно ещё обращаться, используя class
console.log(logo.prop('class'));
// изменим значение DOM-свойства className
logo.prop('className', 'img-fluid');
// удалим классы у элемента
logo.prop('class','');
// добавим классы "img-logo img-circle" к элементу
logo.prop('className', 'img-logo img-circle');
</script>

Работа с классами через специальные методы

В jQuery имеются специальные методы, предназначенные именно для работы с классами. Всего их четыре. Это addClass, hasClass, removeClass и toggleClass.

Эти методы очень нужны, когда вам нужно выполнить детальную работу с классами, например, добавить один класс к элементу или его удалить.

Метод addClass

Метод addClass предназначен для добавления одного или нескольких классов к текущему набору элементов. Данный метод именно добавляет классы. Т.е. если у элемента есть классы, то они будут добавлены к уже существующим.

К сведению, если у элемента уже есть класс, который вы хотите добавить, то в этом случае он добавлен не будет.

Синтаксис метода addClass:

// 1 вариант
.addClass( className )
// className (тип: Строка) - один или несколько разделенных пробелом классов, которые нужно добавить к каждому элементу текущего набора
// 2 вариант
.addClass( function )
// function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые требуется добавить к каждому элементу текущего набора
// Синтаксис функции:
// Function( Integer index, String currentClassName ) => String
//   index – индекс элемента в наборе
//   currentClassName – текущие имена классов у элемента
// Ключевое слово this внутри функции указывает на текущий элемент набора.

Например, добавим класс при клике на элемент:

<div>-1-</div>
<div>-2-</div>
<div>-3-</div>

<script>
$('div').click(function(){
  $(this).addClass('clicked');
});
</script>

Пример, в котором добавим несколько классов ко всем элементам .btn на странице:

// добавление классов btn-lg и btn-primary ко всем элементам .btn
$('.btn').addClass('btn-lg btn-primary');

Пример, в котором добавим ко всем элементам li, расположенных в #browsers, класс browser-item, но за исключением тех, у которых уже есть какой-то класс:

<ul id="browsers">
  <li>Google Chrome</li>
  <li class="firefox">Mozilla Firefox</li>
  <li class="ie">Internet Explorer</li>
  <li>Yandex Browser</li>
</ul>

<script>
$('#briwsers li').addClass( function(index, currentClassName){
  if (!currentClassName) {
    return 'browser-item';
  }
});
</script>

Метод hasClass

Данный метод предназначен для проверки наличия указанного класса у элемента или набора элементов.

Если указанный класс есть у элемента, то метод hasClass возвращает true. В противном случае он возвращает false.

При применении его к набору элементов, он проверяет наличие указанного класса у всех них. И если указанный класс есть хотя бы у одного элемента этого набора данный метод возвращает true. В противном случае, он возвращает false.

Синтаксис метода hasClass:

.hasClass( className )
// className (тип: Строка) – имя класса, наличие которого нужно проверить у элементов текущего набора

Пример, в котором проверим наличие класса meow у элемента #say:

<span id="say" class="moo meow wow"></span>

<script>
// проверим существования класса meow у элемента
if ($('#say').hasClass('meow')) {
  console.log('У элемента есть класс meow');
  } else {
    console.log('Элемент не содержит класс meow');
  }
</script>

Если необходимо проверить наличие нескольких классов у элемента, то это выполняются с помощью использования нескольких методов hasClass:

var result = $('#say').hasClass('meow') && $('#say').hasClass('moo');
console.log(result); // true (у элемента есть классы meow и moo)

Метод removeClass

Метод removeClass предназначен для удаления класса, нескольких или всех классов у каждого элемента текущего набора.

Синтаксис метода removeClass:

// 1 вариант
.removeClass( [className ] )
// className (тип: Строка) – один или несколько разделённых с помощью пробела классов, которые нужно удалить у элементов набора
// 2 вариант
.removeClass( function )
// function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые нужно удалить
// Синтаксис функции:
// Function( Integer index, String className ) => String
//   index – индекс элемента в наборе
//   className – имена классов у элемента
// Ключевое слово this внутри функции указывает на текущий элемент набора

Если при вызове метода removeClass ничего ей не передать в качестве аргумента, то она удалит все классы у каждого элемента текущего набора.

Например, удалим класс text-center у всех элементов p:

$('p').removeClass('text-center');

Например, уберём сразу несколько классов у элементов div:

$('div').removeClass('alert alert-warning');

Например, удалим все классы у элементов .message, контент у которых равен пустой строке:

<div class="message"></div>
<div class="message">...</div>

<script>
$('.message').removeClass(function(){
  if (!$(this).html()) {
    $(this).removeClass();
  }
});
</script>

Метод toggleClass

Метод toggleClass предназначен для переключения одного или нескольких классов, разделённых между собой с помощью пробела. Под переключением понимается добавление класса, если у данного элемента его нет или удаление, если этот класс у этого элемента есть.

Синтаксис метода toggleClass:

// 1 вариант
.toggleClass( className )
// className (тип: String) - один или несколько классов (разделенных пробелами), которые необходимо переключить у каждого элемента в текущем наборе.
// 2 вариант
.toggleClass( className, state )
state (тип: Boolean) – логическое значение, определяющее, должен ли класс быть добавлен или удален
// 3 вариант
.toggleClass( function [, state ] )
// function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые требуется переключить у элемента. В качестве аргументов получает индекс элемента в текущем наборе, текущее значение className и состояние.
// Синтаксис функции:
Function( Integer index, String className, Boolean state ) => String
  // index – индекс элемента в текущем наборе
  // className – текущее значение className элемента
  // state – значение состояния, установленного посредством второго аргумента при вызове метода toggleClass (если второй аргумент опустить, то данный параметр будет иметь значение undefined)
  // Внутри функции ключевое слово this указывает на текущий элемент набора

Пример, в котором переключим класс alert-warning у элементов .alert:

<div class="alert alert-warning">1...</div>
<div class="alert">2...</div>
...

<script>
  $('.alert').toggleClass('alert-warning');
</script>

Данный код без использования метода toggleClass можно записать так:

$('alert').each( function () {
  var _this = $('this'); // текущий элемент
  if (_this.hasClass('alert-warning')) {
    _this.removeClass('alert-warning');
  } else {
    _this.addClass('alert-warning');
  }
});

Кроме этого, метод toggleClass может вести себя как addClass или removeClass. Это состояние можно установить посредством задания параметру state соответственно значения true или false.

Т.е. если параметру state установить true, то метод toggleClass будет только добавлять указанный класс к элементу, если у него его нет. И наоборот, если параметру state задать false, то метод toggleClass будет только удалять указанный класс, т.е. он будет вести себя как removeClass.

Пример, в котором добавим класс text-right только к тем элементам p на странице, у которых его нет:

$('p').toggleClass('text-right', true);

Пример, в котором удалим класс text-center только у тех элементов div, у которых он есть:

$('div').toggleClass('text-center', false);

Пример, в котором переключим класс text-lead с помощью функции. Выполним это для элементов .text, у которых размер шрифта равен 24px:

<style>
.text-24 {
  font-size: 24px;
}
.text-lead {
  color: red;
}
</style>

<p class="text text-24 text-lead">...</p>
<p class="text text-lead">...</p>
<p class="text" style="font-size: 24px;">...</p>

<script>
$('.text').toggleClass(function(){
  var classToToggle = '';
  if ($(this).css('font-size') === '24px') {
      classToToggle = 'text-lead';
  }
  return classToToggle;
});
</script>

Темы, связанные с этой:

• Методы jQuery для работы с атрибутами
• Методы jQuery для управления DOM-свойствами элементов

• Главная»
• Уроки»

• jQuery»

• Манипулирование классами CSS элементов в jQuery

• Метки урока:
• разное
• кодинг
• jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {

  // Выводим "Нашёл", если какой-нибудь div на странице имеет класс "summary"
  if ( $('div').hasClass('summary') ) alert( 'Нашёл' );
}

</script>
</head>
<body>
  <div class="header summary">Этот элемент имеет класс summary</div>
  <div class="header main">Это другой div</div>
  <div class="content">и ещё один div</div>
</body>
</html>

// Добавляем класс 'summary' к #myDiv
 $('#myDiv').addClass('summary');

// Добавляем класс 'summary' всем элементам div на странице
$('div').addClass('summary');

// Добавляем классы 'header' и 'summary' к #myDiv
$('#myDiv').addClass('header summary');

// Удаляем класс 'summary' из #myDiv
$('#myDiv').removeClass('summary');

// Удаляем классы 'header' и 'summary' из #myDiv
$('#myDiv').removeClass('header summary');

// Удаляем класс  'summary' из всех div на странице
$('div').removeClass('summary');

// Удаляем все классы из всех div на странице
$('div').removeClass();

// Пример использования возвратной функции: удаляем класс 'summary' только из первых трёх div на странице
$('div').removeClass( firstThreeOnly );

function firstThreeOnly( index, classAttribute ) {
  return ( index < 3 ? 'summary' : '' );
}

// Переключаем класс 'summary' для элемента #myDiv 
$('#myDiv').toggleClass('summary');

// Переключаем класс 'summary' для всех div
$('div').toggleClass('summary');

// Переключаем классы 'header' и 'summary' для элемента #myDiv
$('#myDiv').toggleClass('header summary');

// Случайно добавляет или удаляет класс 'summary' из элемента #myDiv
$('#myDiv').toggleClass( 'summary', ( Math.random() < .5 ) );

// Переключаем класс 'summary' только для первых трёх div на странице
$('div').toggleClass( firstThreeOnly );

function firstThreeOnly( index, classAttribute ) {
  return ( index < 3 ? 'summary' : '' );
}

5 последних уроков рубрики «jQuery»

• 

  Анимация набора текста на jQuery

  Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

• 

  Временная шкала на jQuery

  jQuery плагин для создания временной шкалы.

• 

  Заметка: Перезагрузка и редирект на JavaScript

  Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

• 

  Рисуем диаграмму Ганта

  jQuery плагин для создания диаграммы Ганта.

• 

  AJAX и PHP: загрузка файла

  Пример того как осуществить загрузку файла через PHP и jQuery ajax.

В jQuery методы, которые приспособлены для работы с классами: addClass, removeClass, hasClass. Конечно, можно использовать метод attr для изменения классов, но он заменяет все существующие классы. Поэтому вместо attr лучше использовать методы, которые автоматически вычисляют какие классы уже есть и добавляют/убирают нужные/ненужные. Разберём их по порядку.

Добавление класса (addClass)

Приведём пример добавления класса с помощью метода addClass. Этому методу в качестве параметра передаётся название класса. Метод автоматически вычисляет есть ли у элемента такой класс и добавляет его, если ещё нет:

<div id="mouse"></div>
<script>
   $('#mouse').addClass('cheese');
</script>

Как видно из примера, атрибута «class» ещё нет у элемента «div». Но после применения метода «addClass» он будет создан и HTML код страницы изменится на:

<div class="cheese" id="mouse"></div>

Добавим сразу второй класса, чтобы продемонстрировать, что существующие классы не затираются, как это происходит при использовании attr:

<div class="cheese" id="mouse"></div>
<script>
   $('#mouse').addClass('cat');
</script>

При выполнении такого кода получится HTML код:

<div class="cheese cat" id="mouse"></div>

Удаление класса (removeClass)

Метод «removeClass» удаляет определённый класс у элемента, но оставляет остальные. Для демонстрации возьмём HTML код из предыдущего примера и попробуем удалить определённый класс:

<div class="cheese cat" id="mouse"></div>
<script>
   $('#mouse').removeClass('cheese');
</script>

При выполнении такого кода получится HTML код:

<div class="cat" id="mouse"></div>

Удален только один класс «cheese», который запрашивался.

Включить/выключить класс (toggleClass)

Существует метод «toggleClass», который работает как «addClass» и «removeClass» одновременно. Если класс существует, то он будет убран. А если класса нет, то он будет добавлен. Такая логика хорошо применима к различным кнопкам-тумблерам с двумя позициями «вкл/выкл». С помощью этого метода их легко запрограммировать. Попробуем метод на практике:

<div class="cheese cat" id="mouse"></div>
<script>
   $('#mouse').toggleClass('cheese');
   $('#mouse').toggleClass('milk');
</script>

Поскольку класс «cheese» уже есть, то он будет убран. А класс «milk» будет добавлен, потому что его нет. При выполнении такого кода получится HTML код:

<div class="cat milk" id="mouse"></div>

Проверка существования класса (hasClass)

В наборе jQuery есть несколько удобных методов для работы с классами. Один из ни «hasClass», который возвращает «true» или «false» в зависимости от того, есть ли у элемента класс. Этот метод часто использвуется внутри условия «if», поэтому приведём пример именно с ним:

<div class="cheese" id="mouse"></div>
<script>
   if( $('#mouse').hasClass('cheese') ){
      // условие выполнится, потому что класс "cheese" есть
   }
   if( $('#mouse').hasClass('cat') ){
      // условие не выполнится, потому что нет класса "cat"
   }
</script>