Стилизация с помощью jQuery
Стилизация с помощью jQuery
«Стилизация с помощью jQuery» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Введение
Здравствуйте!
Во всех предыдущих примерах мы работали с объектами HTML DOM.
С помощью jQuery мы также можем изменять стили HTML-элементов.
jQuery предоставляет для этого несколько методов.
класс
В первых примерах мы рассмотрим использование классов в jQuery.
В примере ниже мы подключаем библиотеку jQuery к HTML и определяем два класса с именами розовый и жёлтый, которые делают текст розовым и жёлтым.
Начнём 🚀
Пример
Мы добавили элемент <p> между тегами <body>.
Пока у этого элемента ещё нет класса.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>Пример 2
Теперь добавим класс розовый к элементу абзаца с помощью метода addClass().
На экране предварительного просмотра мы увидим, что цвет текста Lorem ipsum станет розовым.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
Метод removeClass()
Если мы хотим удалить классы у HTML-элементов, используется метод removeClass().
Мы изменили пример ниже и изначально определили класс розовый у нашего HTML-элемента. Как только DOM загрузится, класс розовый у нашего элемента p будет удалён.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>Переключение класса
Метод toggleClass()
Как понятно из названия, с помощью этого метода
класс целевого элемента удаляется, если он существует, и добавляется, если его нет.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Метод CSS
Метод css()
Мы рассмотрели методы добавления и удаления классов.
Теперь изучим метод CSS, используемый для определения встроенных стилей наших HTML-узлов.
Метод CSS принимает два параметра.
- Первый параметр — имя назначаемого свойства.
- Второй параметр — значение назначаемого свойства.
В следующем примере показаны различные способы использования метода CSS.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
API jQuery
Мы изучили множество операций изменения DOM с помощью jQuery.
Помимо изученных нами методов, в jQuery есть множество других методов изменения.
Вы можете просмотреть весь API, перейдя по ссылке ниже.
Поздравляем
Поздравляем 🎉
Мы изучили стилизацию с помощью jQuery.
В следующем разделе мы изучим управление событиями в jQuery.
Часто задаваемые вопросы
Урок «Стилизация с помощью jQuery» бесплатный?
Да — полный текст урока «Стилизация с помощью jQuery» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.
Чему я научусь в уроке «Стилизация с помощью jQuery»?
Стилизация с помощью jQuery Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Стилизация с помощью jQuery»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.