Теория 21/02/2022 18:20

Методы jQuery для работы с CSS | Разбираем на примерах

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

Содержание:
1. Коротко о jQuery
2. Пример использования
3. Синтаксис jQuery
4. jQuery и внешний вид элементов
5. Метод jQuery css()
6. Методы для работы с CSS-классами
Заключение

1. Коротко о jQuery

В этом и паре следующих разделов быстро напомним базовую информацию по jQuery.

jQuery — открытая кроссплатформенная библиотека. По сути, это надстройка над языком JavaScript. Она помогает быстрее и эффективнее манипулировать HTML элементами. Кроме того, в ней реализованы функции для работы с Ajax.

Библиотека позволяет динамически изменять CSS-свойства элементов, добавлять и удалять их CSS-классы, а также модифицировать структуру DOM. Подробнее о возможностях jQuery написано в документации.

2. Пример использования

Чтобы использовать библиотеку jQuery, нужно подключить ее в HTML-файле. Если вы хотите загрузить jQuery на свою локальную машину, нужно указать путь к каталогу, в котором вы ее сохранили, и подключить js-скрипт библиотеки.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script>
      // Код на jQuery можно писать здесь
    </script>
  </head>
  <body>

    <!-- 
    Или здесь
    -->

  </body>
</html>

Если вы решили не скачивать jQuery, а использовать специальную CDN-ссылку, то строку, идущую после тега title, нужно заменить на:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

3. Синтаксис jQuery

Сразу начнем с примера и будем разбирать его:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      // Код на jQuery можно писать здесь
       $( function() {
         $( 'button' ).click( function() {
            $( 'p' ).text( "Hello" );
        });
       });
    </script>
  </head>
  <body>
    <button>Click me!</button>
    <p></p>
  </body>
</html>

Знак $

