Теория 21/02/2022

Методы 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() эквивалентны. Чаще используется сокращенный вариант со знаком $.

Курс Quality Assurance (QA) від Mate academy.

Курс QA — ідеальний для новачка. Від основ тестування до складних стратегій — опануйте всі технології, щоб жодна помилка не змогла вас оминути. Ми впевнені в якості нашого курсу, тому гарантуємо вам працевлаштування після його завершення.

Зареєструватись на курс

Метод 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;

Онлайн-інтенсив "Як створити рекомендаційну модель за 2 дні" від robot_dreams.

Ви пройдете етапи вибору, навчання, оцінки рекомендаційної моделі для електронної бібліотеки та отримаєте індивідуальний фідбек від лекторки.

Приєднатись до інтенсиву

добавлять готовые 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.

Онлайн-курс Бізнес-аналіз. Basic Level від Ithillel.

В ході курсу студенти навчаться техніці збору і аналізу вимог, документуванню та управлінню документацією, управлінню ризиками та змінами, а також навчаться моделювати процеси і прототипуванню.

Приєднатися

Как изменить или добавить 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() функцию.

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

Онлайн курс UI/UX Design Pro від Ithillel.

Навчіться проєктувати інтерфейси з урахуванням поведінки користувачів, розв'язувати їх проблеми через Customer Journey Mapping, створювати дизайн-системи і проводити дослідження юзабіліті, включаючи проєктування мобільних додатків для Android та iOS і розробку UX/UI на основі даних!

Дізнатися більше

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

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

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

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

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

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

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

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

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

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

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

Курс-професія "Дизайнер інтер'єрів" від Skvot.

Велика практична програма для всіх, хто хоче засвоїти професію дизайнера інтер'єрів і заробляти на реальних проєктах відразу після курсу. Досвідом та інсайтами діляться одразу три лектори.

Програма курсу

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

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

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

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

Курс Digital Marketing від Mate academy.

На курсі ви навчитесь запускати рекламу в кабінтеах Facebook/Instagram та Google. Ви також познайомитися з SEO та Email marketing. Це ті навики які найчастіше просять ІТ компанії від Junior Marketers. А ми вас не лише навчимо, а й працевлаштуємо!

Дізнатися більше про курс

$('#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). Получим вот такой результат:

Онлайн-курс "Computer Vision" від robot_dreams.

Застосовуйте Machine Learning / Deep Learning та вчіть нейронні мережі розпізнавати об’єкти на відео. Отримайте необхідні компетенції Computer Vision Engineer.

Дізнатись більше про курс

Это означает, что метод 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()`

В заключение напомним, что документация jQuery по методам для работы с CSS находится здесь.

Видео для закрепления материала: Примеры работы метода css() + бонусный пример с цепочкой вызовов.

Основи Web дизайну від Ithillel.

Цей онлайн-курс з основ веб-дизайну дозволить вам опанувати мистецтво створення ефективних та привабливих інтерфейсів для вебсайтів і застосунків. Ви оволодієте ключовими принципами UX/UI дизайну, створюватимете дизайн-макети та прототипи, розроблятимете адаптивні інтерфейси для різних пристроїв, готуючись до професійної кар'єри в галузі веб-дизайну.

Дізнатися більше