Главная » Языки программирования

Jquery css добавить класс

На чтение 10 мин
Содержание
  1. .addClass()
  2. version added: 1.0 .addClass( className )
  3. version added: 3.3 .addClass( classNames )
  4. version added: 1.4 .addClass( function )
  5. version added: 3.3 .addClass( function )
  6. Examples:
  7. Добавление класса
  8. В действии
  9. См. также
  10. Ссылки
  11. Манипулирование классами CSS элементов в jQuery
  12. Проверка класса с помощью метода hasClass()
  13. Добавляем класс с помощью метода addClass()
  14. Удаление классов с помощью метода removeClass()
  15. Переключение классов с помощью метода toggleClass()
  16. Заключение
  17. 5 последних уроков рубрики "jQuery"
  18. Анимация набора текста на jQuery
  19. Временная шкала на jQuery
  20. Заметка: Перезагрузка и редирект на JavaScript
  21. Category: Class Attribute
  22. .addClass()
  23. .hasClass()
  24. .removeClass()
  25. .toggleClass()
  26. Books

.addClass()

Description: Adds the specified class(es) to each element in the set of matched elements.

version added: 1.0 .addClass( className )

version added: 3.3 .addClass( classNames )

version added: 1.4 .addClass( function )

A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

version added: 3.3 .addClass( function )

A function returning one or more space-separated class names or an array of class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

It’s important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

Before jQuery version 1.12/2.2, the .addClass() method manipulated the className property of the selected elements, not the class attribute. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).

As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the class attribute is used instead. So, .addClass() can be used on XML or SVG documents.

More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

$( "p" ).addClass( "myClass yourClass" );

This method is often used with .removeClass() to switch elements’ classes from one to another, like so:

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

As of jQuery 1.4, the .addClass() method’s argument can receive a function.

$( "ul li" ).addClass(function( index ) 
 return "item-" + index;
>);

Examples:

Add the class "selected" to the matched elements.

Источник

Добавление класса

Добавляет класс(ы) выбранным элементам страницы. Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их. Функция имеет два варианта использования:

добавляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку, с перечислением добавляемых классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, class — текущий класс(ы) элемента.

