Recentemente um post sobre o jQuery: “Selecionando tudo com o JQuery” eu falei sobre como selecionar elementos em uma página e se você deu uma lida nele com certeza você já sabe o que precisa fazer para tal.
E dependendo do seu objetivo, a melhor hora para selecionar seu elementos e tratá-los é depois que a sua página está carregada.
Isto quer dizer, depois que todas as tags e seus respectivos ids, classes, atributos… já foram lidos pelo browser e estão prontos para serem manipulados.
O jQuery sabe exatamente quando esse momento chega, tanto é que ele disponibiliza um evento para nós:
$(document).ready(function() {
// seu código aqui
});
Já que o próprio jQuery tem esse tratamento para o evento para tratar quando página está carregada podemos deixar de lado coisa como:
<body onload="function(){/* seu código aqui */}">
ou
window.load=function(){
/* seu código aqui */
};
Até porque cada vez que você utiliza o método fornecido pelo jQuery o seu tratamento é adicionado à um determinado evento sem se sobrepor sobre os outros tratamentos.
Misturando tudo
Um exemplo básico do que você pode fazer com essa nova função que você aprendeu junto com os seletores.
Vamos imaginar que você tem uma página com vários links, e você quer instruir seus usuários que alguns links abrem em uma nova janela.
A maneira que vamos fazer isso é por adicionar no atributo title dos respectivos links o texto “[abre em uma nova janela]“.
O código que temos no body é
<a id="lnkGoogle" title="Link para o Google.com.br" href="http://www.google.com.br" target="_blank">Google</a> <a id="lnkJQuery" title="Link para o JQuery.com" href="http://jquery.com/" target="_blank">JQuery </a>
E no head nós precisamos informar ao JQuery o que ele precisa fazer quando o documento estiver carregado.
$(document).ready(function() {
$('a[target$=blank]').each(function(i) {
$(this).attr("title", $(this).attr("title") + " [abre em uma nova janela]");
});
});
Deu pra entender claramente o que aconteceu aqui, né? Mas tivemos algumas coisas novas: o each(…) e o $(this).attr(…) .
Mas o que raios é o each(…) e o $(this).attr(…)?
O each(…) pode ser utilizado de várias formas, a forma que utilizamos aqui foi algo como dizer:
“Caro each(…) eu pedi para o seu pai o JQuery buscar na página todos os links cujo o atributo target termine com os caracteres “blank”. Quero que você pegue cada um desses itens selecionados e execute o código $(this).attr(“title”, $(this).attr(“title”) + ” [abre em uma nova janela]“);“
E o sábio each(…) entendeu perfeitamente o que precisa fazer. E nesse caso usou o $(this) para cumprir sua tarefa. O $(this) se refere ao elemento da vez dentro do loop.
Ok e o quer dizer attr(…)?
Usamos o attr(“nome-do-atributo”) para pegar um atributo do elemento e attr(“nome-do-atributo”,”novo-valor-para-o-atributo“) para definir um novo valor para ele.
Simples assim.
Veja um exemplo desse código aqui.
