Jquery удалить все классы: Как удалить все классы CSS с помощью jQuery?

Методы jQuery: removeClass ()

Метод jQuery removeClass()удаляет атрибуты класса из выбранного элемента. Удаление атрибутов класса может быть глобальным или конкретным по мере необходимости. Атрибуты класса назначаются в файле HTML и стилизованы с помощью CSS.

Использование jQuery для обмена данными между HTML и CSS даёт возможность создавать более гибкие веб-приложения. Включая removeClass()и удаляя атрибут class, разработчики могут по существу «отключить» стили CSS для HTML. Часто removeClass () используется вместе с addClass().

addClass()является инверсией removeClass и разделяет синтаксические практики. Узнайте больше addClass()в этом руководстве.

Содержание

  1. Как работает jQuery removeClass ()
  2. Синтаксис jQuery removeClass ()
  3. Примеры jQuery removeClass ()
  4. Заключение

Как работает 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>
<h3>
removeClass() Demo:
</h3>
<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 для создания динамического взаимодействия с пользователем.

Удалить имя класса из нескольких элементов с помощью чистого JavaScript – clubmate.fi

Удалить имя класса из нескольких элементов с помощью чистого JavaScript В этом посте рассматриваются все способы манипулирования несколькими элементами DOM. Это можно сделать с помощью цикла

while или с помощью рекурсии при использовании живой HTMLCollection.

Общая проблема для кодировщика коммандос — манипулировать несколькими элементами, для этого обычно требуется цикл, но в этом нет необходимости, если идти чисто функциональным путем с использованием рекурсии.

Вот измененный HTML:

 
foo
полоса
баз
фуз

Мы хотим удалить эти классы . active при нажатии кнопки «Деактивировать».

Цикл for

Сначала давайте воспользуемся старым добрым циклом for в качестве отправной точки.

 var els = document.querySelectorAll('.something.active')var button = document.querySelector('.button')
button.addEventListener('click', _removeClasses) function _removeClasses() { for (var i = 0; i < els.length; i++) {
    els[i].classList.remove('активный')
  }
} 

Это не так уж плохо, но мы можем добиться большего успеха с Document.getElementsByClassName() для извлечения элементов, он возвращает массивоподобный объект, который является живым HTMLCollection .

Коллекция HTMLCollection в HTML DOM активна; он автоматически обновляется при изменении базового документа.

Приведенный ниже цикл while лучше иллюстрирует живой характер коллекций HTML.

Цикл while

 // Это дает нам живую `HTMLCollection`
var els = document. getElementsByClassName('что-то активное')
кнопка var = document.querySelector('.button')
button.addEventListener('щелчок', _removeClasses)
функция _removeClasses() {
  в то время как (элс [0]) {
    els[0].classList.remove('активный')
  }
} 

Разбивка:

document.getElementsByClassName()
Возвращает живую коллекцию HTMLCollection, а не nodeList.
while (els[0])
Продолжается, пока в коллекции есть сок, коллекция обновляется "вживую".
els[0].classList.remove('active')
Когда имя класса удаляется, элемент удаляется из коллекции, следовательно, он "живой".

Всякий раз, когда есть в то время как цикл , вместо этого можно использовать рекурсию.

Рекурсивная функция

Напоминаем: рекурсия происходит, когда функция вызывает сама себя . Здесь функция _removeClasses вызывает себя после условия остановки if (els[0]) :

 var els = document. getElementsByClassName('something active')
кнопка var = document.querySelector('.button')
button.addEventListener('щелчок', _removeClasses)
функция _removeClasses() {
  els[0].classList.remove('активный')
  если (элс[0]) _removeClasses()
} 

Рекурсивная функция может быть разбита на 3 части:

  1. Бизнес-логика: els[0].classList.remove('active')
  2. Условие остановки: if (els[0])
  3. Рекурсия: _removeClasses()

Демонстрация

JS Bin на jsbin.com

Выводы

Для меня это было открытием в HTMLCollection s. Надеюсь, это также помогло вам, оставьте комментарий, если у вас есть что добавить.

Как добавлять, удалять и переключать классы CSS в JavaScript

Как веб-разработчик, вам часто приходится добавлять, удалять и переключать классы CSS в зависимости от взаимодействия пользователя с элементами на веб-странице. Если вы уже использовали jQuery в прошлом, вы, вероятно, знакомы с методами addClass() , removeClass() и toggleClass() .

Что такое селекторы CSS - Как использовать...

Пожалуйста, включите JavaScript

Что такое селекторы CSS - Как использовать селекторы CSS - Разработка внешнего интерфейса. Полный курс обучения 14

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

