На странице описания библиотеки jQuery, а также при описании селектора и процесса фильтрации выбранного набора приводится множество примеров изменения стиля элементов объектной модели документа DOM с помощью метода css(), который более подробно рассмотрим на этой странице. Данный метод позволяет выполнять следующие действия, имеющие отношения к CSS :

изменять стиль выбранных элементов;
добавлять к элементу класс и удалять класс из элемента.

Просмотр CSS-свойств

Прежде чем управлять стилями и классами элементов DOM, рассмотрим вопрос получения CSS-свойств с помощью библиотеки jQuery. Следующий пример демонстрирует процесс просмотра размера шрифта двух отобранных селектором элементов (третьего/последнего и второго) :

<body>
  <h3>Пример jQuery</h3>
  <p>Верхняя строка</p>
  <p class="middle"><em>Средняя</em> строка</p>
  <p style="font-size:14px"><em>Нижняя</em> строка</p>

  <script type="text/javascript">
    $(document).ready(function() {
      var size = jQuery('p:last').css('font-size');
      alert('Размер шрифта : size =' + size);

      size = $('p').filter('.middle').css('font-size');
      alert('Размер шрифта : size =' + size);
    });
  </script>
</body>

В представленном примере используется идиома document–ready, функция jQuery и её псевдоним $, фильтр в селекторе ('p:last') и фильтр-метод .filter('.middle'), описанные на отдельных страницах. Методом css() извлекается размер шрифта определенного элемента в наборе.

Примечание :
1. Методом css() можно запросить CSS-свойство после выполнения выборки множественных элементов : функция способна возвращать только одно свойство, т.е. свойство, относящееся к первому элементу выборки.
2. Функция jQuery позволяет получить вычисляемый стиль элемента. Это означает, что метод возвращает значение стиля CSS-элемента, отображаемое в браузере, а не то, которое указано в CSS-определении. Таким образом, если, к примеру, в CSS-файле высота элемента <div> была задана в 120 пикселей, то метод css() может вернуть только реальное значение высоты элемента.

Настройка CSS-свойств

При описании селектора для выделения фона четных строк (стиль «зебры») в таблице был использован следующий jQuery-скрипт :


$(document).ready(function() {
  $('#milk tbody tr:even').css('background-color','#eee');
}

В отличие от предыдущих примеров использования css() с одним параметром для просмотра размеров шрифтов, в последнем примере методу передается два параметра : наименование и новое значение атрибута. Необходимо отметить, что скрипт вызывается внутри функции, контролирующую формирование объектной модели документа DOM и загрузку библиотеки jQuery.

В случае необходимости переопределения нескольких CSS-атрибутов выбранных элементов можно использовать несколько скриптов. К примеру, если неоходимо вместе с фоном изменить и цвет шрифта, то в тело функции можно включить второй скрипт, как это представлено в следующем листинге :


$(document).ready(function() {
  $('#milk tbody tr:even').css('background-color','#eee');
  $('#milk tbody tr:even').css('color','#88bbee');
}

Выполнение двух скриптов выполняется поочередно. Несмотря на то, что результат будет достигнут, код выглядит небрежным : два раза выполняется выбор элементов. И это можно исправить; библиотека jQuery позволяет настраивать множественные атрибуты элементов за один проход при помощи литерала объекта, имеющего отношения к концепции JavaScript. Литералы объектов позволяют сопоставлять CSS-свойства (ключи) с сответствующими CSS-атрибутами (значениями). Следующий листинг демонстрирует объединение двух скриптов в один скрипт :


$(document).ready(function() {
    $('#milk tbody tr:even').css({'background-color':'#eee',
                                  'color':'#88bbee'});
}

Литерал объекта заключен в фигурные скобки и содержит набор из двух «ключей:значений». Ключ (свойство) отделяется от его значения двоеточием. Пара «ключ:значение» отделяется от последующей запятой. Таким образом, методу css() передается литерал объекта в качестве одиночного параметра.

При работе с CSS-объектами использовать ключи из двух слов в кавычках не обязательно; можно использовать описание ключа в стиле CamelCase, когда свойство из двух слов объединяется в одно без разделяющегося дефиса, а второе слово начинается с прописной буквы. Так, например, свойство 'background-color' может быть представлено в виде backgroundColor без кавычек.

Однако, любой ключ, представленный одним словом, но имеющий ключевое значение в сфере языка JavaScript (например, float, class) должен быть заключен в кавычки. Поэтому, легче помещать ключи в кавычки, чем запоминать дополнительные правила использования ключей без кавычек.

Добавление и удаление классов

Представленные выше примеры позволяют методом css() определить новые CSS-свойства выбранных элементов. Управлять CSS-cвойствами элементов DOM'енной модели документа можно не только с помощью метода css(). Библиотека jQuery включает метод addClass, позволяющий выбранным элементам селектора присвоить значения одного или нескольких классов, описанных в отдельных стилевых css-файлах :


$('div').addClass('class_name');
$('p').addClass('class_name1 class_name2 class_name3');

Метод addClass может принимать в качестве параметра строковое значение, определяющее значение одного или нескольких классов. В случае включения нескольких классов в строку сепаратором является символ пробела. Преимущество использования метода addClass для определения css-свойств элементов DOM'енной модели путем присвоения определенного/ых класса/ов обусловлено тем, что описания всех классов собирается в отдельном/ых файле/ах.

Рассмотрим повторно пример с представлением записей таблицы в стиле «зебры» с использованием метода addClass. Сначала необходимо определить стиль «зебры» (zebra) либо во внешнем css-файле, либо в заголовке (<head>) WEB-страницы :


.zebra {
    'background-color' : '#eee';
    'color'            : '#88bbee';
}

После определения стиля zebra можно использовать метод addClass для представления стиля таблицы :


$(document).ready(function() {
    $('#milk tbody tr:even').addClass('zebra');
}

Результат выполнения метода .addClass('zebra') аналогичен вызовом метода css() с литералом объекта.

Если в дальнейшем появится необходимость изменения внешнего вида «зебра-полос», достаточно будет выполнить модификацию CSS-класса в одном файле, а не искать соответствующий код на различных WEB-страницах проекта.

Метод removeClass

В случае возникновения ситуации, когда необходимо будет удалить какой-либо класс из элемента DOM'енной модели необходимо воспользоваться методом removeClass. Данный метод используется точно также, как и addClass, которому следует передать в качестве параметра (не)нужное наименование класса :


$(document).ready(function() {
    $('#milk tbody tr:even').removeClass('zebra');
}

Демонстрация

Ниже представлен блок <div />, в котором реализован описанный выше пример, включая функцию библиотеки jQuery. Нажатием на соответствующую кнопку Вы можете изменить стиль представления четных строк (подсветку).

Выборка элементов JQuery

Наименование	Количество	Цена	Стоимость
Молоко	2 л	35 руб/л	70 руб
Кефир	1.5 л	40 руб/л	60 руб
Ряженка	1 л	48 руб/л	48 руб
Йогурт	0.5 л	44 руб/кор	44 руб

Связанные страницы

Описание библиотеки jQuery
Выбор элементов из объектной модели документа DOM
Фильтрация наборов и поиск элементов jQuery методами filter, find
Действия и обработчики событий jQuery
Загрузка скриптов из внешнего файла
Базовая анимация библиотекой jQuery