jQuery - Работа с классами (добавление, удаление и др.)

Статья, в которой разберем методы jQuery (attr, prop, addClass, hasClass, removeClass и toggleClass), которые позволяют управлять классами элементов.

Назначение классов в HTML5

В HTML 5, атрибут class можно добавить к любому HTML элементу.

<!-- Элемент div, имеющий класс container -->
<div class="container">...</div>

Значением атрибута class является строка, которая может содержать одно или несколько имён классов (через пробел).

<!-- Элемент 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), дефис ("-") и подчеркивание ("_"). Кроме этого, при указании значения имени обращайте внимание на то, что оно является регистро-зависимым. Т.е. например, класс Alert это не одно и тоже что alert.

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

Понять назначение класса очень просто, если его сравнить с "крючком". Зная имя крючка (название класса) можно подцепить ("выбрать") все элементы на странице, которые имеют указанный класс. Другого назначения класс не имеет, он предназначен только для отбора необходимых элементов в документе для того чтобы им (элементам) можно было задать определённые стили с помощью CSS или выполнить над ними (элементами) некоторые операции в JavaScript.

HTML - понятие класса

Например, использование класса в CSS и JavaScript для выбора элементов и применения к ним оформления и некоторого действия:

<style>
/* CSS */
/* установить цвет текста #ccc для элементов, имеющих класс example */
.example {
  color: #ccc;
}
</style>
...
<!-- HTML элементы -->
<p class="example">...</p>
<p class="intro">...</p>
<p class="example">...</p>
...
<script>
// Сценарий JavaScript (jQuery)
// при поднесении курсора к элементам с классом example изменить цвет фона на жёлтый
$('.example').hover(
  function(){
    $(this).css('background-color','yellow');
  },
  function(){
    $(this).css('background-color','white');
  }
);
</script>

jQuery - Установить класс

В jQuery присвоить (создать) класс необходимым элементам можно с помощью метода attr.

.attr('class','значение_класса');

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

<ul>
  <li>Монитор</li>
  <li>Сканер</li>
  <li>Принтер</li>
  <li>Маршрутизатор</li>
</ul>
...
<script>
$('ul>li:even').attr('class','even');
</script>

Работать с классами в jQuery можно также с помощью метода prop, т.е. как со свойством:

<script>
$('ul>li:even').prop('className','even');
</script>

Возможность работы в браузере с атрибутом элемента как со свойством объясняется наличием в нём дополнительной структуры (DOM-дерева).

Данная структура создаётся браузером после получения HTML кода. Т.е. первоначальная работа браузера - это разбор полученного HTML кода и формирование на его основе дерева DOM. Сформированное в результате парсинга дерево, браузер использует не только для отрисовки (отображения) HTML страницы, но также представляет API для работы с ним посредством JavaScript. Это означает то, что вы можете с помощью скриптов JavaScript изменять DOM "на лету" и тем самым управлять страницей. При этом, во время построения браузером дерева, элементы (теги) превращаются в объекты DOM, а атрибуты в свойства объектов. Так, например, атрибут элемента class, в дереве становится свойством className.

Если вам необходимо просто получить класс (значение атрибута class или свойства className) элемента, то в этом случае также можно воспользоваться методом attr или prop.

Например, узнаем класс у элемента с id, равным "main-menu":

<nav id="main-menu" class="navbar">...</nav>

<script>
// обращение к атрибуту class с помощью метода attr
var class = $('#main-menu').attr('class');
// вывести значение атрибута class в консоль
console.log(class);
// обращение к атрибуту class с помощью метода prop
var class = $('#main-menu').prop('className');
// вывести значение свойства className в консоль
console.log(class);
</script>

jQuery - Поменять класс

Методы attr и prop можно также применять, когда необходимо изменить одно значение атрибута class на другое.

.attr('class','новое_значение');
.attr('className','новое_значение');

Например, заменим у всех элементов класс info на класс warning:

$('.info').attr('class','warning');
$('.info').prop('className','warning');

Если же необходимо изменить не всё значение атрибута class, а только один класс на другой, то в jQuery это делается с помощью методов removeClass и addClass:

<p class="btn btn-warning"></p>
<p class="btn btn-info"></p>
<p class="btn btn-warning"></p>

<script>
// btn-warning – класс, который необходимо удалить
// btn-danger – класс, который необходимо добавить
$('.btn-warning').removeClass('btn-warning').addClass('btn-danger');
</script>

Т.е. в JavaScript замена класса у найденных элементов осуществляется посредством применения к ним одновременно двух методов: removeClass и addClass.

jQuery – Добавить класс к элементу

Добавление одного или нескольких классов к текущим (выбранным) элементам осуществляется с помощью метода addClass:

// 1 вариант - добавление одного класса ко всем элементам текущего набора
.addClass('имя_класса');
// 2 вариант - добавление нескольких классов к выбранным элементам
.addClass('имя_класса1 имя_класса2 ...');
// 3 вариант - добавление класса (строки), которая вернула функция, ко всем элементам текущего набора
.addClass(function(index, currentClassName){
  // index – индекс позиции элемента в текущем наборе
  // currentClassName – текущее имя или имена классов (значение атрибута class элемента)
  // this – указатель, содержащий ссылку на текущий объект
  ... // тело функции (в качестве результата функция должна вернуть строку, содержащую имя или имена классов (через пробел), которые будут добавлены к текущему элементу)
});

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

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

