Introdução à biblioteca jQuery

O que é jQuery?

No dia 22 de agosto de 2005 John Resig, um desenvolvedor americano profundo conhecedor de JavaScript, autor do livro Pro JavaScript Techniques , membro da Corporação Mozilla e graduado em ciência da computação no Rochester Institute of Technology, escreveu em seu blog um artigo relatando sua frustração com a maneira verbosa de se escrever JavaScript para obter os resultados pretendidos.

Aproximadamente cinco meses após a publicação do artigo, John Resig apresentou publicamente os resultados de seus estudos que visavam a simplificar a criação com aquela linguagem. Os resultados foram apresentados em uma palestra intitulada “jQuery a nova onda para JavaScript“, proferida no BarCampNYC – Wrap Up realizado no dia 14 de janeiro de 2006. Ali nasceu a biblioteca.

O próprio John Resing define sua criação assim:

O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?

E, sem dúvida, ele estava em um momento de rara inspiração quando assim definiu, pois soube resumir muito bem jQuery. Uma maneira simples e fácil de escrever JavaScript colocada ao alcance não só de programadores experientes como também de designers e desenvolvedores com pouco conhecimento de programação.

Quanto custa jQuery?

jQuery é uma biblioteca JavaScript disponibilizada como software livre e aberto, cujo emprego e uso é regido segundo as regras de licença estabelecidas pelo MIT – Massachusetts Institute of Technology e pelo GPL – GNU General Public License. Isto, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais. Para maiores detalhes sobre estes tipos de licença consulte os seguintes endereços na internet:

• http://pt.wikipedia.org/wiki/Mit_license
• http://pt.wikipedia.org/wiki/GNU_General_Public_License

E muito difícil o aprendizado de jQuery?

A mesma filosofia que norteou a criação da biblioteca — simplificar tarefas complexas — aplica-se ao seu aprendizado. Com pouquíssimo tempo de estudo você estará apto a desenvolver animações e criar interações de alto impacto visual, sem necessidade de intríncados e complexos scripts.

Os primeiros resultados são conseguidos com pouco aprendizado, contudo como as possibilidades de emprego da biblioteca não se limitam a criar animações e interações simples, o domínio do assunto somente virá com mais tempo de estudo. Contudo, mesmo em fase avançada, a curva de aprendizado cresce muito mais rapidamente do que aquela para o aprendizado das técnicas avançaadas de JavaScript.

Como pré-requisitos para estudo de jQuery você deverá ter um razoável conhecimento da sintaxe básica de JavaScript e um sólido entendimento dos seletores CSS2.1 e dos seletores CSS3. A sintaxe da biblioteca fundamenta-se nestes seletores.

Afinal, o que significa biblioteca jQuery?

Sem entrar em considerações teóricas mais profundas e usando uma linguagem despida de caráter técnico, a biblioteca jQuery se resume a um arquivo JavaScript gravado com a típica extensão .js cuja função é simplificar a sintaxe JavaScript.

Veja dois exemplos de simplificação:

Sintaxe JavaScript	Sintaxe jQuery
document.getElementsByTagName("p")	$("p")
document.getElementById(“um”).setAttribute(“class”, “cor”)	$("#um").attr("class", "cor")

Alerta: A sintaxe jQuery é própria, contudo no desenvolvimento com seu uso você pode usar a sintaxe formal JavaScript sempre que necessário. Por exemplo: Não existe uma sintaxe jQuery específica para um pop-up de alerta, mas você pode usar o seu conhecido alert("mensagem de alerta").

Quais as vantagens de usar jQuery?

As principais vantagens do uso de jQuery sobre JavaScript tradicional são:

• Acesso direto a qualquer componente do DOM, ou seja, não há necessidade de várias linhas de código para acessar determinados pontos no DOM.
• O uso de regras de estilo não sofre qualquer tipo de limitação devido as inconsistências dos navegadores. Mesmo os seletores CSS3 podem ser usados sem qualquer restrição.
• Manipulação de conteúdos, sem limitações, com algumas poucas linhas de código.
• Suporte para toda a gama de eventos de interação com o usuário sem limitações impostas pelos navegadores.
• Possibilidade de inserir uma grande variedade de efeitos de animação com uma simples linha de código.
• Uso simplificado e sem restrições com AJAX e linguagens de programação, como PHP e ASP.
• Simplificação na criação de scripts.
• Emprego cross-browser.

Onde eu consigo o arquivo da biblioteca jQuery?

A atual biblioteca está na sua versão 1.2.6 e é fornecida em três formatos:

jquery-1.2.6.js

Trata-se de um arquivo JavaScript comentado e com espaçamento entre as linhas do código. Seu tamanho é de 97.8 KB

Foi criado com a finalidade de poder ser facilmente lido e entendido por quem se disponha a estudá-lo com qualquer finalidade.

Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js

jquery-1.2.6.min.js

Trata-se do mesmo arquivo JavaScript no qual foram retirados todos os espaçamento do código. Seu tamanho é de 54.5 KB

é uma versão mais compacta que a versão anterior e é a recomendada para uso em desenvolvimento e hospedagem definitiva para o site no ar. Use esta versão nos seus projetos.

Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js

jquery-1.2.6.pack.js

Trata-se do arquivo JavaScript compactado com uma ferramenta de compressão de código JavaScript. O processo de compressão torna o código ilegível para humanos. Seu tamanho é de 30.3 KB

Embora com tamanho menor que o da versão mini o tempo de carregamento desta versão acaba sendo praticamente igual, pois há que se computar o tempo de descompressão quando o usuário recebe a página. Esta versão tem a desvantagem em relação à anterior de não ir para o cache, tendo que ser carregada novamente toda vez que o usuário volta ao site. Outra desvantagem que desaconselha seu uso é o fato de que o processo de descompressão pode, eventualmente, ser imperfeito, introduzindo bugs não existentes na versão sem compressão ou na compacta. A não ser que você tenha uma boa justificativa para usá-la, não use-a.

Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js

Como eu instalo a biblioteca jQuery?

A biblioteca jQuery não requer instalação. Por se tratar de um arquivo JavaScript formal, basta que você crie um link para o arquivo, na seção head do documento onde o script irá rodar, tal como faz com qualquer arquivo JavaScript tradicional.

Supondo que você fez o download e descompactou a versão mini da biblioteca, crie o link como mostrado a seguir:

<head>
...
<script type="text/javascript" src="../jquery-1.2.6.mini.js"></script>
</head>
...

Já criei um documento lincado à biblioteca e agora?

Na próxima matéria daremos os primeiros passos no desenvolvimento com jQuery, estudando os métodos para seleção de elementos no DOM e como interferir com suas propriedades de estilização e apresentação.
Até lá!

Livro jQuery do Maujor ♦ Novo! ♦

Será lançado no próximo mês de novembro o livro JQuery – A biblioteca do programador JavaScript de autoria do Maurício Samy Silva. Ver sumário do livro…