jQuery: o atributo attr()

Continuando a mostrar mais sobre o jQuery e só para lembrar que para melhor entender esta serie de artigos é recomendado ler antes:

1. jQuery: O Efeito show
2. jQuery: o Efeito hide
3. jQuery: o Efeito toogle
4. jQuery: selector next
5. jQuery: o atributo attr()

Hoje vou falar de uma das coisas mais uteis que o jQuery tem: o atributo .attr().

E o que faz este atributo?
Bem, em termos leigos, apanha o valor/conteúdo de um elemento e com isso, permite-nos alterar ou copiar esse conteúdo.

Para perceberem como funciona a coisa, aqui fica um exemplo da pagina do atributo .attr(), utilizando uma imagem com title e alt, e que depois alteramos com o jQuery:

NOTA: podem ver mais exemplos na pagina do atributo seguindo a ligação acima. ;)

Coloquem o rato em cima da imagem para visualizarem o titulo (title).

<img id="greatphoto" title="imagem de teste" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWhW7sCMAULyofIYfvYHk1sJe4L8wadpuU6nsgQwGWFJvL71L6Ewyhgmk0J7FgtMqGL8gJ0JzGTJHPdt3oSsnnfA9ESjzfc4P3UWHQ_ucgox6e62BO47Dz5JRVbmiObzqb2aTrZGHMxQ/s110-c/SuperGirl.jpg" alt="imagem de teste" />

E colocando o script abaixo, vamos mudar o que está escrito em title e alt:

Para efeitos de teste, vamos colocar o endereço (URL) errado na imagem... e reparem como o texto de alt aparece de acordo com o que alteramos com o jQuery.
Passem o rato por cima da palavra e podem também ver a alteração no titulo.

<script>
$('#greatphoto').attr({
  alt: 'Supergirl',
  title: 'Supergirl by OCP'
});
</script>

Facinho, Facinho, não é? ;)

Em breve explicarei como criar um elemento em redor de outro com Jquery.

Até Breve. :-F

Queres ler outro artigo ao calhas?