$("#content").addClass("blackZone") добавит класс blackZone элементу с идентификатором content
$(".content").addClass("blackZone") добавит класс blackZone всем элементам с классом content (то есть, у этих элементов станет по меньшей мере два класса: class="content blackZone".

В действии

Добавим всем div-элементам на странице класс dotted, для добавления точечной красной рамки:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div < display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; font-size: 20pt; >.green .gray .dotted ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div~gt~ 1 ~lt~/div~gt~ ~lt~div ~gt~ 2 ~lt~/div~gt~ ~lt~div ~gt~ 3 ~lt~/div~gt~ ~lt~script~gt~ $("div").addClass("dotted"); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

См. также

Ссылки

  • добавить класс элементам страницы
  • добавление класса элементам
  • прибавить класс элементам
  • .addClass()
  • addClass()

Источник

Манипулирование классами CSS элементов в jQuery

В данном уроке будут продемонстрированы некоторые специальные методы для работы с атрибутами элементов class :

  • hasClass() для проверки того, что элемент имеет определённый класс
  • addClass() для добавления класса элементу
  • removeClass() для удаления класса из элемента
  • toggleClass() для добавления класса элементу в том случае, если элемент ещё не имеет такого класса, или для удаления класса, если класс уже есть у элемента

Методы attr() и removeAttr() также позволяют работать с классами, но использование методов, описанных в данном уроке позволяет получить следующие преимущества при работе с классами CSS:

  • Они значительно облегчают использование классов СSS в jQuery
  • Значения атрибута class часто содержат много имён классов, что усложняет работу с ним по сравнению с другими атрибутами.

Рассмотрим каждый метод в отдельности.

Проверка класса с помощью метода hasClass()

С помощью метода hasClass() вы можете проверить, есть ли хотя бы один элемент с определённым классом. Нужно передать методу имя класса, который нужно проверить. Метод hasClass() возвращает true , если хотябы один элемент в объекте jQuery имеет указанный класс, или false в другом случае.

Ниже приводится пример использования метода hasClass() . Скрипт выдаст сообщение "Нашёл", потому что первый div на странице содержит класс "summary" :

      
Этот элемент имеет класс summary
 
Это другой div
 
и ещё один div

Добавляем класс с помощью метода addClass()

если Вы хотите добавить класса к элементу, используйте метод addClass() , передав ему имя класса, который нужно добавить:

// Добавляем класс 'summary' к #myDiv $('#myDiv').addClass('summary');

Если у элемента уже есть указанный класс, метод addClass() не производит никаких действий.

Также можно добавить один и тот же класс нескольким элементам сразу:

// Добавляем класс 'summary' всем элементам div на странице $('div').addClass('summary');

чтобы добавить несколько классов, нужно разделить их имена пробелами:

// Добавляем классы 'header' и 'summary' к #myDiv $('#myDiv').addClass('header summary');

Вы можете передать возвратную функцию методу addClass() . Возвратная функция должна принимать два аргумента 2:

  • Индекс позиции текущего элемента в наборе (начинается с ноля)
  • старое значение атрибута class для текущего выбранного элемента

Функция должна возвращать имя класса для добавления (или несколько имён, разделённых пробелами).

Удаление классов с помощью метода removeClass()

Метод removeClass() удаляет один или более классов из одного или нескольких элементов. Синтаксис вызова идентичен синтаксису вызова метода addClass() . Единственным отличием является то, что вы можете не передавать имя класса в качестве аргумента, потому что в этом случае метод удалит все классы из элемента.

Примеры использования метода removeClass() :

// Удаляем класс 'summary' из #myDiv $('#myDiv').removeClass('summary'); // Удаляем классы 'header' и 'summary' из #myDiv $('#myDiv').removeClass('header summary'); // Удаляем класс 'summary' из всех div на странице $('div').removeClass('summary'); // Удаляем все классы из всех div на странице $('div').removeClass(); // Пример использования возвратной функции: удаляем класс 'summary' только из первых трёх div на странице $('div').removeClass( firstThreeOnly ); function firstThreeOnly( index, classAttribute )

Переключение классов с помощью метода toggleClass()

Метод toggleClass() позволяет переключать класс для одного или нескольких элементов. Другими словами, если элемент имеет класс, то метод его удаляет; если у элемента не было такого класса, то метод его добавляет.

Метод toggleClass() используется с аргументов в виде имени класса, который нужно переключить:

// Переключаем класс 'summary' для элемента #myDiv $('#myDiv').toggleClass('summary'); // Переключаем класс 'summary' для всех div $('div').toggleClass('summary');

Для переключения нескольких классов, их имена нужно разделить пробелами:

// Переключаем классы 'header' и 'summary' для элемента #myDiv $('#myDiv').toggleClass('header summary');

Вы также можете управлять режимами переключения с помощью второго аргумента метода toggleClass() :

  • Если передать true , то метод toggleClass() будет всегда добавлять класс, как будто вы вызвали метод addClass() .
  • Если передать false , то метод toggleClass() будет всегда удалять класс, как будто вы вызвали метод removeClass() .
// Случайно добавляет или удаляет класс 'summary' из элемента #myDiv $('#myDiv').toggleClass( 'summary', ( Math.random() < .5 ) );

Такое управление режимом переключения используется в том случае, если вы хотите переключать классы в соответствии с более сложными условиям, чем просто "Добавь класс, если его нет или удали класс, если он есть.".

Также как и метод addClass() , метод removeClass() можно использовать с возвратной функцией в качестве аргумента вместо имени класса, чтобы организовать переключение класса в зависимости от позиции элемента или других свойств. Возвратная функция должна принимать два аргумента:

  • Индекс позиции текущего элемента в наборе (начинается с ноля)
  • Старое значение атрибута class для текущего элемента

// Переключаем класс 'summary' только для первых трёх div на странице $('div').toggleClass( firstThreeOnly ); function firstThreeOnly( index, classAttribute )

Заключение

В данном уроке мы рассмотрели методы jQuery для работы с классами CSS:

  • hasClass() для проверки того, что элемент имеет определённый класс
  • addClass() для добавления класса элементу
  • removeClass() для удаления класса из элемента
  • toggleClass() для добавления класса элементу в том случае, если элемент ещё не имеет такого класса, или для удаления класса, если класс уже есть у элемента

Данные методы дают возможность манипулировать классами элементов с помощью 1 или 2 строк кода.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-manipulating-element-classes/
Перевел: Сергей Фастунов
Урок создан: 10 Августа 2010
Просмотров: 98823
Правила перепечатки

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Источник

Category: Class Attribute

These methods inspect and manipulate the CSS classes assigned to elements.

.addClass()

Adds the specified class(es) to each element in the set of matched elements.

.hasClass()

Determine whether any of the matched elements are assigned the given class.

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

.toggleClass()

Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

Оцените статью
© 2023 Программирование