Bom galera estamos aqui com o quarto artigo sobre jQuery e primeiramente quero me desculpar pela demora, e pela mudança do dia que o artigo será publicado, ocorreu um problema e vou entrar em semana de provas, logo ficou complicado escrever para antes, e o Gustavo Guanabara havia me pedido para escrever na Terça, então juntei o útil ao agradável.

Então vamos ao que interessa, hoje eu pretendo mostrar a vocês como manipular texto, usando outros eventos. Ainda nada relacionado a coisas mais complexas, sei que é bem chato essa parte introdutória para quem já conhece, mas é necessário para que seja possível um aprofundamento do mesmo.

Lembrando que se você não acompanhou os artigos anteriores, sugiro que antes de ler este dêem uma olhada nos 3 anteriores, que são a introdução a basicamente tudo que veremos nos artigos a seguir.

1. Aprendendo a importar o Framework do Google
2. Início de Eventos e Efeitos [FadeTo e Toggle]
3. Manipuladores modificando uma Classe

Vamos ao código…

Comecemos com o HTML, que será praticamente o mesmo do último artigo:

<div id="abrir" class="botao">Fazer a modifica&ccedil;&atilde;o</div>
<div id="texto" class="texto">
Div sem Modificação
</div>

Esse código tem que ser colocado no Corpo de sua página[body], e agora adicione ao cabeçalho de sua página[head] o código CSS para fazer o estilo da página, este está ligeiramente diferente do apresentado no artigo anterior:

<style type="text/css" media="screen" title="Estilo criado para a página">
	   .texto { width:250px;background: #e1e1e1; border:1px solid #333;padding:10px; margin-top:10px;}
	div.modificar { background: #3e3e3e; color:#eee; border:1px solid #000; }
	div.botao { text-align:center; line-height:30px; width:150px; padding: 0 10px; background: #e1e1e1; border:1px solid #333; cursor:pointer; }
	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>

Agora vamos para a parte do jQuery, que é o que nos interessa:

<script type="text/javascript">
	$(document).ready(function() {
    $("#abrir").hover(
      function () {
		$("#texto").after($("<p class='texto'>Você colocou o mouse no elemento #abrir</p>"));
      },
      function () {
        $("body").find("p").remove();
      }
    );

	});
</script>

Agora vamos entender o código que está sendo usado e o que ele está fazendo, parte a parte. Começando com a mudança do evento[hover()] que irá acionar a função quando você colocar o mouse em cima do elemento definido dentro dos parênteses[#abrir].

Quando você fizer a ação sugerida acima, irá acontecer a primeira função do código[function(){};], que irá ativar o código[after()] que adiciona depois do elemento nos parênteses[#texto] um texto, que pode conter códigos HTML.

No caso ele irá adicionar o elemento p .texto após a div #texto.

Bom um pouco mais abaixo temos a segunda função[function(){};] do evento[hover()], que diz o que irá acontecer assim que o usuário retirar o mouse de cima do elemento definido nos parênteses do evento[#abrir].

Ainda na segunda função temos uma ação[find()] muito interessante do jQuery, que nos permite fazer uma busca no elemento[body] dentro do parêntese anterior à ação, por um outro elemento definido no parêntese após a ação[p]

Essa função deve retornar para o FrameWork alguns elementos, no nosso caso o único p existente. Ai entra um código de remoção[remove()] de um elemento da página.

Então basicamente esse código irá adicionar um elemento[p .texto] após a div #texto quando o mouse estiver em cima do botão[#abrir] e quando for retirado o mouse de cima este elemento[#abrir] será deletado.

Após feito tudo isso vocês podem salvar o arquivo editado e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Códigos usados:

• Evento[hover]
• Busca[find]
• Manipulação[remove]
• Manipulação[after]

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.