"jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML.1 Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig. Usada por cerca de 55% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript.2 3 jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2.4 A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plugins sobre ela. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade. A Microsoft e a Nokia anunciaram planos de incluir o jQuery em suas plataformas,5 a Microsoft adotando-a inicialmente no Visual Studio6 para uso com o framework AJAX do ASP.NET, e a Nokia na sua plataforma Web Run-Time de widgets.7 A biblioteca jQuery também tem sido usada no MediaWiki desde a versão 1.16.8" (http://pt.wikipedia.org/wiki/JQuery) Cross-browser Usado para desenvolvimento de interfaces Simples navegação no documento HTML Manipulação dos elementos DOM (Document Object Model) Manipulção de eventos de maneira simples. Criação de animações manipulando propriedades CSS. Desenvolvimento de aplicações AJAX com pouco código

1. FRONTEND DEVELOPMENT

2. Introdução
●
●
●
●
●
●
O que é JQuery
Pré-requisitos
Quem usa
Porque usar e quais as vantagens
Quem pensou nisso tudo
E por ai vai

3. O que é?
●
●
●
●
Cross-browser
Usado para desenvolvimento de interfaces
Simples navegação no documento HTML
Manipulação dos elementos DOM
(Document Object Model)
● Manipulção de eventos de maneira simples.
● Criação de animações manipulando
propriedades CSS.
Desenvolvimento de aplicações AJAX com
pouco código

4. Pré-requisito
1. Conhecimentos em HTML + CSS
2. Pouquinho de javascript

5. Quem usa JQuery?

6. O mundo todo
Xiiiii, eles ainda
usam JQuery...

7. Confronto desnecessário
Flash está fadado a extinção? NÃO
Ele apenas encontrou um concorrente à altura.

8. Onde usar um e outro
Aplicação
Flash
Javascript
Slide Show
X
Validação de
Formulário
X
Menus suspensos
X
Tabbed Panels
X
Popups & Dicas
X
Expansível / Elementos
dobrável
X
Leitor de Vídeo / Áudio
X
Animação Complexo
X
3D
X
Multimídia Complexo
X

9. Tá todo mundo usando
● Dos 10 mil sites mais visitados em todo
mundo 41% usam JQuery

10. Vantagens de se usar Jquery
●
O acesso direto ao DOM se faz com uso dos poderosos seletores das
CSS 2.1 e CSS 3.
●
A manipulação de conteúdo sem limitações, com algumas poucas
linhas de código.
●
O suporte para todo tipo de evento de interação com o usuário, sem
limitações impostas pelos navegadores.
●
A possibilidade de inserir uma grande variedade de efeitos de
animação com uma simples linha de código.
●
O uso simplificado e sem restrições com AJAX e linguagens de
programação, como PHP e ASP.
●
A simplificação na criação de scripts.
●
O emprego cross-browser.

11. Será que é tão simples assim?

12. Uma simples animação sem JQuery
function xAnimateXY(sEleId, iTargetX, iTargetY, uTotalTime)
{
var ele = xGetElementById(sEleId);
var startX = xLeft(ele); // x start position
var startY = xTop(ele); // y start position
var dispX = iTargetX - startX; // x displacement
var dispY = iTargetY - startY; // y displacement
var freq = Math.PI / (2 * uTotalTime); // frequency
var startTime = new Date().getTime();
var tmr = setInterval(
function() {
var elapsedTime = new Date().getTime() - startTime;
if (elapsedTime < uTotalTime) {
var f = Math.abs(Math.sin(elapsedTime * freq));
xLeft(ele, Math.round(f * dispX + startX));
xTop(ele, Math.round(f * dispY + startY));
}
else {
clearInterval(tmr);
xLeft(ele, iTargetX);
xTop(ele, iTargetY);
}
}, 10
);
}

13. Uma simples animação sem JQuery
// xLeft r2, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xLeft(e, iX)
{
if(!(e=xGetElementById(e))) return 0;
var css=xDef(e.style);
if (css && xStr(e.style.left)) {
if(xNum(iX)) e.style.left=iX+'px';
else {
iX=parseInt(e.style.left);
if(isNaN(iX)) iX=xGetComputedStyle(e,'left',1);
if(isNaN(iX)) iX=0;
}
}
else if(css && xDef(e.style.pixelLeft)) {
if(xNum(iX)) e.style.pixelLeft=iX;
else iX=e.style.pixelLeft;
}
return iX;
}

14. Uma simples animação sem JQuery
// xTop r2, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xTop(e, iY)
{
if(!(e=xGetElementById(e))) return 0;
var css=xDef(e.style);
if(css && xStr(e.style.top)) {
if(xNum(iY)) e.style.top=iY+'px';
else {
iY=parseInt(e.style.top);
if(isNaN(iY)) iY=xGetComputedStyle(e,'top',1);
if(isNaN(iY)) iY=0;
}
}
else if(css && xDef(e.style.pixelTop)) {
if(xNum(iY)) e.style.pixelTop=iY;
else iY=e.style.pixelTop;
}
return iY;
}

15. Uma simples animação sem JQuery
Animação sem JQuery funcionando:
http://www.cross-browser.
com/x/examples/animation_tech.php

16. Agora com JQuery
$("div").animate( { left: "+=300", top:0 }, 3000);
exemplo prático:
http://jsfiddle.net/fjPAN/107/

17. Selectors (a alma do framework)
O método mágico
$
Exemplos simples:
$("#meuId").css("width", "100px");
$(".minhaclasse").css("width", "100px");
$("ul.topnav > li").css("border", "3px double
red")

18. Seletores na prática
http://www.w3schools.
com/jquery/jquery_examples.asp
http://jsbin.com/#javascript,html,live
http://jsfiddle.net
http://jsfiddle.net/fjPAN/26/

19. ID Selector (“#id”)
$("#meuId").css("width", "100px");
exemplo prático:
http://jsfiddle.net/fjPAN/83/

20. Class Selector (“.class”)
$(".minhaClasse").css("width", "100px");
exemplo prático:
http://jsfiddle.net/fjPAN/37/

21. Child Selector (“parent > child”)
$("ul > li").css("width", "100px");
exemplo prático:
http://jsfiddle.net/fjPAN/70/

22. Child Selector (“parent > child”)
$("ul > li").css("width", "100px");
exemplo prático:
http://jsfiddle.net/fjPAN/70/

23. :first Selector
$("tr:first").css("height", "200px");
exemplo prático:
http://jsfiddle.net/fjPAN/73/

24. :last Selector
$("tr:last").css("height", "200px");
exemplo prático:
http://jsfiddle.net/fjPAN/74/

25. :eq() Selector
$("tr:eq(1)").css("color", "#FFFF00");
exemplo prático:
http://jsfiddle.net/fjPAN/82/

26. Accordion em duas linhas
Link:
http://jqueryui.com/demos/accordion/
Exemplo prático:
http://jsfiddle.net/fjPAN/127/

27. Simples Galeria de fotos com JQuery
Link:
http://caroufredsel.frebsite.nl/

28. Outras bibliotecas JavaScript
Link com varias biliotecas:
http://www.cssnolanche.com.br/22-javascript-frameworks/

29. O gênio pensante do Framework
John Resing,
o criador da jQuery.

30. OBRIGADO
email: mateuspaduaweb@gmail.com
face: /mateus.padua.3