Метод jQuery removeClass()удаляет атрибуты класса из выбранного элемента. Удаление атрибутов класса может быть глобальным или конкретным по мере необходимости. Атрибуты класса назначаются в файле HTML и стилизованы с помощью CSS.
Использование jQuery для обмена данными между HTML и CSS даёт возможность создавать более гибкие веб-приложения. Включая removeClass()и удаляя атрибут class, разработчики могут по существу «отключить» стили CSS для HTML. Часто removeClass () используется вместе с addClass().
addClass()является инверсией removeClass и разделяет синтаксические практики. Узнайте больше addClass()в этом руководстве.
Как работает jQuery removeClass ()
removeClass()удаляет атрибуты класса из выбранного элемента. Предположим, у вас есть <div> с парой тегов <p>. Каждый тег <p> имеет свой класс, стилизованный в CSS. Мы могли бы удалить атрибуты класса всех тегов <p>, выбрав элемент «p». Это по существу «отключит» стили CSS и отобразит теги <p> в необработанном HTML.
Чтобы уточнить наши атрибуты класса, мы можем передать имя класса в качестве параметра в removeClass(). Это удаляет только перечисленные атрибуты класса. Как общее, так и конкретное удаление атрибутов класса может быть выполнено в одной строке кода.
Теперь, когда мы знаем, как removeClass()работает, поговорим о синтаксисе.
Синтаксис jQuery removeClass ()
Синтаксис для removeClass()аналогичен большинству других методов в jQuery. Продолжим наш предыдущий пример тега <p>.
$ (‘p’). removeClass ()
Мы начинаем с метода селектора jQuery $, чтобы выбрать все теги <p>. Вызов removeClass()без параметров просто удалит все атрибуты класса из выбранных элементов. В нынешнем виде наши теги <p> не имеют никакого стиля.
Удалим только один атрибут класса из наших тегов <p>.
$ (‘p’). removeClass (‘первичный класс’)
Здесь мы передали нашему removeClass()методу имя класса primaryClass. Это удаляет все атрибуты класса из тегов <p> с именем класса primaryClass. Теперь не стилизованы только эти теги <p>, а остальные теги <p>, принадлежащие другому классу, остаются нетронутыми.
removeClass()может принимать в качестве параметров многие имена классов. Напишите их с пробелом между ними, например:
$ (‘p’). removeClass (‘classOne classTwo classThree’)
Это удаляет атрибуты класса из всех тегов <p> с именем класса classOne, classTwo или classThree.
Теперь, когда мы рассмотрели основной синтаксис removeClass(), давайте взглянем на пару примеров.
Примеры jQuery removeClass ()
Мы расширим наш пример тега <p>, чтобы включить все три варианта синтаксиса. Начнём с настройки нашей базовой HTML-страницы.
<head>
<style>
.green {
color: green;
}
.strike {
text-decoration: line-through
}
.highlight {
background: purple
}
</style>
<script src=»https://code.jquery.com/jquery-3.5.0.js»></script>
</head>
<body>
<h2>
removeClass() Demo:
</h2>
<p class=’green’>
Hello
</p>
<p class=’highlight’>
World
</p>
<p class= ‘green strike’>
Goodbye
</p>
</body>
Наш базовый HTML выглядит так:
Начиная с отказа от передачи removeClass()каких-либо параметров, мы можем удалить все атрибуты класса из тегов <p>.
$ (‘p’). removeClass ()
Теперь наша HTML-страница выглядит так:
В точности то, что мы предсказали! Теперь давайте удалим атрибуты класса из любых тегов <p>, принадлежащих классу «зелёный».
$(‘p’).removeClass(‘green’)
Это должно убрать зелёный цвет со слов «Привет» и «До свидания». Фиолетовая подсветка слова «World» и зачёркнутый текст «Goodbye» останутся нетронутыми.
Отлично! Передадим два имени класса removeClass(). Мы можем удалить фиолетовое выделение и зачёркивание в одной строке кода:
$ (‘p’). removeClass (‘выделение’)
Теперь мы должны увидеть, как зелёный цвет возвращается к «Hello» и «Goodbye».
Мы видели, как removeClass()удаляются все или некоторые атрибуты класса в зависимости от того, какие параметры ему передаются. Давайте подведём итоги тому, что мы узнали, чтобы вы могли попрактиковаться в новом навыке!
Заключение
jQuery removeClass()удаляет атрибуты класса выбранного элемента. Если параметры не передаются removeClass(), он просто удаляет все атрибуты элемента. Он может выбирать несколько имён классов в качестве параметров, поэтому удаление возможно в одной строке кода.
Атрибуты классов могут быть более сложными, чем цвета. Они могут быть анимацией или любым желаемым поведением. Удаляя атрибуты класса, мы по существу «выключаем» это поведение. Когда вам станет удобнее использовать этот removeClass()метод, попробуйте использовать его removeClass()с прослушивателем событий jQuery для создания динамического взаимодействия с пользователем.
