FRONTEND DEVELOPMENT
Introdução
●
●
●
●
●
●

O que é JQuery
Pré-requisitos
Quem usa
Porque usar e quais as vantagens
Quem pensou nisso tudo
E p...
O que é?
●
●
●
●

Cross-browser
Usado para desenvolvimento de interfaces
Simples navegação no documento HTML
Manipulação d...
Pré-requisito
1. Conhecimentos em HTML + CSS
2. Pouquinho de javascript
Quem usa JQuery?
O mundo todo

Xiiiii, eles ainda
usam JQuery...
Confronto desnecessário

Flash está fadado a extinção? NÃO
Ele apenas encontrou um concorrente à altura.
Onde usar um e outro
Aplicação

Flash

Javascript

Slide Show

X

Validação de
Formulário

X

Menus suspensos

X

Tabbed P...
Tá todo mundo usando
● Dos 10 mil sites mais visitados em todo
mundo 41% usam JQuery
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 ma...
Será que é tão simples assim?
Uma simples animação sem JQuery
function xAnimateXY(sEleId, iTargetX, iTargetY, uTotalTime)
{
var ele = xGetElementById(sE...
Uma simples animação sem JQuery
// xLeft r2, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-...
Uma simples animação sem JQuery
// xTop r2, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-B...
Uma simples animação sem JQuery
Animação sem JQuery funcionando:
http://www.cross-browser.
com/x/examples/animation_tech.p...
Agora com JQuery
$("div").animate( { left: "+=300", top:0 }, 3000);

exemplo prático:
http://jsfiddle.net/fjPAN/107/
Selectors (a alma do framework)
O método mágico

$

Exemplos simples:
$("#meuId").css("width", "100px");
$(".minhaclasse")...
Seletores na prática
http://www.w3schools.
com/jquery/jquery_examples.asp
http://jsbin.com/#javascript,html,live
http://js...
ID Selector (“#id”)
$("#meuId").css("width", "100px");

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

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

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

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

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

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

exemplo prático:
http://jsfiddle.net/fjPAN/82/
Accordion em duas linhas

Link:
http://jqueryui.com/demos/accordion/
Exemplo prático:
http://jsfiddle.net/fjPAN/127/
Simples Galeria de fotos com JQuery

Link:
http://caroufredsel.frebsite.nl/
Outras bibliotecas JavaScript

Link com varias biliotecas:
http://www.cssnolanche.com.br/22-javascript-frameworks/
O gênio pensante do Framework
John Resing,
o criador da jQuery.
OBRIGADO
email: mateuspaduaweb@gmail.com
face: /mateus.padua.3
Upcoming SlideShare
Loading in …5
×

Iniciando com JQuery

931 views

Published on

"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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
931
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Iniciando com JQuery

  1. 1. FRONTEND DEVELOPMENT
  2. 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. 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. 4. Pré-requisito 1. Conhecimentos em HTML + CSS 2. Pouquinho de javascript
  5. 5. Quem usa JQuery?
  6. 6. O mundo todo Xiiiii, eles ainda usam JQuery...
  7. 7. Confronto desnecessário Flash está fadado a extinção? NÃO Ele apenas encontrou um concorrente à altura.
  8. 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. 9. Tá todo mundo usando ● Dos 10 mil sites mais visitados em todo mundo 41% usam JQuery
  10. 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. 11. Será que é tão simples assim?
  12. 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. 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. 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. 15. Uma simples animação sem JQuery Animação sem JQuery funcionando: http://www.cross-browser. com/x/examples/animation_tech.php
  16. 16. Agora com JQuery $("div").animate( { left: "+=300", top:0 }, 3000); exemplo prático: http://jsfiddle.net/fjPAN/107/
  17. 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. 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. 19. ID Selector (“#id”) $("#meuId").css("width", "100px"); exemplo prático: http://jsfiddle.net/fjPAN/83/
  20. 20. Class Selector (“.class”) $(".minhaClasse").css("width", "100px"); exemplo prático: http://jsfiddle.net/fjPAN/37/
  21. 21. Child Selector (“parent > child”) $("ul > li").css("width", "100px"); exemplo prático: http://jsfiddle.net/fjPAN/70/
  22. 22. Child Selector (“parent > child”) $("ul > li").css("width", "100px"); exemplo prático: http://jsfiddle.net/fjPAN/70/
  23. 23. :first Selector $("tr:first").css("height", "200px"); exemplo prático: http://jsfiddle.net/fjPAN/73/
  24. 24. :last Selector $("tr:last").css("height", "200px"); exemplo prático: http://jsfiddle.net/fjPAN/74/
  25. 25. :eq() Selector $("tr:eq(1)").css("color", "#FFFF00"); exemplo prático: http://jsfiddle.net/fjPAN/82/
  26. 26. Accordion em duas linhas Link: http://jqueryui.com/demos/accordion/ Exemplo prático: http://jsfiddle.net/fjPAN/127/
  27. 27. Simples Galeria de fotos com JQuery Link: http://caroufredsel.frebsite.nl/
  28. 28. Outras bibliotecas JavaScript Link com varias biliotecas: http://www.cssnolanche.com.br/22-javascript-frameworks/
  29. 29. O gênio pensante do Framework John Resing, o criador da jQuery.
  30. 30. OBRIGADO email: mateuspaduaweb@gmail.com face: /mateus.padua.3

×