Jquery - Apresentação e aplicação prática

jQueryjQuery

David David R. LopesR. LopesJ. J. TelesTeles Maciel MacielJovan Jovan ÂngeloÂngeloPauloPaulo A . França A . França

Introdução

Framework Javascript; Nasceu em 2005; Licença: MIT ou GPL; Não é o único framework javascript;

Tema:Write Less, Do More

Para que serve:

Resolução da incompatibilidade entre os navegadores.Redução de código.Reutilização do código através de plugins.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.

Texto integralmente retirado de http://pt.wikipedia.org/wiki/JQuery

Quanto "pesa" um framework?

O framework Jquery na sua versão 1.4 (minificado) pesa 24kb !

Para seu projeto você pode baixar o Jquery em : www.jquery.com ou importar a biblioteca diretamente do Google, deste modo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

O que você precisa saber pra começar?

Você tem que ter o DOM (carregado) pra usar jQuery; XHTML e Javascript; Seletores CSS2 e CSS3 (já são previstos no jQuery) podem te ajudar!

jQuery é fácil: A biblioteca se baseia na chamada de apenas uma função e tem 24kb.

Vamos por a mão na massa?

Esquentando com “Hello World”“Hello World”

1.Baixe a mais nova versão do JQuery, atualmente 1.4.2;2.Crie um arquivo teste.html;3.Coloque o jquery-1.4.2.js no mesmo diretório do teste.html e importe a biblioteca;

Esquentando com “Hello World”“Hello World”

Esquentando com “Hello World”“Hello World”

Explicando o código

$("a") é um Selector do jQuery que seleciona elementos "a"O $ é como se assemelha a uma "classe" em jQuery$() portanto "instancia" um objeto jQuery.click() é invocado quando ocorre um click do mouse em um elemento selecionado;

O código sem jQuery:

Separação de JS e HTML! Eliminação de código redundante!<3 jQuery.

Agora cumpriremos uma missão em jQuery

Baixamos o site fatecsjc.edu.br usando wget e iremos aplicar alterações nele via jQuery para que mais meninas se interessem por nossa faculdade:

Eis o site baixado:

Missão 1: Mudar o site da fatecsjc

Missão 1: Mudar o site da fatecsjc

+ = ...+ = ...

alteracoes.js

Missão cumprida.Vamos ver o novo leiaute

Novo leiaute

Explicando o código.

Jquery é mais que manipulação do DOM

Jquery tem diversas outras potencialidades:

Ajax simplificado: Métodos $.ajax, $.getJSON, $.get e etc... Garantia de funcionar nos mais diversos navegadores; Documentação extensa e atualizada; Comunidade forte e muitos entusiastas; Utilizado em muitos sites famosos como Google Search, IBM.com, Mozzila.com, etc..; Validação de formulários no cliente; Muitos, muitos e muitos plugins.

Plugins

ver jquerylist.com

Leitura recomendada

Melhore seu código jQuery (25 dicas) [EN]http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

08 plugins jQuery que usam apis da Google(EN):http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/

31 snippets de jQuery (EN):http://addyosmani.com/blog/31-jquery-snippets/

Anatomia de um plugin jQueryhttp://www.tableless.com.br/anatomia-de-um-plugin-jquery

Referências

[1]http://docs.jquery.com/Main_Page;

[2]http://docs.jquery.com/Sites_Using_jQuery

[3]http://jquerylist.com/

[4]http://www.tutorialspoint.com/jquery/jquery-quick-guide.htm