Introdução
No dia 22 de agosto de 2005, John Resig, cuja foto é mostrada na figura abaixo, um desenvolvedor americano, profundo conhecedor de JavaScript atuando na Corporação Mozilla e autor do livro Pro JavaScript Techniques, escreveu em seu blog um artigo relatando sua frustração com a maneira verbosa de se escrever JavaScript para obter os resultados pretendidos. Neste artigo publicou alguns exemplos no quais propunha o uso de seletores CSS com o objetivo de simplificar e dar maior versatilidade ao código. Escreveu, então, que aquela ainda não era uma forma definitiva do que tinha em mente, mas iria aperfeiçoar e testar suas propostas. O nome ainda não existia, mais ali foi lançada a idéia que resultaria em jQuery. Em 26 de agosto de 2006 foi lançada a primeira versão estável 1.0 da JQuery, desde então, já foram lançadas mais 23 versões, sendo a mais recente delas a 1.4.2 em 19 de fevereiro de 2010.
JQuery é uma biblioteca JavaScript disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT – Massachusetts Institute of Technology ou pelo GPL – GNU General Public License. Isso, resumidamente, significa que se pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais, ao alcance não só de programadores experientes como também de designers e desenvolvedores com pouco conhecimento em programação.
“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?”(Resig, 2008)
Utilidade
jQuery se destina a adicionar interatividade e dinamismo às páginas web, incrementando de forma progressiva e não obstrutiva a usabilidade, a acessibilidade e o design, enriquecendo a experiência do usuário.
Utilizando jQuery em páginas podemos:
• adicionar efeitos visuais e animações;
• acessar e manipular o DOM (Modelo de Objeto de Documento)
• buscar informações no servidor sem necessidade de recarregar a página;
• prover interatividade;
• alterar conteúdos;
• modificar apresentação e estilização;
• simplificar tarefas específicas de JavaScript;
• realizar outras tarefas relacionadas às descritas.
A biblioteca JQUERY é bastante útil ao desenvolvimento visual de uma página, pois implementa um vasto código de funções Java-script agregadas a fim de servir como ferramenta para o desenvolvimento das páginas.
jQuery prevê um conjunto de funções chamadas utilitárias que usa o sinal $ como um identificador tal qual qualquer outro identificador previsto em JavaScript.
Ex:
$.browser ou jQuery.browser.
O exemplo mostra uma função para identificar o tipo de navegador do usuário que é equivalente à função navigator.userAgent do JavaScript, no intuito de facilitar o desenvolvimento das páginas.
Um recurso bastante útil do JQuery é o encadeamento, isto é, uma seqüência de métodos um atrás do outro fazendo com que ele execute várias tarefas em apenas um comando:
$(‘h1’). css(‘color’,’#FF0000’).fadeOut().addClass(‘xpto’)
Tradução: “Construtor, encontre todos os elementos h1 no documento e aplique a regra CSS que muda a cor do texto para vermelha (#FF0000), a seguir aplique um efeito de esmaecimento (fadeOut) no texto dos h1 e adicione
à classe denominada xpto nos elementos h1.”
Características
• Uso de seletores CSS para localizar componentes da estrutura de marcação HTML da página;
• Arquitetura compatível com instalação de plug-ins e extensões em geral;
• É compatível com todos os navegadores;
• Capaz de interação implícita, isto é, não há necessidade de construção de
loops para localização de elementos no documento;
• Admite programação encadeada, ou seja, cada método retorna um objeto;
• Reutilização do código através de plugins;
• Redução de código;
• Trabalha com AJAX e DOM;
• Implementação segura de recursos do CSS1, CSS2 e CSS3.
Para que um script consiga imprimir dinamismo, alterar comportamentos ou apresentação, no todo ou em partes de uma página web, ele precisa de um método de acesso à árvore do documento com a finalidade de encontrar o elemento HTML no qual será vinculado o comportamento. Ao contrário das soluções tradicionais com JavaScript, o uso da biblioteca jQuery não permite misturar script com marcação HTML. É obrigatória a inserção do script incorporado na seção head do documento ou a anexação em um arquivo separado e linkagem para os documentos onde serão utilizados. Usa as mesmas diretrizes que regem a vinculação de folhas de estilo, isto é, se o script serve a mais de uma página, adota-se a solução de linkar, senão, adota-se a solução de incorporar na seção head do documento.
Exemplos
Acesse exemplos do site oficial :http://www.futurecolors.ru/jquery/
Seguem abaixo alguns código e os respectivos links para exemplos de efeitos conseguidos com o JQuery.
P.S.: Crie um arquivo de texto com extenção .html em alguma pasta, e adicione o código exemplo ao mesmo.
1º Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
$("#go1").click(function(){
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
$("#go1").add("#go2").click();
});
$("#go4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
</script>
</body>
</html>
2º Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>
3º Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
span { cursor:pointer; }
span.hilite { background:yellow; }
div { display:inline; color:red; }
</style>
<script src="E:\Universidade\Compiladores\jquery\jquery-1.4.2.min.js"></script>
</head>
<body>
<h3>Find the modifiers - <div></div></h3>
<p>
If you <span>really</span> want to go outside
<span>in the cold</span> then make sure to wear
your <span>warm</span> jacket given to you by
your <span>favorite</span> teacher.
</p>
<script>
$("span").click(function () {
$(this).fadeOut(1000, function () {
$("div").text("'" + $(this).text() + "' has faded!");
$(this).remove();
});
});
$("span").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
</script>
</body>
</html>
4º Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script src="E:\Universidade\Compiladores\jquery\jquery-1.4.2.min.js"></script>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<script>
$("p").click(function () {
$("p").fadeOut("slow");
});
</script>
</body>
</html>
Dicas
A seguir mostraremos algumas dicas úteis para programação em jQuery:
• Use o mínimo possível de manipulação com o DOM: Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.
• Use o método interno data() do jQuery para armazenar estados, este método pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM.
• A maioria dos frameworks para JavaScript usam o símbolo $ como atalho. Para evitar problemas existe uma solução simples, a função noconflict (), que permite definir outro atalho para o framework:
• Uma boa maneira de evitar conflitos no JavaScript (não somente com jQuery) é o uso de uma função anônima.O que for executado dentro do bloco não muda com o escopo global, evitando problemas com nomes duplicados de variáveis e funções.
• Adicione uma classe no HTML para saber se o JavaScript está disponível. Logo que o jQuery carregar, use-o para adicionar uma classe chamada “JS” na tag HTML, Como isso só acontece quando o JavaScript e o jQuery estão prontos, você pode usar CSS para controlar quando um elemento deve aparecer, quando o usuário estiver com JavaScript habilitado.
Os 40 Melhores Plugins da jQuery para facilitar a vida do Desenvolvedor Web:
1. Interface: opções para movimentar divs, mudar tamanhos, criar slideshows, auto-completar, criar carrinho de compras e outras coisas.
2. jQuery Flash Plugin: detecta se o Flash está instalado, pede para instalar, é acessível e não obstrutivo. Permite inserir um mp3 player em Flash e vídeos do YouTube via código.
3. TableSorter: permite que o usuário edite a ordem dos dados de tabelas sem precisar recarregar a página.
4. jQMinMax: adiciona suporte a min-width, max-width, min-height e max-height onde eles não são suportados.
5. QuickSearch: plugin que busca textos e possui várias opções.
6. Tabs version 2: sistema de abas com diversos efeitos.
7. autocomplete: sistemas de autocompletar.
8. autohelp: ajuda o usuário a preencher formulários dando dicas do que escrever.
9. editable: edita elementos com um click.
10. AutoScroll: rolar a página quando segura Control e move o mouse.
11. jQuery History: grava o histórico e ativa a opção de voltar no navegador.
12. CheckBox: muda as checkboxes de formulários e CSS.
13. Chili: colore a sintaxe de códigos de diversas linguagens com CSS.
14. ColorGradient: cria gradient em elementos com as cores selecionadas.
15. Gradient: cria efeito gradient no fundo de elementos.
16. Curvy Corners: adiciona bordas arredondadas em elementos facilmente, sem Photoshop.
17. GreyBox Redux: mostra fotos, sites e outras coisas em uma janela no estilo LightBox.
18. jCarousel: controla listas verticais e horizontais com conteúdo dinâmico ou estático e com animação.
19. jScrollPane: muda a aparência das scrollbars.
20. MouseGestures: identifica os movimentos do mouse.
21. jTicker: faz com que uma div rode notícias vindas de um arquivo RSS.
22. ToolTip: cria tooltips, “janelinhas” que aparecem quando o mouse é passado em algo.
23. NiceJForms: deixa formulários “mais belos”.
24. Ajax Queue: faz filas para carregar páginas.
25. pngFix: corrige o velho problema do PNG transparente no IEca 5.5 e 6.
26. jQuery Accessibility Plugin: torna seu site acessível facilmente.
27. jTemplates: cria templates facilmente 100% JavaScript.
28. jqUploader: substitui campos input por um arquivo Flash que mostra a porcentagem e barra de progresso dos uploads.
29. jTagEditor: cria editores de códigos HTMl, sintaxe Wiki, BBCode e outras coisas.
30. jQuery Grid: solução para representar dados em tabelas.
31. jdMenu: cria menus dropdown facilmente.
32. DynaCloud: cria tags cloud de textos e os colore quando clicados.
33. FlyDOM: gera conteúdo dinâmico e facilmente.
34. jQuery UI: cria interfaces para o usuário.
35. BlockUI: mostra uma mensagem de espera no centro da tela enquanto executa alguma operação AJAX.
36. jQuery Calendar: cria um calendário quando o usuário clica em um campo de texto de formulário.
37. jqModal: crie diversos tipos de janelas com HTML e CSS.
38. Impromptu: crie diversos tipos de mensagem de confirmação.
39. Password Strenght Meter: mede se uma senha é fácil ou difícil.
40. Multiple File Upload: permite upload de múltiplos arquivos com filtro de extensões e número máximo de arquivos.
Alguns sites que usam JQuery:
jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.
Seu lema é: "Escrever menos e fazer mais".
Utilizado por mais de 27% dos 10.000 sites mais visitados, jQuery é a mais popular biblioteca JavaScript em uso hoje.
Além do evidente aumento de produtividade, o tamanho da biblioteca impressiona: a versão 1.2.3 tem apenas 29kb para fazer tudo o que for preciso: requisições AJAX, iteração e criação de elementos DOM, tratamento de eventos, resumindo, é uma biblioteca completa, sem deixar a simplicidade de lado.
Dell computadores, no exemplo, o pedido de Login:
Twitter, aviso de atualização realizada:
Conclusão
O JQuery se torna uma poderosa ferramenta no desenvolvimento web, principalmente para o desenvolvedor da regra de negócio, que não se preocupa muito com layout. Porém a cobrança visual é intensa, já que um sistema em si se torna bastante complexo para o usuário final. A visão do todo é importante e, sem o uso da JQuery, o desenvolvedor dedicaria muito tempo e esforço para aprimorar seus projetos no uso de efeitos visuais. A biblioteca JQuery é uma opção útil e provê dinamismo para projetos web, já que grande parte das páginas atuais exigem um bom aspecto visual. Através dela pode-se contar com facilidade de implementação e desempenho.
Referências Eletrônicas:
http://jquery.com/ acessado em 13 de abril de 2010.
http://novatec.com.br/livros/jquery/capitulo9788575221785.pdf acessado em 14 de abril de 2010.
http://www.futurecolors.ru/jquery/acessado em 14 de abril de 2010.