Например, при клике по элементу a с классом not-click отменим стандартное действие браузера (переход по ссылке):

<a href="..." class="not-click">Ссылка 1</a>
<a href="...">Ссылка 2</a>
<a href="..." class="not-click">Ссылка 3</a>
...
<script>
$('a.not-click').click(function(event){
  event.preventDefault();
});
</script>

Задание сразу нескольких классов элементам осуществляется путём их перечисления через пробел.

Добавить ко всем элементам button на странице два класса:

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

Рассмотрим пример, в котором зададим ко всем элементам li класс в соответствии с их порядковыми номерами, за исключением тех элементов, которые уже имеют некоторое значение атрибута class:

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

<script>
$('ul>li').addClass(function(index, currentClassName){
  if (!currentClassName) { 
    return 'class-'+index;
  }
});  
</script>

jQuery - Удалить класс

Убирание класса у выбранных элементов в jQuery осуществляется с помощью метода removeClass. Работа с данным методом осуществляется также как с методом addClass.

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

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

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

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

Например, удалим класс из переносимого объекта:

<div id="draggable" class="draggable"></div>
...
<script>
$(function(){
  // инициализация объекта с id="draggable" как переносимого с помощью плагина jQuery UI Draggable
  $("#draggable").draggable();
  // удалим класс draggable из переносимого объекта
  $("#draggable").on('drag',function(){
    $(this).removeClass('draggable');
  });
});
</script>

jQuery - Наличие класса

Проверка существование класса осуществляется с помощью метода hasClass:

.hasClass('имя_класса');

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

Например, узнаем, есть ли класс moo у элемента, имеющего id, равное say:

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

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

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

<script>
// после загрузки страницы
$(function(){
  // проверка наличия у элемента (id="say") классов meow и moo
  if ($('#say').hasClass('meow') && $('#say').hasClass('moo')) {
    console.log('Элемент имеет классы meow и moo');
  } else {
    console.log('Элемент не содержит классы meow и moo');
  }
})
</script>

jQuery - Переключение классов

Смена класса или нескольких классов (разделённых между собой пробелом) в jQuery осуществляется с помощью метода toggleClass.

Под сменой класса понимается выполнения одного из следующих действий:

  • удаление класса, если он есть у элемента;
  • добавление класса, если его нет у элемента.
.toggleClass('имя_класса');

Например, осуществим смену класса pink у элементов p в HTML документе:

<p class="pink"></p>
<p class="text-center"></p>
...
<script>
$(function(){
  $('p').toggleClass('pink');
});
</script>

Кроме этого данный метод может иметь также 2 параметр (состояние), который указывает на то, что необходимо сделать с классом или классами:

  • true - если заданный класс есть у элемента, то ничего не делать. А если его нет, то добавить.
  • false - если заданный класс есть у элемента, то удалить его. А если его нет, то ничего не делать.

Например, добавить класс printer только к тем элементам p на странице, у которых его нет:

$(function(){
  $('p').toggleClass('printer',true);
});

Например, удалить класс screen только у тех элементов div, у которых он есть:

$(function(){
  $('div').toggleClass('screen',false);
});

Начиная с версии jQuery 1.4 имена классов можно переключать также с помощью функции.

Синтаксис метода toogleClass для переключения классов с помощью функции:

// 1 параметр – функция (function)
// 2 параметр -  состояние (state). Он является необязательным и играет туже роль, что и при использовании в качестве 1 параметра строки
.toggleClass(function(index, className, state){
  // index – индекс позиции элемента в текущем наборе
  // className – текущее значение атрибута class элемента
  // state – значение состояния, установленного с помощью второго параметра  (если второй параметр toggleClass не указан, то данный аргумент будет иметь значение undefined)
  // this – указатель, содержащий ссылку на текущий объект
  ... // тело функции (в качестве результата функция должна вернуть строку, содержащую имя или имена классов (через пробел), которые будут необходимо переключить у текущего элемента)
},state);

Например, переключим класс lead с помощью функции у тех элементов p, которые имеют классы text-left или text-right:

<p class="text-left lead">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>
...
<script>
$(function(){
  $('p').toggleClass(function(index, className){
    if (($(this).hasClass('text-left')) || ($(this).hasClass('text-right'))) {
      return 'lead';
    } else { 
      return null; 
    }
  });
});
</script>

Если вам необходимо найти элементы, содержащие указанный класс, то стоит обратиться к статье "Основные селекторы для поиска элементов".

Более подробно познакомиться с методами attr и prop можно посредством следующих статей:

  • attr - метод для работы с атрибутами в jQuery;
  • prop - метод jQuery для выполнения действий над свойствами объектов (элементов).


   JavaScript и jQuery 0    1007 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.