Aproveitando o recém-lançamento da versão 1.2.3 do jQuery, resolvi escrever este artigo (que já estava no forno há um bom tempo) baseado no ganho de produtividade que venho tendo utilizando esta biblioteca JavaScript.

Diga-se de passagem, já utilizei outras bibliotecas, como o Prototype. A mudança veio depois de comparar o desempenho e até mesmo o tamanho da biblioteca incluída nos projetos, sendo 29KB do jQuery 1.2.3 (versão comprimida) contra 123KB do Prototype 1.6.0.2. Escrevi rapidamente, aqui no Blog, sobre o Prototype e outras bibliotecas.

O que é jQuery?

Para os paraquedistas no assunto, jQuery é uma biblioteca JavaScript, criada por John Resig e equipe, que facilita o manuseio do JavaScript em se tratando de manipulação de atributos, eventos, efeitos, interações Ajax, etc.

Na maioria das vezes, você conseguirá produzir uma experiência de interface com o usuário melhor e, ao mesmo tempo, escrevendo códigos de forma mais rápida pelo fato do jQuery possuir métodos e atributos prontos para uso.

Se você quer começar a praticar, recomendo o tutorial Getting Started with jQuery do Jörn Zaefferer ou a versão traduzida por Carlos Pires. Além deste ponta-pé inicial, visite também a comunidade jQuery Brasil com conteúdo selecionado e seu fórum de discussão.

Por falar em tutorial, o projeto conta com uma documentação bem estruturada, além de outros sites que a complementam. Veja: citar documentacao tutoriais http://visualjquery.com/1.1.2.html

Acelerando o desenvolvimento

Em vez de escrever document.getElementById('id'), escreva $('#id'). Quer mostrar ou ocultar uma camada: Utilize os métodos show() e hide(), ex.: $('#id').show().

São métodos prontos para serem utilizados em se tratando de Efeitos, CSS, Seletores, Ajax, etc. Veja a documentação do jQuery para guia e exemplos.

Extendendo o uso com Plugins

Diversos plugins são desenvolvidos baseados no jQuery. Um deles, largamente utilizado, é o Thickbox.

O Thickbox possibilita a você abrir janelas dinâmicas ou estáticas internas ao seu site, com efeito de abertura, sombra ao redor do conteúdo. É possível abrir qualquer documento e ainda criar galerias de imagens.

Além deste, você pode encontrar centenas de plugins separados por categoria.

Mão na massa

Sem muito prolongar no assunto, selecionei alguns exemplos práticos e auto-explicativos sobre várias situações encontradas no dia-a-dia de muito desenvolvedor:

• Mostrando ou ocultando uma camada
• Alterando propriedades CSS via JavaScript
• Usando ThickBox para criar janelas suspensas

O que falam por aí...

Selecionei links com conteúdo relevante sobre o assunto. São dicas e tutoriais interessantes com problemas encontrados no dia-a-dia. Ao redor do mundo existem fiéis pregadores desta bibliotecas.

Boa produtividade a todos!

Links em português:

• Lidando com checkbox no JQuery
• Javascript é com jQuery
• Módulo Ajax do jQuery
• Populando combobox com jQuery (Ajax)
• Marcando/desmarcando todos os checkbox

Links em inglês:

• 15 Days of jQuery
• Accessible, unobtrusive JavaScript tabs with jQuery