Операции с CSS jQuery

Одна из самых важных частей jQuery - это возможность манипулировать DOM.

jQuery предоставляет эффективные методы для работы с стилями элементов.

В этой главе мы покажем, как добавлять или удалять CSS-классы в DOM.

jQuery и операции с CSS

С помощью jQuery можно легко манипулировать стилями элементов.

У нас есть следующие методы jQuery для работы с CSS:

• addClass()

• removeClass()

• toggleClass()

• css()

Ниже мы покажем, как использовать каждый из этих методов.

Метод jQuery addClass()

jQuery addClass()Метод добавляет один или несколько классов к выбранному элементу.

В следующем примере класс добавляется к первому элементу <p>:

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

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

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

Метод jQuery removeClass()

jQuery removeClass()Метод удаляет один или несколько классов из выбранных элементов.

В следующем примере класс удаляется из всех элементов <p>:

$("button").click(function(){
　　$("p").removeClass("highlight");
});

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

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

Если в параметрах не указан класс, то удалят все классы:

$("button").click(function(){
　　$("p").removeClass();
});

Метод toggleClass() jQuery

jQuery toggleClass()Этот метод переключает между добавлением/удалением одного или нескольких классов для выбранного элемента.

Ниже приведен пример, который переключает между добавлением и удалением класса "anotherClass" для всех элементов <p>:

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

Этот метод проверяет имя класса для каждого элемента:

• Если класс отсутствует, то добавят

• Если уже установлен класс, то его удалят

Метод css() jQuery

jQuery css()Этот метод��取或设置所选元素的一个或多个样式属性。

jQuery css()Этот метод будет описан в следующей главе.

Референтное руководство по CSS jQuery

Для получения полной информации о методах CSS, пожалуйста, посетите нашРеферентное руководство по HTML / CSS jQuery.