Этот знак сообщает компилятору, что конструкцию справа от $ нужно воспринимать как код на jQuery. Справедливости ради, надо сказать, что выражения $(function() и jQuery(function() эквивалентны. Чаще используется сокращенный вариант со знаком $.

Метод Ready()

Это метод, который «ждет» загрузки DOM-элементов документа и только после этого переходит к выполнению кода внутри себя. Например:

$( document ).ready(function() {
    // к этому моменту уже загружен и существует DOM-элемент p
$( 'p' ).text( "Hello" );
});

Выражения $( document ).ready(function(), $().ready( handler ) и $(function() тоже эквиваленты. Здесь побеждает более лаконичный вариант. Поэтому рекомендуется использовать именно его.

Селекторы

Очевидно, термин «селекторы» имеет отношение к английскому слову select (выбирать). Чтобы выбрать элемент на странице и что-то с ним сделать, нужно «выловить» его из HTML-разметки (найти его) с помощью некого фильтра, соответствующего условию. В данном случае мы найдем все элементы с тегом <p> и изменим их текст на Hello. В jQuery селектор пишется в кавычках:

$( 'p' ).text( "Hello" );

Этот код найдет целых два абзаца, например, на этой HTML-странице:

<body>
    <button>Click me!</button>
    <p>Абзац 1</p>
    <p>Абзац 2</p>
  </body>

Можно и (даже нужно) искать не по тегам, а по атрибутам:

$( '.style1' ).hide();

Тут мы находим (в общем случае) все элементы, у которых установлен стиль style1, и прячем их. Обратите внимание, что названия стилей внутри кавычек пишутся с точкой.

$('#myDiv').hide();

Тут мы находим элемент с идентификатором myDiv. Обратите внимание, что перед идентификатором ставится знак #.

События

Если с элементом или самим браузером что-то случилось (например, на элемент нажали или браузер закончил загружать страницу) — то есть произошло событие — это можно вовремя отловить и выполнить действия, запланированные для этого события (обработать событие).

$( 'button' ).click( function() {
  $( 'p' ).text( "Hello" );
});

Выше мы видим код обработки события click для кнопки button:

мы получаем кнопку по селектору button (это тег, но на нашей странице всего одна кнопка, поэтому будет найдена именно она),
для полученного элемента выполняем нужное действие (для всех элементов с тегом p меняем текст на Hello)

Все, теперь перейдем к тому, ради чего мы тут собрались.

4. jQuery и внешний вид элементов

Рассмотрим другой пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
  <body>
    
    <!-- Здесь три абзаца, 2-й и 3-й абзацы обернуты в блоки (div). А еще 1-й и 2-й абзацы обернуты в один общий блок myDiv. -->
    
    <div id="myDiv">
      <p>Это абзац №1</p>
      <div id="inrDiv">
        <p>Это абзац №2</p>
      </div>
    </div>    
    <div>
        <p>Это абзац №3</p>
    </div>
  </body>
</html>

Здесь три абзаца, 2-й и 3-й абзацы обернуты в блоки (div). А еще 1-й и 2-й абзацы обернуты в один общий блок myDiv. Посмотрим, как будут выглядеть наши абзацы на веб-странице:

В этом примере не подключен ни один файл с CSS-стилями, и в самом коде тоже стили не прописаны. Поэтому шрифт тут стандартный, цвета не изменены, фон по умолчанию белый — короче, будем считать, что кто-то забыл стилизовать наши абзацы. Но при этом у нас есть все возможности для стилизации, так этот кто-то создал несколько div’ов и даже дал идентификаторы двум из них.

Так вот, jQuery позволяет динамически изменять внешний вид (CSS-стили) элементов. Это можно делать двумя способами:

использовать метод css(), меняя значение атрибута style;
добавлять готовые CSS-классы с помощью специальных методов, меняя значение атрибута class.

Зачем использовать для этого jQuery?

Иногда нет доступа к нужным CSS-файлам проекта, чтобы их модифицировать;
Существующий код в CSS-файлах слишком запутан или написан откровенно плохо (и мы принимаем решение не лезть туда);
Чаще всего современным интерактивным веб-приложениям действительно необходима динамическая смена стилей или корректировка отдельных CSS-свойств; такова логика их работы;
Если использовать для стилизации чистый JavaScript, код становится в разы длиннее.

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

Что касается нашей веб-страницы из примера, то возможный вариант ее модификации с помощью jQuery указан ниже.

Источник: tutorialsteacher.com

Там уже появились новые для нас конструкции, с которым мы начнем разбираться прямо сейчас.

5. Метод jQuery css()

Метод css() позволяет

получить CSS-свойства для элементов;
изменить CSS-свойства;
удалить CSS-свойства.

Во всех этих случаях метод работает со значениями атрибута style, который есть у каждого элемента. Всю эту работу он делает за нас. Нам нужно лишь разобраться, какие аргументы передавать ему в том или ином случае.

Как получить значения CSS-свойств элементов

Чтобы узнать, какой цвет фона установлен для элемента, достаточно передать методу css() лишь название соответствующего CSS-свойства.

const bgc = $('#myDiv').css('background-color');
console.log(bgc)

В примере выше мы пытались выяснить, какой цвет фона установлен у блока с селектором #myDiv (в примере это строка <div id=”myDiv”>). С селекторами вы уже знакомы. И как видно из скриншота цвет оказался белым — rgba(0, 0, 0, 0).

Чтобы проверить цвет фона для остальных div’ов, используем селектор div и метод each:

 $('div').each(function(){
  var bgColors = $(this).css('background-color')
  console.log("id: "+ this.id + " | backgroundColor: " + bgColors)
});

Здесь мы сначала получаем все элементы по селектору div, а затем для каждого элемента из полученного набора:

записываем значение атрибута background-color в переменную bgColors;
выводим атрибут id;.
выводим обновленное значение переменной bgColors.

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

Важно отметить, что jQuery позволяет передавать значения в метод css() в двух форматах — через дефис (как мы пишем их в CSS-файлах) и в формате CamelCase.

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

$(‘div’).css( "background-color", "blue" );
$(‘div’).css( "backgroundColor", "blue" );

Метод css() позволяет получать и значения составных свойств:

const ft = $('#myDiv').css('font');
console.log(ft)

Видно, что размер шрифт равен 16px, а принадлежит он к семейству Times New Roman.

Как изменить или добавить CSS-свойства элементов

Для этого нам нужно передать в метод css() два аргумента:

$('#myDiv').css('background-color','yellow');

Первый аргумент, как и в прошлый раз, содержит название CSS-свойства. Второй аргумент содержит значение, которое мы хотим задать для этого свойства.

В данном случае мы выбрали элемент с идентификатором myDiv. И для него вызвали метод css() с аргументами 'background-color' и 'yellow', заменив тем самым значение атрибута style у элемента на background-color: yellow.

В позапрошлом примере мы видели, что фон для div’а myDiv был белым — rgba(0, 0, 0, 0). Посмотрим, как будет выглядеть веб-страница после вызова метода css(), описанного выше:

Фон div’а myDiv (внутри него как раз лежат два первых абзаца) стал желтым. Убедимся в этом еще раз:

const bgc = $('#myDiv').css('background-color');
console.log(bgc)

Полученное значение действительно соответствует вот такому желтому цвету.

Из предыдущего раздела мы помним, что изначально у этого div’а были только стили по умолчанию. Если же значение для какого-то свойства не определено (как бы отсутствует), то метод css(), получив в качестве аргумента название и значение для этого свойства (как бы) добавляет его в таблицу стилей.

Как установить для элемента сразу несколько CSS-свойств

Если глубже разбираться в работе метода css(), окажется, что свои аргументы он воспринимает как JSON-объект. Так, при работе с двумя аргументами существует еще один вариант синтаксиса:

$('p').css({'background-color': 'red'});

При такой записи абсолютно ясно, что перед нами объект. Более того, такая запись позволяет передавать произвольное количество пар <свойство: значение>. Например, тут две таких пары:

$('p').css({
'background-color': 'red',
'width':'400px'
});

То есть, здесь метод css() одновременно модифицирует два свойства — цвет фона и ширину.

Раз уж мы заговорили про JSON-объекты, то приведем пример поинтереснее:

const jstring = '{
'background-color': 'red',
'width':'400px'
}'
const jsonObject = JSON.parse(jstring)
$('#inrDiv').css(jsonObject);

Этот пример показывает, что CSS-свойства вместе с их значениями можно отдельно хранить в объектах. Эти объекты можно модифицировать, передавать или получать из других скриптов. И нам нужно будет поработать со стилями каких-то элементов страницы, мы вызовем для них метод css(), передав ему весь объект.

Как установить CSS-свойства для нескольких элементов сразу

Если мы, например, хотим покрасить в зеленый цвет фон всех div’ов в текущем блоке, то достаточно в качестве селектора передать тег div. Без указания идентификаторов или других отличительных особенностей.

$('div').css('background-color', 'green')

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

$('div').css('background-color', function() {
  if(this.id !== 'myDiv') {
    return 'blue'
  }
})

По условию, мы должны покрасить в синий цвет фон всех div’ов, кроме myDiv. Для этого мы в качестве второго аргумента передаем в метод css() функцию.

Грубо говоря, она вместо себя возвращает новое значение цвета для фона. Но только в том случае, если выполнено условие! Если условие не выполнено, цвет фона остается прежним.

Как удалить CSS-свойства элемента

На самом деле удаления в буквальном смысле не происходит: метод css() позволяет лишь «сбросить» значения выбранных CSS-свойств. Просто в одних случаях сброшенные свойства откатываются до значений по умолчанию, а в других остаются с неопределенными значениями.

В примере ниже свойство background-color div’а inrDiv (это блок, в который обернут абзац 2) откатывается до значения rgba(0, 0, 0, 0) — то есть, по умолчанию фоновый цвет элемента белый:

$('#inrDiv').css('background-color',''); // вторым аргументом передаем две кавычки

6. Методы для работы с CSS-классами

Мысленно вернемся в конец раздела «jQuery и внешний вид элементов» и вспомним нашу картинку. А конкретно — вот эту часть:

На ней лишь пара примеров работы с классами. Далее мы разберемся в них и добавим несколько собственных примеров.

Как добавить класс к элементу

На картинке мы уже видели конструкцию:

$('#inrDiv').addClass('myCSSClass');

Как она работает?

Ищутся элементы с заданным селектором (в данном случае это inrDiv, у нас один такой элемент).
Для каждого найденного элемента

вызывается тот самый метод addClass, в который передается имя добавляемого класса (в данном случае — myCSSClass);
выполняется проверка на существование класса с таким же именем;
если класс с таким же именем еще не был добавлен, то имя добавляемого класса автоматически вписывается между кавычек в атрибуте class, отступая на один пробел вправо от имени предыдущего добавленного класса;
если класс с таким же именем уже был добавлен, не происходит ничего.

В нашем случае у элемента не было никакого класса, и myCSSClass стал его первым добавленным классом.

Хорошо, тогда проверим описанный алгоритм, добавив еще один класс:

$('#inrDiv').addClass('myCSSClass2');

Можно также добавлять несколько классов одновременно:

$('#inrDiv').addClass('myCSSClass3 myCSSClass4');

Как получить класс элемента

В следующем подразделе будем обсуждать удаление класса. Но, перед тем, как его удалять, бывает важно узнать, есть ли вообще этот класс у элемента. Эту задачу позволяет решить метод hasClass().

Для этого ему нужно просто передать имя искомого класса:

$('#inrDiv').hasClass('myCSSClass');

Если у элемента inrDiv есть этот класс, то метод вернет true. Иначе — false.

Возьмем более интересный пример:

$('#inrDiv').addClass('myCSSClass3');
console.log($('div').hasClass('myCSSClass3'))

В первой строке мы добавили класс только элементу inrDiv. У остальных div’ов этого класса нет:

Во второй строке мы вызываем метод hasClass() для селектора div (то есть ищем класс у всех элементов с тегом div). Получим вот такой результат:

Это означает, что метод hasClass() вернет true, если искомый класс есть хотя бы у одного элемента из всех просмотренных. При этом он не сообщает нам, у каких элементов класс есть, а у каких его нет. Чтобы получить больше информации об этом, нужно использовать метод немного по-другому. Мы посмотрим на это чуть позже.

Как удалить класс у элемента

Добавим класс всем div’ам

const removableClass = 'myCSSClass';
$('div').addClass(removableClass);

Удалим этот класс только у элемента — inrDiv.

$('#inrDiv').removeClass(removableClass);

Как видите, за удаление класса отвечает метод removeClass().Он удаляет класс или набор классов. Если удаляемого класса у элемента нет, метод не делает ничего.

А вот так можно использовать методы hasClass() и removeClass() в связке.

$('div').each(function(){  
  if($(this).hasClass(removableClass)) {
    $(this).removeClass(removableClass);
  } else {
    console.log('Удаление не требуется. У элемента ' + this.id + ' нет класса ' + removableClass)
  }
})

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

Как использовать один метод для добавления и удаления

В предыдущем примере мы реализовали более сложную логику работы с CSS-классами. Можно ли решать подобные задачи проще? Ну, иногда можно.

jQuery предлагает нам метод toggleClass(), который во многих случаях может заменить целых три других метода — hasClass(), addClass() и removeClass(). Посмотрим на этот код:

$('#inrDiv').toggleClass('myCSSClass3');

Если у элемента inrDiv уже есть класс myCSSClass3 — он будет удален. Если же этого класса нет — он будет добавлен. Вот так работает метод toggleClass().

Как и в случае с другими рассмотренными методами, он может работать с несколькими классами и элементами одновременно:

$('div').toggleClass('myCSSClass3 myCSSClass4');

Также можно использовать дополнительный параметр state. Рассмотрим два случая:

state = true

$('#inrDiv').toggleClass('myCSSClass3', true);

метод будет работать так же, как и addClass() — добавлять класс, если его нет.

state = false

$('#inrDiv').toggleClass('myCSSClass3', false);

метод будет работать так же, как и removeClass() — удалять класс, если он есть у элемента.

Заключение

Как видите, jQuery имеет достаточно гибкий инструментарий для работы с CSS. То, что на чистом JavaScript пришлось бы писать длинно и долго, методы jQuery CSS позволяют сделать коротко и быстро.

Методы jQuery	Описание
`css()`	позволяет определить или изменить CSS-свойства элементов
`addClass()`	позволяет добавить класс или несколько классов выбранным элементам
`hasClass()`	позволяет определить, есть ли заданный класс (классы) у выбранных элементов
`removeClass()`	позволяет удалить класс или сразу несколько классов
`toggleClass()`	объединяет в себе характерные сценарии совместной работы `hasClass(), addClass() и removeClass()`