• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Iniciando com JQuery
 

Iniciando com JQuery

on

  • 335 views

"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 ...

"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

Statistics

Views

Total Views
335
Views on SlideShare
335
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Iniciando com JQuery Iniciando com JQuery Presentation Transcript

    • 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 + 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 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 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 ); }
    • 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/
    • O gênio pensante do Framework John Resing, o criador da jQuery.
    • OBRIGADO email: mateuspaduaweb@gmail.com face: /mateus.padua.3