Редакция Highload разобралась, какие существуют методы jQuery для работы с CSS: как получить, добавить, удалить и изменить стили элементов. Кроме того, в этой статье мы отдельно расскажем про работу с их CSS-классами.
Содержание:
1. Коротко о jQuery
2. Пример использования
3. Синтаксис jQuery
4. jQuery и внешний вид элементов
5. Метод jQuery css()
6. Методы для работы с CSS-классами
Заключение
В этом и паре следующих разделов быстро напомним базовую информацию по jQuery.
jQuery — открытая кроссплатформенная библиотека. По сути, это надстройка над языком JavaScript. Она помогает быстрее и эффективнее манипулировать HTML элементами. Кроме того, в ней реализованы функции для работы с Ajax.
Библиотека позволяет динамически изменять CSS-свойства элементов, добавлять и удалять их CSS-классы, а также модифицировать структуру DOM. Подробнее о возможностях jQuery написано в документации.
Чтобы использовать библиотеку 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>
Сразу начнем с примера и будем разбирать его:
<!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() эквивалентны. Чаще используется сокращенный вариант со знаком $.
Это метод, который «ждет» загрузки 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 (это тег, но на нашей странице всего одна кнопка, поэтому будет найдена именно она),Hello)Все, теперь перейдем к тому, ради чего мы тут собрались.
Рассмотрим другой пример:
<!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;class.Зачем использовать для этого jQuery?
А иногда jQuery нужен просто для того, чтобы выяснить какие стили и классы установлены у элементов, ничего не меняя. Это, например, может понадобиться при разработке плагинов.
Что касается нашей веб-страницы из примера, то возможный вариант ее модификации с помощью jQuery указан ниже.
Там уже появились новые для нас конструкции, с которым мы начнем разбираться прямо сейчас.
Метод css() позволяет
Во всех этих случаях метод работает со значениями атрибута style, который есть у каждого элемента. Всю эту работу он делает за нас. Нам нужно лишь разобраться, какие аргументы передавать ему в том или ином случае.
Чтобы узнать, какой цвет фона установлен для элемента, достаточно передать методу 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() два аргумента:
$('#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(), окажется, что свои аргументы он воспринимает как 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(), передав ему весь объект.
Если мы, например, хотим покрасить в зеленый цвет фон всех div’ов в текущем блоке, то достаточно в качестве селектора передать тег div. Без указания идентификаторов или других отличительных особенностей.
$('div').css('background-color', 'green') 
$('div').css('background-color', function() {
if(this.id !== 'myDiv') {
return 'blue'
}
})
По условию, мы должны покрасить в синий цвет фон всех div’ов, кроме myDiv. Для этого мы в качестве второго аргумента передаем в метод css() функцию.
Грубо говоря, она вместо себя возвращает новое значение цвета для фона. Но только в том случае, если выполнено условие! Если условие не выполнено, цвет фона остается прежним.
На самом деле удаления в буквальном смысле не происходит: метод css() позволяет лишь «сбросить» значения выбранных CSS-свойств. Просто в одних случаях сброшенные свойства откатываются до значений по умолчанию, а в других остаются с неопределенными значениями.
В примере ниже свойство background-color div’а inrDiv (это блок, в который обернут абзац 2) откатывается до значения rgba(0, 0, 0, 0) — то есть, по умолчанию фоновый цвет элемента белый:
$('#inrDiv').css('background-color',''); // вторым аргументом передаем две кавычки Мысленно вернемся в конец раздела «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. Рассмотрим два случая:
$('#inrDiv').toggleClass('myCSSClass3', true); метод будет работать так же, как и addClass() — добавлять класс, если его нет.
$('#inrDiv').toggleClass('myCSSClass3', false); метод будет работать так же, как и removeClass() — удалять класс, если он есть у элемента.
Как видите, jQuery имеет достаточно гибкий инструментарий для работы с CSS. То, что на чистом JavaScript пришлось бы писать длинно и долго, методы jQuery CSS позволяют сделать коротко и быстро.
| Методы jQuery | Описание |
css() | позволяет определить или изменить CSS-свойства элементов |
addClass() | позволяет добавить класс или несколько классов выбранным элементам |
hasClass() | позволяет определить, есть ли заданный класс (классы) у выбранных элементов |
removeClass() | позволяет удалить класс или сразу несколько классов |
toggleClass() | объединяет в себе характерные сценарии совместной работы hasClass(), addClass() и removeClass() |
В заключение напомним, что документация jQuery по методам для работы с CSS находится здесь.
Видео для закрепления материала: Примеры работы метода css() + бонусный пример с цепочкой вызовов.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…