Учим jQuery — Часть 4

В этой главе изучаем добавление стилей и смену классов.

Читать предыдущий урок

4.1 Меняем CSS у заданного селектора

Первый вариант как можно это сделать, выглядит так:

jQuery('.is-search-submit').css('color', 'red');

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

$('.is-search-submit').css({color: 'red', fontWeight: 'bold'});

В этой записи интересны сразу 2 вещи:
1. Вы можете передавать json в фигурных скобках, чтобы применить сразу несколько стилей
2. fontWeight — нужно писать через camelCase, вместо стандартного font-weight. Это обязательно? Нет 🙂 font-weight тоже подходит, но помнить про такой вариант записи будет плюсом. Это более в духе javascript. Разница также в том, что fontWeight можно писать без кавычек, а вот ‘font-weight’, написанный без кавычек, вызывает ошибку.

Более читаемый вариант для нескольких свойств выглядит так:

$('#panel1').css({
  color: 'red',
  fontWeight: 'bold'
});

4.2 Смена классов

Один из самых важных уроков jQuery — добавление, удаление классов. Именно такой вариант наиболее рекомендован, если дело касается стилей. В отличие от того же .css() ваши классы и их стили по прежнему будут в файле стилей, что создает более логичную структуру проекта.

$('.panel1').addClass('active');
$('.panel1').removeClass('active');
$('.panel1').toggleClass('active');

addClass — добавляет класс
removeClass — удалят класс
toggleClass — если класса нет — добавляет, если есть, то убирает (полезно использовать при клике)

4.3 Бонусный урок js-классы

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

<div class="main-wrap">...</div>

То в такой ситуации, не нужно вешать js событие прям на этот класс. Самым лучшим решением будет добавление js класса, который НЕ ЗАВИСИТ от стилей в вашем файле css:

<div class="js-slide main-wrap">...</div>

И событие для jQuery писать уже на него:

$('.js-slide').slideToggle(500);

Что мы получаем? На выходе у вас есть js-slide который вы можете использовать абсолютно к любым элементам, и при этом не дублируя код события. CSS никак не влияет, понятное дело что писать стили для js-slide не нужно, их записывайте в main-wrap. Глядя на вёрстку, разработчик быстрее поймет — «ага, есть js-slide, а значит на этот элемент есть событие».

Вот таким вот простым действием вы сделаете ваш код более красивым и логичным 🙂

Переход на урок 5

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *