CriarWeb.com > Manuais > Manual de jQuery

Básicos jQuery: adicionar e tirar classes CSS sobre elementos

Outro exemplo básico com jQuery, para mostrar como se podem adicionar e tirar classes CSS a elementos da página, sob a resposta de eventos de usuário.

Por Miguel Angel Alvarez - Tradução de JML

Publicado em: 17/10/09

Valorize este artigo:

Para nos acostumarmos ao trabalho com o framework Javascript jQuery vamos continuar fazendo exemplos simples de funcionamento, que vamos explicar na medida das possibilidades com o que conhecemos até agora no Manual de jQuery.

Claro que estes exercícios são um pouco especiais, dado que servem para ilustrar o modo de trabalho com jQuery, porém sem explicar todos os detalhes relacionados com o uso do framework. Por enquanto que queremos é mostrar uma introdução ao sistema e mostrar por alto algumas de suas possibilidades. No futuro publicaremos artigos que irão pouco a pouco explicando todos os detalhes de trabalho com jQuery.

No caso que nos ocupa, queremos demonstrar o uso de jQuery para alterar elementos de uma página web, adicionando e tirando classes CSS. Isto é bem simples, porque em jQuery os elementos têm duas classes chamadas addClass() e removeClass(), que servem justamente para que o elemento que recebe o método se aplique uma classe CSS ou se elimine. Por isso o que vamos aprender, com respeito ao artigo anterior -Passos para utilizar jQuery-, é utilizar esses novos métodos dos elementos.

Para complicá-lo só um pouco mais, vamos adicionar e tirar classes do elemento com resposta a ações do usuário, para aprender também novos eventos de usuário.

Em nosso exemplo vamos ter dois elementos. Primeiro, uma camada DIV com um texto. Depois teremos um link que estará fora da camada capa DIV. Ao situar o usuário o mouse sobre um link adicionaremos uma classe CSS à camada DIV e ao retirar o mouse do link eliminaremos a classe CSS que havíamos adicionado antes. Se desejar, para esclarecer o exemplo, podemos ver o exercício em funcionamento em uma página à parte.

Nota: Temos em conta que foi lido o artigo anterior, no qual explicamos passo por passo como fazer sua primeira página com jQuery, pois necessitaremos conhecer algumas coisas que já se comentaram ali.

1.- Criar a página com uma camada, um link e a definição de uma classe CSS

O primeiro passo seria construir uma página com todos os elementos que queremos que façam parte deste primeiro exemplo: a camada DIV, o link e a definição da classe CSS.

Ademais, agora também vamos incluir o script de jQuery, que necessitaremos para acessar às funções do framework Javascript.

<html>
<head>
   <title>Adicionar e tirar classes CSS a elementos</title>
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.clasecss{
   background-color: #ff8800;
   font-weight: bold;
}
</style>
</head>

<body>
<div id="camada">
Esta camada é independente e vou adicionar e eliminar classes css sobre ela
</div>
<br>
<br>
<a href="http://www.criarweb.com">Adicionar e tirar classe na camada de cima</a>
</body>
</html>

Perfeito, agora já temos a infra-estrutura necessária para nosso exemplo, com todos os integrantes do mesmo. Só nos faltaria fazer o seguinte passo, que é adicionar os comportamentos dinâmicos com jQuery.

2.- Recordar: adicionar sempre os scripts jQuery quando o documento está "ready"

Agora vamos começar a colocar o código Javascript, porém iniciaremos lembrando aos leitores que qualquer funcionalidade que quisermos agregar à página por meio de jQuery, deve ser incluída quando o documento estiver pronto para receber ações que modifiquem o DOM da página.

Para isto temos que incluir sempre o código:

$(document).ready(function(){
//aqui colocaremos as instruções que modifiquem o DOM
});

3.- Acrescentar os eventos mouseover e mouseout para adicionar e tirar uma classe CSS

Neste passo, vamos criar um par de eventos que associaremos aos links. Este par de eventos serão lançados quando o usuário colocar o ponteiro do mouse sobre o link (mouseover) e quando o usuário retirar o mouse do link (mouseout).

Por exemplo, para definir um evento mouseover se tem que chamar ao método mouseover() sobre o elemento que queremos associar o evento. Ademais, ao método mouseover() se envia por parâmetro uma função com o código que se quer executar como resposta a esse evento.

No caso de adicionar uma classe temos que utilizar o método addClass(), que se tem que invocar sobre o elemento ao que queremos adicionar a classe. A addClass() temos que passar uma cadeia com o nome da classe CSS que queremos adicionar.

Para selecionar o elemento que queremos adicionar a classe fazemos $("#idElemento"), ou seja, utilizamos a função dólar passando o identificador do elemento que queremos selecionar, precedida do caractere "#". Por exemplo, com $("#capa") estamos selecionando um elemento da página cujo id="camada".

$("a").mouseover(function(event){
$("#camada").addClass("classecss");
});

De maneira análoga, porém com o método mouseout(), definimos o evento para quando o usuário tira o mouse do link.

$("a").mouseout(function(event){
$("#capa").removeClass("classecss");
});

4.- Código completo do exemplo jQuery

Agora vejamos o código completo deste exercício:

<html>
<head>
   <title>Adionar e tirar classes CSS a elementos</title>
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.clasecss{
   background-color: #ff8800;
   font-weight: bold;
}
</style>
<script>
$(document).ready(function(){
   $("a").mouseover(function(event){
      $("#camada").addClass("classecss");
   });
   $("a").mouseout(function(event){
      $("#camada").removeClass("classecss");
   });
});
</script>
</head>

<body>

<div id="camada">
Esta camada é independente e vou adicionar e eliminar classes css sobre ela
</div>

<br>
<br>

<a href="http://www.criarweb.com">Adicionar e tirar classe na camada de cima</a>
</body>
</html>