Управление классами стилей

Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы:

• addClass(<Название класса>) — добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел. В листинге 1.6 мы добавляли стилевой класс is-invalid следующим образом:

$('#txtWidth').addClass('is-invalid');

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а стилевые классы — через параметр <Значение>. Чтобы задать значение, необходимо внутри функции обратного вызова вернуть название добавляемого стилевого класса или названия нескольких классов через пробел. Пример добавления двух классов:

<div id="div1" class="p-2 m-2 border">Текст</div>

$('#div1').addClass( function(i, v) {
   console.log(v);                // p-2 m-2 border
   return 'bg-info text-white';
});

• removeClass([<Название класса>]) — удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы. В листинге 1.6 мы удаляли стилевой класс is-invalid при получении полем фокуса ввода:

$('#txtWidth, #txtHeight').focus( function() {
   $(this).removeClass('is-invalid');
});

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а стилевые классы — через параметр <Значение>. Чтобы удалить класс, необходимо внутри функции обратного вызова вернуть название стилевого класса или названия нескольких классов через пробел. Пример удаления двух классов:

<div id="div1" class="p-2 border bg-info text-white">Текст</div>

$('#div1').removeClass( function(i, v) {
   console.log(v); // p-2 border bg-info text-white
   return 'bg-info text-white';
});

• toggleClass(<Название класса или функция>[, <Условие>]) — добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. В качестве первого параметра можно указать несколько классов через пробел. Удалим стилевой класс border и добавим класс bg-info:

<div id="div1" class="p-2 border text-white">Текст</div>

$('#div1').toggleClass('border bg-info');

Если в необязательном параметре <Условие> задано значение true, то указанный класс будет добавлен, а если задано значение false, то указанный класс будет удален:

$('#div1').toggleClass('border', false)
          .toggleClass('bg-info', true);

В качестве первого параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>[,
                             <Статус>]]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>, а стилевые классы — через параметр <Значение>. Если параметр <Статус> имеет значение true, то класс будет добавлен, если значение false — то класс будет удален, а если значение undefined — то выполняется переключение классов. Внутри функции обратного вызова нужно вернуть название стилевого класса или названия нескольких классов через пробел. Пример удаления двух классов:

<div id="div1" class="p-2 border bg-info text-white">Текст</div>

$('#div1').toggleClass( function(i, v, status) {
   console.log(v);      // p-2 border bg-info text-white
   console.log(status); // false
   return 'bg-info text-white';
}, false);

Все указанные методы в качестве значения возвращают коллекцию элементов jQuery. Рассмотрим возможность изменения класса при наведении курсора на элемент (листинг 1.7).

Листинг 1.7. Методы addClass(), removeClass() и toggleClass()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Методы addClass(), removeClass() и toggleClass()</title>
   <style>
       div  { font-size: 20px; margin: 20px; }
      .cls1 { color: #000000; text-decoration: none; }
      .cls2 { color: #ff0000; text-decoration: underline; }
   </style>
</head>
<body>
   <div id="div1" class="cls1">Наведите курсор на этот текст</div>
   <div id="div2" class="cls1">Наведите курсор на этот текст</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#div1').hover(
      function() { // Если навести курсор
         $(this).removeClass('cls1').addClass('cls2');
      },
      function() { // Если убрать курсор
         $(this).removeClass('cls2').addClass('cls1');
      }
   );
   $('#div2').hover(
      function() { // Если навести курсор
         $(this).toggleClass('cls2');
      },
      function() { // Если убрать курсор
         $(this).toggleClass('cls2');
      }
   );
});
</script>
</body>
</html>

В этом примере мы определили два класса cls1 и cls2. Класс cls1 описывает стиль элемента по умолчанию. Класс cls2 предназначен для описания стиля элемента при наведении курсора. После формирования структуры документа, мы добавляем обработчики событий с помощью метода hover(). В первом параметре указывается функция, которая будет вызвана при наведении курсора. Во втором параметре указывается функция, которая будет вызвана, если курсор убрать с элемента. Внутри этих обработчиков текущий DOM-элемент доступен через указатель this. Если курсор будет наведен на первую надпись, то удаляем класс cls1, а затем добавляем класс cls2:

$(this).removeClass('cls1').addClass('cls2');

Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем класс cls2 и добавляем класс по умолчанию:

$(this).removeClass('cls2').addClass('cls1');

Вторая надпись демонстрирует применение метода toggleClass(). Если навести курсор, то метод проверит, был ли класс cls2 добавлен ранее. В случае отсутствия класса он будет добавлен, в противном случае удален. По этой причине во всех событиях мы указываем одну и ту же строку:

$(this).toggleClass('cls2');

На самом деле, изменение характеристик элемента при наведении курсора, легко решается с помощью CSS без JavaScript и jQuery. Достаточно использовать псевдокласс :hover:

<style>
    div  { font-size: 20px; margin: 20px; }
   .cls1 { color: #000000; text-decoration: none; }
   .cls1:hover { color: #ff0000; text-decoration: underline; }
</style>

Метод hasClass(<Название класса>) позволяет определить, был ли указанный класс добавлен ранее. Возвращает true, если класс был добавлен ранее:

<div id="div1" class="cls1">Текст</div>

function testClass(cls) {
   if ( $('#div1').hasClass(cls) ) {
      console.log('Определен');
   }
   else {
      console.log('Нет');
   }
}

testClass('cls2');               // Нет
$('#div1').addClass('cls2');
testClass('cls2');               // Определен
testClass('cls1');               // Определен

При первой проверке получим сообщение, что класс cls2 не определен. Далее добавляем класс и опять проверяем. В этом случае получим сообщение, что класс определен для элемента с идентификатором div1. Обратите внимание на тот факт, что добавление нового класса не удаляет другие классы, определенные ранее.

Учебник по jQuery и AJAX в формате PDF