Установка классов CSS с помощью свойства

className

Самый простой способ получить и установить классы CSS в JavaScript — использовать свойство className . Он относится к значению атрибута класса элемента HTML .

Допустим, у нас есть следующий элемент HTML:

 
🍕

В следующем примере показано, как добавить новый класс CSS или заменить все существующие классы CSS указанного выше элемента

:

 const pizza = document. querySelector('.pizza')
// вывести существующие классы
console.log(pizza.className) // пицца
// добавить новый класс `.spicy`
pizza.className += 'острая'
// заменить все существующие классы
pizza.className = 'горячая острая пицца'
 

С class — это зарезервированное слово в JavaScript, для этого свойства используется имя className . Это свойство поддерживается всеми современными и старыми браузерами, включая Internet Explorer.

Установка классов CSS с помощью свойства

classList

Существует еще лучший способ управления классами CSS в JavaScript благодаря свойству classList . Это свойство , доступное только для чтения, которое возвращает live DOMTokenList коллекцию всех классов, примененных к элементу.

Свойство classList работает во всех современных браузерах, а также в IE10 и выше.

Вы можете использовать свойство classList , чтобы легко добавлять, удалять и переключать классы CSS из элемента в ванильном JavaScript.

Скажем, у нас есть элемент, как показано ниже:

 
🍕

Давайте возьмем ссылку на указанный выше элемент

и выведем существующие классы в консоль:

 // получить ссылку на элемент
const pizza = document.querySelector('.pizza')
// получить все существующие классы
console.log(пицца.classList)
// ["горячая", "острая", "пицца", значение: "острая острая пицца"]
// получаем имя первого класса
console.log(pizza.classList[0]) // горячо
// получаем общее количество классов
console.log(пицца.classList.length) // 3
 

Теперь рассмотрим популярные методы коллекции DOMTokenList , возвращаемые свойством classList . Мы будем использовать эти методы для управления и обновления классов CSS для элемента HTML.

item() Method

Метод item() возвращает класс в коллекции по его индексу или undefined , если индекс больше или равен длине списка

свойство:

 консоль . log(pizza.classList.item(1)) // острый
 

add() Method

Метод add() добавляет один или несколько классов к элементу HTML:

 pizza.classList.add('sauce', 'cheese', 'tomato')
 

Теперь элемент выглядит следующим образом:

 
🍕

Если вы попытаетесь добавить класс, который уже существует, метод add() будет игнорировать его. Чтобы увидеть, как это работает, добавим в пиццу еще сыра :

 pizza.classList.add('сыр')
 

Вот элемент сейчас:

 
🍕

contains() Method

Метод contains() возвращает true , если элемент содержит данный класс, иначе false :

 console.log(pizza.classList.contains('сыр') ) // истинный
console.log(pizza.classList.contains('йогурт')) // false
 

remove() Метод

remove() метод используется для удаления одного или нескольких классов из элемента:

 pizza. classList.remove('sauce', 'potato')
 

Если вы попытаетесь удалить несуществующий класс, как мы сделали в приведенном выше примере, ошибки не будет. JavaScript полностью проигнорирует это.

метод toggle()

Метод toggle() удаляет класс, если он уже существует. В противном случае он добавляется в коллекцию.

Без этого метода вам придется вручную проверить, существует ли класс, используя contains() перед его включением или выключением:

 // ручное переключение
если (pizza.classList.contains('оливковое')) {
  Pizza.classList.remove('оливковое')
} еще {
  Pizza.classList.add('оливковое')
}
 

С помощью метода toggle()

вы передаете имя класса, который хотите переключить:

 pizza.classList.toggle('olive')
 

Метод toggle() возвращает true , если класс был добавлен и false , если он был удален:

 const status = pizza. classList.toggle('olive')
console.log(status) // true --> добавлен класс
 

Вы также можете передать второй логический параметр в метод toggle() , чтобы указать, следует ли добавить класс или удалить его. Это превратит toggle() в одностороннюю операцию.

Если второй аргумент оценивается как false , то класс будет только удален, но не добавлен. Если он оценивается в true , тогда класс будет только добавлен, но не удален.

Вот пример:

 const status = pizza.classList.toggle('hot', false)
console.log(status) // false --> класс удален
 

replace() Method

Метод replace() можно использовать для замены класса CSS другим классом:

 pizza.classList.replace('spicy', 'olive')
 

Этот метод возвращает true , если целевой класс успешно заменен новым классом. В противном случае ложь .

Метод replace() не поддерживается Internet Explorer.

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

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