Operação CSS do jQuery

Uma parte muito importante do jQuery é a possibilidade de manipular o DOM.

jQuery oferece métodos eficazes para manipular o estilo dos elementos.

Neste capítulo, explicaremos como adicionar ou remover classes CSS no DOM.

Operações de CSS com jQuery

Com jQuery, podemos manipular facilmente o estilo dos elementos.

Temos os seguintes métodos jQuery para operações de CSS:

• addClass()

• removeClass()

• toggleClass()

• css()

Vou mostrar como usar cada um desses métodos.

Método jQuery addClass()

jQuery addClass()O método adiciona uma ou mais classes ao elemento selecionado.

O exemplo a seguir adiciona uma classe ao primeiro elemento <p>:

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

É possível adicionar várias classes (separadas por espaço) a um elemento selecionado, conforme exemplo a seguir:

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

Método jQuery removeClass()

jQuery removeClass()O método remove uma ou mais classes do elemento selecionado.

O exemplo a seguir remove uma classe de todos os elementos <p>:

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

Uma vez, é possível remover uma ou mais classes (separadas por espaço) de um grupo de elementos selecionados, conforme exemplo a seguir:

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

Se o nome da classe não for especificado nos parâmetros, todas as classes serão removidas:

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

Método toggleClass() do jQuery

jQuery toggleClass()O método adiciona/Alternar entre excluir um ou mais nomes de classes em um elemento selecionado.

O exemplo a seguir alternar entre adicionar e excluir o nome da classe "anotherClass" em todos os elementos <p>:

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

Este método verifica o nome da classe especificada em cada elemento:

• Se o nome da classe estiver ausente, adicione-o

• Se o nome da classe já foi definido, remova-o

Método css() do jQuery

jQuery css()Método para obter ou definir um ou mais atributos de estilo de um elemento selecionado.

jQuery css()Os métodos serão explicados no próximo capítulo.

Referência CSS do jQuery

Para referência completa dos métodos CSS, acesse nossojQuery HTML / Referência CSS.