jQuery

David R. Lopes
J. Teles Maciel
Jovan Ângelo
Paulo 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”

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”
Esquentando com “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
 Missão 1: Mudar o site da fatecsjc

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

+ = ...

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 jQuery

http://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