Você já deve saber que o JQuery é coisa linda de Deus. Existe uma linha muito tênue entre as features que o CSS pode fazer e o que o JQuery pode nos ajudar. A manipulação de classes é uma das facilidades que o JQuery proporciona e facilita infinitamente nossa vida. Essas funções nos ajudam muito quando iremos definir um comportamento dinâmico para os elementos.
Você pode manipular as classes de elementos do HTML de quatro formas:
.addClass()
Existem diversas situações onde precisamos adicionar uma ou mais classes em um elemento para executarmos uma ação ou formatarmos o elemento com estilos determinados.
.removeClass()
Remove uma, várias ou todas as classes dos elementos escolhidos.
.toggleClass()
Insere ou remove uma ou mais classes dos elementos determinados, alternando entre classes escolhidas.
.hasClass()
Verifica se qualquer um dos elementos selecionados tem a classe determinada.
.addClass()
Imagine que você queira adicionar uma classe extra o último elemento LI da lista:
[cc lang=”html”]
- Primeiro
- Segundo
- Terceiro
[/cc]
[cc lang=”javascript”]
$(‘li:last’).addClass(‘selecionado’);
[/cc]
Link do exemplo de ADDCLASS do JQuery
Para adicionar mais de uma classe, basta fazer como fazemos no CSS: separe com espaços o nome das classes. E se você na sabia, sim, da para colocar mais de uma classe em um mesmo elemento HTML.
[cc lang=”javascript”]
$(‘li:last’).addClass(‘selecionado ultimo’);
[/cc]
Você pode adicionar uma classe no elemento ao clicar nele:
[cc lang=”javascript”]
$(‘li:last’).click(function(){
$(this).addClass(‘selecionado ultimo’);
});
[/cc]
Link do exemplo de AddClass com click do JQuery
Você pode ver a documentação completa dessa feature aqui.
.removeClass()
O .removeClass() function da mesma maneira que o .addClass(), só que em vez de colocar uma classe, você a remove. Simples assim.
Ainda usando o exemplo acima, vamos retirar a classe selecionado dos elementos e adicionar apenas no elemento clicado. O JS fica assim:
[cc lang=”javascript”]
$(‘li’).click(function(){
$(‘li’).removeClass(‘selecionado’);
$(this).addClass(‘selecionado’);
});
[/cc]
Muito simples. Você define qual a classe que vai ser removida e pronto, o JQuery faz isso para você.
.toggleClass()
O toggleClass nos ajudaria muito mais no exemplo aplicado acima. Ele alterna uma determinada classe, adicionando e removendo-a sem a necessidade de IFs ou coisas assim.
Eles detectam se o elemento tem ou não a classe. Se houver a classe, ele a retira, se não, ele adiciona. A sintaxe é a que segue abaixo:
[cc lang=”javascript”]
$(‘li’).click(function(){
$(this).toggleClass(‘selecionado’);
});
[/cc]
.hasClass()
E por último, o .hasClass. Essa função detecta se o elemento tem ou não a classe, e então, sabendo disso, você pode manipulá-lo da maneira que bem entender. No nosso exemplo abaixo iremos apenas detectar qual dos elementos tem a nossa classe. HTML:
[cc lang=”html”]
Este é o primeiro parágrafo.
[/cc]
E o JQuery:
[cc lang=”jquery”]
$(“div#result1”).append($(“p:first”).hasClass(“selected”).toString());
$(“div#result2”).append($(“p:last”).hasClass(“selected”).toString());
[/cc]
Para ler a documentação dessas funções, clique aqui.
