JQuery – O que é, como funciona e como eu devo começar?
www.jquery.com
O Jquery é uma Biblioteca JavaScript, criada por John Resig, que nos ajuda a não nos preocuparmos com compatibilidades dos browsers, além de enriquecer aplicações desenvolvidas em plataforma web.
Jquery é uma maneira rápida e concisa para simplificar documentos HTML, evento movimentação, animação e interação Ajax para o rápido desenvolvimento web.
A grande vantagem dos recursos da jQuery é permitir que você elegantemente (e eficientemente) encontre e manipule elementos HTML com o mínimo de linhas de código. JQuery faz isso através de uma simpática API seletora que permite aos desenvolvedores consulta de elementos HTML, e em seguida delegue eventos para eles. O JQuery também inclui um conjunto User Interfaces (UI) para facilitar que animações possam ser utilizadas.
Composto por uma biblioteca nomeada jquery[-versao].js que possui as principais funcionalidades.
Uma mensagem do autor do JQuery, John Resig:
“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?”
Esta mensagem diz tudo o que é o JQuery.
Principais Características
- Resolução da incompatibilidade entre os navegadores.
- Redução de código.
- Reusabilidade do código através de plug-ins.
- Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
- Trabalha com AJAX e DOM.
- Implementação segura de recursos do CSS1, CSS2 e CSS3.
Como Começar?
Baixe a ultima versão do framework em http://jquery.com.
Em seguinda inclua a tag de javascript fazendo referência a bliblioteca JQuery que você baixou. No exemplo demonstrado aqui, eu utilizei a versão 1.3.2:
Crie um arquivo html e copie o arquivo jquery-1.3.2.js (altere a versão para a mesma que você baixou) para a pasta onde você criou o seu html. No header faça a referência à biblioteca JQuery:
O principal agora é inicializar o framework. Ainda no header, inclua o código abaixo:
$(function() {
$(“.column“).sortable({
connectWith: ‘.column‘,
update: function(event, ui) {
var result = $(“.column“).sortable(‘toArray’);
alert(result);
}
});
});
</script>
No body, inclua os elementos que o jquery irá usar para funcionar:
<div id=”bloco1″>
<div style=”cursor: move;”>Bloco 1</div>
<div style=”cursor: move;”>Drag and drop este bloco</div>
</div>
<div id=”bloco2″>
<div style=”cursor: move;”>Bloco 2</div>
<div style=”cursor: move;”>Drag and drop este bloco</div>
</div>
<div id=”bloco3″>
<div style=”cursor: move;”>Bloco 3</div>
<div style=”cursor: move;”>Drag and drop este bloco</div>
</div>
</div>
Baixe o exemplo acima com a demonstração do método sortable Exemplo de Sortable.
Alguns sites que usam JQuery
Dell compuadores, no exemplo o pedido de Login:
Twitter, aviso de atualização realizada:
Digg, tela de login:
S2 Comunicação Integrada, vários elementos como Carrossel (com os logos dos clientes) e o menu com transparência com os nomes dos clientes:
O use JQuery é um site com muitos exemplos, e tutoriais sobre JQuery:
Agradeço a ajuda do Helder Lima, um amigo que trabalhou comigo na Fundação Getúlio Vargas. Foi ele quem me apresentou ao JQuery.
Baixe o livro no formato PDF: “JQuery a biblioteca do programador javascript” gratuitamente aqui.
Comentem e até apróxima…
Framework Javascript, Javascript, JQuery, JQuery Como começar, Web 2.0