No início deste ano conheci o jQuery e desde então não escrevo mais JavaScript sem ele. Gostaria de apresentar um pouco dessa biblioteca, e citar algumas boas razões para que você se aprofunde mais a respeito e pense em utilizá-lo.

O que é jQuery?

jQuery é uma biblioteca JavaScript rápida e concisa que simplifica percorrer documentos HTML, manipular eventos, criar animações e interações Ajax para um desenvolvimento web rápido. O jQuery foi desenvolvido para mudar a forma com que você escreve JavaScript [1].

Porque eu deveria utilizá-lo?

Simplicidade e Baixa Verbosidade

Quando bem usado o jQuery pode ajudá-lo a tornar seu web-site ou aplicação mais interativo, interessante e excitante, além disso, é simples de entender e fácil de utilizar, o que significa que a curva de aprendizado é pequena, enquanto as possibilidades são (quase) infinitas. [2].

Leveza

O jQuery (core) possui aproxidamente 15KB.

CSS 3 Compilant

O jQuery suporta CSS 1-3 e xPath Básico.

Cross-browser

Funciona no Internet Explorer 6.0+, Firefox 2.0+, Safari 2.0+ e Opera 9.0+.

Open Source

jQuery é Open Source e está atualmente disponível para uso em projetos pessoais ou comerciais sobre as licenças MIT e GPL.

Manipulação de Elementos DOM

O DOM (Document Object Model) é um padrão da W3C que define um conjunto de objetos para o HTML e forma de acessá-los e manipulá-los [4]. Todos os elementos HTML, assim como seus textos e atributos podem ser acessados via DOM, inclusive podem ser modificados, removidos, e novos elementos podem ser criados. O HTML DOM é uma plataforma independente de linguagem, a linguagem mais usada para acessá-lo é o JavaScript, e é aí que o jQuery entra para facilitar as coisas. Window, Document, Table, IFrame, Link, Input Button, InputRadio e Select são alguns dos objetos DOM.

A função $ (Dollar)

O caractere ou símbolo mais poderoso no jQuery é o cifrão, o cifrão representa uma função, a função $(), que normalmente retorna um conjunto de objetos seguido por uma cadeia de operações (chain) [5]. Através dessa função podemos selecionar um ou mais elementos DOM em uma página HTML e manipulá-los de diversas formas. Depois de feita uma primeira chamada a função $() é possível fazer outras chamadas subsequentes para filtrar ou adicionar mais objetos a seleção atual e manipulá-los.

Observe o exemplo abaixo:

$("div.texto").add("p.quote").html("a little test").fadeOut();

1. Obtem um objeto DOM div com um atributo class igual a texto.
2. Adiciona um Parágrafo dentro do div com o atributo class igual a quote.
3. Adiciona uma frase dentro do parágrafo.
4. Invoca o método de animação fadeOut que faz com que o elemento desapareça.

Se você conhece um pouco de JavaScript deve estar pensando quanto de código seria necessário realizar este mesmo trabalho sem o auxílio de uma ferramenta como essa. É isso mesmo, todo esse poder está ao seu alcance em apenas 15KB!

Vejas alguns outros exemplos:

$("#rodape").css('color', 'red');

Obtem o elemento com ID igual a rodape e altera sua cor para vermelho.

$("button").click(function() { alert('Bom Dia') });

Obtem todos os elementos do tipo button vincula o evento onclick (ao clicar) desse elemento à uma função que exibe uma caixa de diálogo (alert).

$('input['type=text']).attr('readonly', 'readonly');

Obtem todos os elementos do tipo input text (caixas de texto) e os torna somente leitura.

$('td').each(function(){ alert(this.id); });

Obtem todos os elementos td (células de tabelas) e para cada elemento encontrado executa uma função que exibe uma caixa de diálogo (alert) com ID do elemento.

Esse exemplos não mostram nem ponta do iceberg, as possíbilidades são muitos maiores. Mas além disso ainda existem outras razões para você se interessar pelo jQuery.

Ajax

 

Com jQuery realizar requisições ajax tornou-se uma tarefa extramente trivial:

$("#feeds").load("feeds.html");

Realiza uma requisição GET para feeds.html e insere o resultado no elemento com ID igual a feeds.

 $("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });

Realiza uma requisição POST à página feeds.php passando o parâmetro limit com valor 25.

Interface de Usuário

O jQuery UI é um complemento para jQuery que consiste em um conjunto de componentes para construção de interfaces gráficas, também é possível construir componentes com funcionalidade de arrastar e soltar (drag and drop), componentes que podem ter seus tamanhos alterados (resizable), além de alguns widgets mais tradicionais como barras de progresso, accordion, calendário (date picker), caixas de diálogo e confirmação, tab panels, inputs com auto-complete, entre outros, e tudo com a mesma simplicidade anteriormente apresentada.

Testes Unitários

Hoje, em tempos do movimento ágil, mais do que nunca, sabemos da importância de se escrever testes unitários, porém ainda poucos os escrevem para código JavaScript. Pois bem, com auxilio do QUnit, é possível escrever testes unitários utilizando uma sintaxe bem amigável e fácil de ser compreendida.

test("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equals( "hello", value, "We expect value to be hello" ); });

Plugins

Uma das grandes vantagens do jQuery é grande quantidade de plugins disponíveis, é possível encontrar plugins para as mais diversas finalidades como validação de formulários, componentes visuais, datagrids, tool tips, pop-pups, slide shows, formatação de números, internacionalização, efeitos visuais, etc. Você poderá facilmente localizar alguns muito úteis navegando no repositório oficial de plugins.

Quem está usando jQuery?

Essa, sem dúvida, é uma pergunta que muitos de nós nos fazemos antes de adotar uma ferramenta ou framework, e ao saber que empresas de sucesso também estão adotando, nos sentimos mais seguros em fazer o mesmo, não que isso determine que algo seja bom ou ruim, mas enfim, o Google, a Dell, a Mozilla, o Digg, o Bank of America, o WordPress e a NBC.com são alguns exemplos de quem está usando jQuery. Uma lista mais completa pode ser vista aqui.

Concluindo…

Espero ter conseguido despertar o seu interesse em obter maiores informações e fazer alguns testes com essa poderosa biblioteca JavaScript, e por favor, não deixe de oferecer feedback através de comentários.

Referências

[1] Site Oficial do jQuery

[2] Visual jQuery

[3] Smashing Magazine – jQuery Exemplos e Melhores Práticas

[4] JavaScript HTML DOM Objects

[5] jQuery, the very very basics