jQuery básico (parte 2)

1,188 views
1,175 views

Published on

Trabalhamos aqui uma visão geral sobre manipulação DOM, criação de efeitos e envio de requisições assíncronas usando jQuery

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery básico (parte 2)

  1. 1. jQuery<br />Iniciando (Parte II)<br />
  2. 2. Retrospectiva<br />Tivemos uma visão geral sobre<br />Javascript<br />Uso<br />Tipos<br />OOP<br />jQuery<br />O que é<br />Como funciona<br />Seletores básicos<br />Exemplo prático (validação de formulário)<br />
  3. 3. Objetivos<br />Conhecer outros seletores do jQuery<br />Conhecer as possibilidades que o jQuery oferece para manipulação de eventos e animações de elementos<br />Entender sobre requisições assíncronas e como utilizá-las com o jQuery<br />
  4. 4. Agenda<br />DOM<br />Seletores avançados<br />Gerenciando eventos<br />Efeitos<br />AJAX<br />
  5. 5. DOM.intro()<br />"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.“<br />http://www.w3schools.com/htmldom/dom_intro.asp<br />
  6. 6. DOM.intro()<br /><html><br /> <head><br /> <title>My title</title><br /> </head><br /> <body><br /> <a href=“”>My link</a><br /> <h1>My header</h1><br /> </body><br /></html><br />
  7. 7. DOM.intro()<br />
  8. 8. DOM.intro()<br />Cadaelemento é vistocomoumaramificação do documento (nó)<br />O conteúdotexto das tags é um nó de textoligado à tag<br />Via Javascriptutilizamosbasicamente o objetodocument paracriarnovosnós<br />
  9. 9. DOM.creating().pureJs()<br /><script type=“text/javascript”><br />varlink = document.createElement('a');<br />link.href = "http://www.google.com";<br />link.target = "_blank";<br />link.appendChild(<br />document.createTextNode('Link!')<br />);<br />document.body.appendChild(link);<br /></script><br />
  10. 10. DOM.creating().jQuery1()<br /><script type=“text/javascript”><br />varlink = $('<a>');<br />link.attr('href', 'http://www.google.com');<br />link.attr('target', '_blank');<br />link.text('Link!');<br />link.appendTo('body');<br /></script><br />
  11. 11. DOM.creating().jQuery2()<br /><script type=“text/javascript”><br />$('<a href="http://www.google.com" target="_blank">Link!</a>')<br /> .appendTo('body');<br /></script><br />
  12. 12. DOM.creating().jQuery3()<br /><script type=“text/javascript”><br />$('<a>')<br /> .attr('href', 'http://www.google.com')<br /> .attr('target', '_blank')<br /> .text('Link!')<br /> .appendTo('body');<br /></script><br />
  13. 13. DOM.basicSelections()<br />
  14. 14. DOM.appending()<br />Javascript<br />element.appendChild(node) – adiciona um nófilhoaoelemento (últimofilho)<br />jQuery<br />element.append(node) – adiciona um nófilhoaoelemento(últimofilho)<br />element.appendTo(node) – adiciona o elementocomonófilho do element passado(últimofilho)<br />element.prepend(node)– adiciona um nófilhoaoelemento(primeirofilho)<br />element.prependTo(node) – adiciona o elementocomonófilho do element passado(primeirofilho)<br />
  15. 15. DOM.removing()<br />Javascript<br />element.removeChild(node) – remove um nófilho do elemento<br />jQuery<br />element.remove() – remove o elemento<br />element.remove(selector) – remove oselementosencontradosdentro do elemento<br />
  16. 16. Seletores avançados<br />Através do jQuerypodemosselecionaroselementosatravés dos atributos das tags. A sintaxesimilar ao CSS:<br />$(‘label’)<br />$(‘label[for=“nome”]’)<br />http://api.jquery.com/category/selectors/<br />
  17. 17. Seletores avançados<br />Tambémpodemosfazerverificações com osseletores(se estávisível, selecionado, …) através do método is()<br />if ($(“#barraLateral”).is(“:hidden”))<br />
  18. 18. Eventos<br />Através do métodobind() podemosdefinirumafunçãopara um oumaiseventos<br />Através do métodotrigger()podemoschamar a função de um evento<br />Através do métodounbind()podemos remover a função dos eventos<br />
  19. 19. Eventos.example()<br /><script><br />var a = $(“a”);<br />a.bind(‘click’, function() { alert(“Hey!” });<br />a.trigger(‘click’);<br /></script><br />
  20. 20. Eventos<br />O jQueryprovêatalhosparaoseventosmaiscomuns (click, dblclick, blur, change, load, focus, …)<br />http://api.jquery.com/category/events/<br />
  21. 21. Efeitos<br />O jQuerypossibilitacriarmosefeitos com oselementosatravés de métodoscomo: animate(), fadeIn(), fadeOut(), fadeTo, hide(), show(), toggle(), slide()<br />http://api.jquery.com/category/effects/<br />
  22. 22. Efeitos.animation()<br />O método animate() altera as propriedadesvisuais do elementoemumadeterminadaduração<br />
  23. 23. Efeitos.animation().example()<br /><script type=“text/javascript”><br />$("#block").animate(<br /> {<br /> width: "70%",<br /> opacity: 0.4,<br />marginLeft: "0.6in",fontSize: "3em",<br />borderWidth: "10px“<br /> },<br />1500<br />);<br /></script><br />
  24. 24. Efeitos.visibility()<br />Osmétodo show(), hidden(), toggle() alteram a visibilidade do elemento<br />
  25. 25. Efeitos.visibility().example()<br /><script type=“text/javascript”><br />$("#block").show();<br />$("#block").hide();<br />$("#block").toggle();<br />$("#block").toggle();<br /></script><br />
  26. 26. AJAX.intro()<br />“AJAX (acrônimo em língua inglesa de AsynchronousJavascript andXML, em português "Javascript e XML Assíncronos") é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações”<br />http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)<br />
  27. 27. AJAX.intro()<br />
  28. 28. AJAX.intro()<br />Requisição HTTP realizadapelonavegadorparauma URL do mesmodomínio<br />Podemsertransferidos dados XML, JSON, HTML ouatétextoplano<br />As requisiçõessãorealizadasatravés do objetoXMLHttpRequest<br />As requisiçõespodemserassíncronaousíncrona<br />
  29. 29. AJAX.usage()<br />Deveserutilizadaquandoqueremosenviaroubuscarinformações do servidorsemrecarregar a página<br />O ideal é quesejamtrafegadospoucos dados e usandoJavascriptmanipular e criarelementosnecessários<br />
  30. 30. AJAX.usage().example()<br /><script type=“text/javascript”><br />$.ajax(<br /> {<br /> url: “teste.php”,<br /> data: {nome: “Luís”},<br />dataType: “json”,<br /> type: “POST”,<br /> success: function(result) {<br /> alert(result);<br /> }<br />}<br />);<br /></script><br />
  31. 31. AJAX.usage().crossDomain()<br />Aproveitando a possibilidade de carregararquivosJavascriptexternos, foicriado o conceito JSONP (JSON with padding) pararealizarrequisiçõesem outros domínios.<br />A idéia é criardinamicamenteumafunção e passar o nomedelaporparâmetronarequisição, o servidorirá responder no formato JSON, passandoporparâmetropara a função<br />
  32. 32. AJAX.usage().crossDomain()<br />GET teste.php?callback=teste<br />teste({“nome”: “Luís”});<br />

×