Línguas
Páginas
Legal
FRONTEND DEVELOPMENT
Introdução
● O que é JQuery● Pré-requisitos● Quem usa ● Porque usar e quais as vantagens● Quem pensou nisso tudo● E por ai vai
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
Pré-requisito
1. Conhecimentos em HTML + CSS2. Pouquinho de javascript
Quem usa JQuery?
O mundo todo
Xiiiii, eles ainda usam JQuery...
Confronto desnecessário
Flash está fadado a extinção? NÃOEle apenas encontrou um concorrente à altura.
Onde usar um e outroAplicaçã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
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 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.
Será que é tão simples assim?
Uma simples animação sem JQueryfunction 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
);
}
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;
}
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;
}
Uma simples animação sem JQuery
Animação sem JQuery funcionando:
http://www.cross-browser.com/x/examples/animation_tech.php
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").css("width", "100px");$("ul.topnav > li").css("border", "3px double red")
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/
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/
John Resing,o criador da jQuery.
O gênio pensante do Framework
Top Related