Elf Blog

O que é JQuery ?

Jquery é uma biblioteca JavaScript rápida e concisa que simplifica o modo como você prepara seus documentos HTML, manipula eventos, executa animações e interações Ajax em suas páginas. Jquery destina-se a mudar a maneira que você escreve JavaScript. (tradução livre do site oficial).

O que você precisa saber?

O básico de JavaScript, HTML, e DOM, caso você não saiba nada sobre isso e queira seguir esse pequeno post recomendo os seguintes links:

O que É:

* O que é HTML.
* O que é JavaScript.
* O que é DOM. (Document Object Model – Modelo de Objetos de Documentos).

Um pouco sobre:

* HTML (em inglês).
* JavaScript (em inglês).
* DOM (em inglês).

Download da biblioteca:

Para demostrar alguma coisa do JQuery já funcioando crie uma página simples em html algo com:

[sourcecode language='javascript']






      Google Page

[/sourcecode]

Você pode ter sua cópia do Jquery em outro diretório que não seja o mesmo em que está o html então se for seu caso simplesmente lembre-se de mudar o atributo src e indicar o local onde sua cópia esta.

Aqui como serão exemplos pequenos exemplos iremos incluir o código Jquery no mesmo documento html, obviamente você pode criar um link para um arquivo .js separado, assim:

[sourcecode language='javascript']

[/sourcecode]

mas aqui iremos colocar tudo no mesmo documento.

Algo que geralmente se faz é uma simples janelinha de alerta quando você acessa uma página, em JavaScript normal geralmente usamos o evento window.onload da seguinte forma:

[sourcecode language='javascript']







      Google Page


[/sourcecode]

Rode ou atualize a página e você vai ver o fabuloso alerta aparecer, bom isso funciona, mas tem um porém, esse código JavaScript só será executado após todas imagens e outros elementos serem carregadas, mas o Jquery tem um evento para concertar isso.

O Jquery tem um declaração que “espera” a página estar “pronta” ( ready ), pois praticamente tudo o que se faz com Jquery é a manipulacão DOM (Document Object Model – Modelo de Objetos de Documentos).

Antes de começarmos a manipular o DOM ele tem que estar caregado, assim:

[sourcecode language='javascript']
$(document).ready(function(){
    // Código Aqui
})
[/sourcecode]

Uma coisa que eu devia ter escrito no começo desse post mas deixei par escrever agora, é sobre o $, o $ é digamos assim um alias (atalho) para a classe Jquery e o $( ) construe um novo objeto jQuery , e por exemplo $(“a”) é um seletor que era selecionar todos os elementos a, um exemplo:

[sourcecode language='javascript']

[/sourcecode]

Explicando o exemplo acima: começamos fazendo a declaração do ready normalmente para podermos manipular os elementos DOM, usamos o seletor $(“ “) para dizer que será aplicada a div chamada mouseover, usamos então o event mouseover( ocorre quando se passa o mouse em cima do elemento), usamos novamente o seletor dizendo que irá mudar o conteúdo da tag p, e logo abaixo declaramos o event mouseout (mouse fora).

Se nessa mesma página tivermos outras tag dentro da div mouseover o mesmo efeito iria aparecer para elas todos, como dito acima é isso que o seletor $(“ ” ) faz.

Mesmo você tendo outras tag p que não estejam dentro da div mouseover estas irão ter o mesmo efeito, então para o local onde você queira o efeito difina algo do tipo:

<p class=”mudar’> Alguma coisa </p>

e claro no código mude para

[sourcecode language='javascript']
$(“p.mudar”).text(“Mouse em Cima”);
[/sourcecode]

Agora um exemplo usando o evento click, quando clicamos em algum elemento.

[sourcecode language='javascript']






     Click me


[/sourcecode]

Pode-se notar uma coisa que você pode querer aplicar, por exemplo, o evento click em mais de um elemento button, para isso você não precisa escrever novamente o javascript, eu posso ter 10 botões que devem ter um alert quando clicados e não tenho que escrever mais nada, pois como viemos termos o seletor $(“ ”) .

Bom isso foi apenas uma olhada rápida no Jquery ele tem muitas coisas a mais que podem fazer seu trabalho com JavaScript ficar menor, mas com esse pequeno exemplo já pode-se notar que fica calro a diferença entre escrever javascript normal e usando essa biblioteca.

Estarei postando algumas coisas a mais sobre Jquery em breve.