Meus Primeiros passos com Jquery

Saudações amigos…

Bem, como prometido, apesar do dia hoje ter sido corrido, tentarei publicar mais um post para definitivamente entrarmos no mundo da JQuery.

Por onde comerçar?

Primeiramente baixe o framework da Jquery aquí (esta é a versão descompactada) , é legal começarmos com ela porque o código é legível (para os curiosos), mais a frente passaremos a usar a versão compactada ; por ser assim o fica menor alguns bons bytes.

Já baixei a Jquery, e agora?

Agora que você copiou o código que apareceu e salvou em um arquivo (.js) creio eu com o nome de jquery.js , o coloque em uma pasta em sua base de testes, aconselho sempre ter uma organização na estrutura de suas pastas, falaremos mais a frente sobre este assunto, assim, poderá otimizar seu trabalho.

Pois bem, agora que você já copiou seu arquivo (jquery.js) em uma pasta, vamos criar um arquivo para testarmos o poder da Jquery.

Cria aí um arquivo chamado (inicio.html), será nele onde iremos fazer nossos testes.

Criou? Ok, está com ele aberto em seu editor? Então vamos chamar o arquivo (jquery.js) dentro de nossa página de testes.

<script type=”text/javascript” src=”http://www.seu_dominio/jquery.js”></script>

Feito isto, agora podemos enfim, verificarmos se está tudo ok, como nosso famoso (”Olá Mundo”).

E como faremos isto?

É bem simples, primeiramente é necessário que entendamos que como a Jquery trabalha manipulando o (DOM) da página, que na verdade, simplificando, é o que é impresso no browser, ou melhor o código fonte. Tendo em mente isto, é necessário que só executemos uma ação quando tivermos certeza que todo o documento está carregado.

Quem aqui nunca teve que colocar código JavaScript no fim da página para ter certeza que só irá executar depois que aquele determinado id ou tag já exista? Ou melhor, não inseriu na tag (body) o atributo (onload)? Você deve ta dando risadas agora não é mesmo? E terá mais razões para sorrir quando souber que o método que a Jquery utiliza é muito mais rápido que este tradicional, sabe porque? Por que o método da Jquery é executado quando apenas o DOM, e não imagens e afins carregarem, logo, terminado de carregar o (código fonte) ele executa. E basta apenas fazermos isto ó:

$(document).ready(function() {
// Aquí dentro você faz a chamada para suas funções.
});

Viu como é fácil?

Pronto, nosso problema com carregamento da página para executar nosso javascript ta resolvido.

Vamos um pouco mais adiante??

Que tal então usarmos algo que já falamos no post anterior? Cria em teu arquivo (inicio.html) um div com id chamado (meu_id).

<div id=”meu_id”>Meu texto</div>

E agora vamos utilizar a maneira que a Jquery alcança estes ids; como já sabemos se precissármos mudar o conteúdo(”Meu texto”) deste div( id=”meu_id”) precisaríamos de algo do tipo:

document.getElementById(”meu_id”).innerHTML = “Meu segundo texto”;

No entanto, usando nossa Jquery, precisamos apenas de:

$(”#meu_id”).html(”Meu segundo texto”);

Fácil não?

Você deve ta dizendo, ta é legal, diminui o tempo que passo digitando toda aquela linha, mas não é nada muito significativo! Concordo!

Estávamos apenas iniciando, que tal então, se precisarmos não apenas mudar o texto do div, e sim adicionar mais um texto a ele?

Peguei você hein? Pois é, a resposta mais rápida talvez seja esta:

conteudo_inicial = document.getElementById(”meu_id”).innerHTML;

document.getElementById(”meu_id”).innerHTML= conteudo_inicial+”Meu segundo texto”;

Ou então, algo como identificar o id e depois disso usar o método de (nós), hummm, deve tá um monte de interrogações agora, e a questão cross browser, de quantidade de código, de rapidez de execução, ai podemos dizer:”quem poderá nos defender?”, eu respondo: não não, não é o Chapolin Colorado, é a Jquery! Como? Assim ó:

$(”#meu_id”).append(”Meu segundo texto”);

Risos… Você deve tá dizendo, tá de brincadeira comigo não é? Não, é simples assim mesmo.

O método (append) simplesmente pega o valor inicial e concatena com o novo.

Logo, estarei voltando com mais posts ok? Tenho vários para publicar.

Estou montando uma seqüência lógica para nossos estudos.

Amigos, mais uma vez, obrigado pela visita e já sabem, qualquer dúvida, sugestões, fofocas, broncas, bugs, desabafos, conselhos amorosos e tudo quanto achem que devo saber, manda um email ok??

Abraços e até a próxima.

Vítor Prado