Iniciando em JQuery – Parte II

Nesse post eu mostrei um pequeno efeito com JQuery, ao clicar em um link. Agora continuaremos nossos estudos  com a parte II do tutorial.

Uma coisa bem bacana ao se trabalhar com Jquery é o fato da integração com CSS. Para mostrar como isso acontece, utilizaremos o mesmo código do post anterior, com algumas alterações. Inicialmente, o código da página é o seguinte:

Note que eu inseri alguns estilos no cabeçalho, mas ainda não alterei o script inicial. Portanto, ao clicar sobre o link, você ainda verá um alerta do tipo “Olá, Mundo!”. O que vamos fazer aqui é, ao clicar sobre o link, fazer com que a frase Eu vou ser alterado quando você clicar abaixo! tenha seu estilo alterado quando o usuário clicar sobre o link.

Alguma ideia de como fazer isso? Se você conseguiu sem ler o restante do tutorial, parabéns! Caso as coisas ainda não tenha dado certo, não se desespere.

Para alterar o estilo da frase, vamos alterar o script do post anterior. Como foi dito, após o $, é passado o atributo ou elemento que será modificado. Como já dizemos antes que, ao “a” ser clicado acontecerá um certo evento, iremos apenas, alterar esse evento.

Como a frase que será modificada está dentro das tags <p></p>, devemos mostrar ao script que, ao clicar sobre o link, essa tag receberá um novo estilo. Para isso temos que alterar o script para:

[code language=”javascript”] $(document).ready(function
() {
$(“a”).click(function()
{
$(“p”).addClass(“newstyle”);
});
});
[/code]

Note que apenas o que está em negrito foi alterado, adicionando a classe newstyle à tag <p> após o link ser clicado.

Assim, ao se entrar na página visualizamos o seguinte:

Logo após clicar sobre o link, o estilo de <p> é alterado e você verá o seguinte:

Pronto para o próximo tutorial? 🙂

Nota: Como esses tutoriais são feitos em páginas HTML pequenas e tem fim didático, somente, estou inserindo o CSS e scripts na própria página. Contudo, em um projeto real evite fazer isso: crie arquivos externos, que facilitarão sua vida, são mais fáceis de editar e você não fica com uma página gigante de código!

---

// Comente!

comentários

Leia mais