Um tutorial que explica como você pode iniciar com jQuery. Um explicação de sua sintaxe e como iniciar neste framework que é um sucesso!

No começo, é comum esbarrar-se com a dificuldade de entender a sintaxe. A quantidade de “()” e “{}” pode atrapalhar um pouco. Mas com o tempo, esta dificuldade é superada.

Para começar, você deve acessar o site do framework e baixar a sua última versão. Acesse http://www.jquery.com e faça o download.

Como iniciar

Em todas as páginas, você deve incluir o arquivo “.js” que você acabou de baixar no site do jQuery. Assim como você inclui qualquer arquivo “.js” em suas páginas. Veja:

  1. <script type=“text/javascript” src=“jquery-1.3.2.min.js”></script>

Agora sim, vamos começar a programar utilizando jQuery. Veja o código abaixo:

  1. <script type=“text/javascript”>
  2.     $(“document”).ready(function(){
  3.         alert(“Começando com jQuery”);
  4.     })
  5. </script>

Veja na linha 1, que começamos o código como qualquer outra intrução javascript.

Os seletores

Na linha dois, temos a seguinte instrução:

  1. $(“document”).ready(function(){

O código $(”document”) é chamado de seletor. Em jQuery, os seletores nos permitem selecionar um determinado objeto, a partir de seu tipo, id, classe, etc.

No código acima, selecionamos o objeto documento e atribuimos a ele a função ready(). Todo código deve ser executado após termos a garantia de que toda a página foi carregada – isto não inclui imagens, apenas o código. Isto para não ocorrerem os problemas de selecionar um determinado objeto que ainda não foi carregado – então ainda não existe – e um erro ser retornado.

Brincando de jQuery

A terceira linha, emite um alert, após o carregamento do documento. Apenas um exemplo, sem muita funcionalidade. Observe o código abaixo e veja um exemplo interessante:

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
  2. <html>
  3. <head>
  4. <title>Aprendendo jQuery</title>
  5. <script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
  6. <script type=“text/javascript”>
  7.     $(“document”).ready(function(){
  8.         $(“#MeuDiv”).hide(“slow”);
  9.     })
  10. </script>
  11. </head>
  12. <body>
  13.     <div id=”MeuDiv” style=”background-color:red; width:250px; height:250px;”>
  14.    
  15.     </div>
  16. </body>
  17. </html>

No código acima, utilizamos a função “hide”, que é capaz de esconder objetos de uma página. Criando um efeito simples, mas bem legal.

Observe que selecionamos um DIV, a partir de seu id. Dentro do seletor, utilizamos a combinação # + “id_do_div”. Quando selecionamos um objeto a partir de seu id, utilizando # a frente de seu nome. Para selecionar a partir de uma classe, deveremos utilizar um . (ponto)

Continue acompanhando as matérias e aperfeiçoando seus conhecimentos em jQuery!

Fique a vontade para comentar abaixo!