Jquery

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.

1.JPG

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">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>

<button id="go4">&raquo; 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">&laquo;</button> <button id="right">&raquo;</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:

2.JPG

Twitter, aviso de atualização realizada:

3.JPG

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.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License