1 de março de 2012 Javascript

Manipulação de classes com JQuery

Entenda como funciona as funções do JQuery para manipulação de classes nos elementos do HTML.

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.

Formas de manipulação de classes

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]

Link do exemplo

.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.

Este é o segundo parágrafo e tem a classe SELECTED

[/cc]

E o JQuery:

[cc lang="jquery"]
$(“div#result1″).append($(“p:first”).hasClass(“selected”).toString());
$(“div#result2″).append($(“p:last”).hasClass(“selected”).toString());
[/cc]