Introdução ao JQuery e AJAX

4,130 views
4,006 views

Published on

Introdução ao JQuery e AJAX

  1. 1. Write Less DO MORE Introdução ao JQuery e AJAX Prof: Sérgio Souza Costa
  2. 2. Sobre mim Sérgio Souza Costa Professor - UFMA Doutor em Computação Aplicada (INPE) prof.sergio.costa@gmail.com https://sites.google.com/site/profsergiocosta/home http://www.slideshare.net/skosta/presentations?order=popular https://twitter.com/profsergiocosta http://gplus.to/sergiosouzacosta
  3. 3. "Considered a “toy” language by serious web developers for most of its lifetime, Java-Script has regained its prestige in the past few years as a result of the renewed interest in Rich Internet Applications and Ajax technologies". John Resig - jQuery in Action
  4. 4. O que é JQuery ?
  5. 5. O que é JQuery ? JavaScript HTML/ Browser
  6. 6. O que é JQuery ? JavaScript DOM/ BOM HTML/ Browser
  7. 7. O que é JQuery ? JavaScript JQuery DOM/ BOM HTML/ Browser
  8. 8. O que é JQuery ? JavaScript JQuery DOM/ BOM Independente de browser HTML/ Browser
  9. 9. O que é JQuery ? JavaScript JQuery Independente de DOM/ BOM HTML/ Browser JQuery é uma biblioteca JavaScript, ou seja, um conjunto de browser objetos e funções em um arquivo js.
  10. 10. Como usar ? Matando a ansiedade com um "Hello World" Acesse http://jquery.com/, e baixem o arquivo JQuery
  11. 11. Como usar ? Matando a ansiedade com um "Hello World" Acesse http://jquery.com/, e baixem o arquivo JQuery ou diretamente: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
  12. 12. Como usar ? Matando a ansiedade com um "Hello World" Acesse http://jquery.com/, e baixem o arquivo JQuery ou diretamente: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js ou baixem o hello_jquery.rar, no site
  13. 13. Como usar ? Matando a ansiedade com um "Hello World" Acesse http://jquery.com/, e baixem o arquivo JQuery ou diretamente: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js ou baixem o hello_jquery.rar O "min" significa que este arquivo foi "minificado", ou seja, eliminado todos os espaçamentos, tabs ...
  14. 14. Hello World <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" > equivalente ao $(document).ready( window.onload function(){ $ ("body").html ("<p>Ola Mundo !!</p>") }) </script> </head> <body> </body> </html>
  15. 15. Hello World Observem o uso de funções como parâmetros e de funções anônimas. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" > equivalente ao $(document).ready( window.onload function(){ $ ("body").html ("<p>Ola Mundo !!</p>") }) </script> </head> <body> </body> </html>
  16. 16. Hello World - 2 - Atalho "document ready" <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" > $( function(){ $ ("body").html ("<p>Ola Mundo !!</p>") } ) </script> </head> <body> </body> </html> equivalente ao window.onload
  17. 17. Hello World - 3 - Sem "innerHtml" <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ $ ("<p/>", { 1. Cria a tag <p> text: "Ola Mundo !!" 2. Atribui a ela o texto }).appendTo("body") 3. Adiciona a "body" }) </script> </head> <body> </body> </html>
  18. 18. Hello World - 3 - Sem "innerHtml" Matado a ansiedade, vamos entender melhor isso ... <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ $ ("<p/>", { 1. Cria a tag <p> text: "Ola Mundo !!" 2. Atribui a ela o texto }).appendTo("body") 3. Adiciona a "body" }) </script> </head> <body> </body> </html>
  19. 19. Para quê ?
  20. 20. Para quê ? Produtividade = Poucas linhas de códigos
  21. 21. Para quê ? Cross browser Produtividade = Poucas linhas de códigos
  22. 22. Para quê ? DOM Cross browser Produtividade – Poucas linhas de códigos
  23. 23. Para quê ? CSS DOM Cross browser Produtividade – Poucas linhas de códigos
  24. 24. Para quê ? CSS DOM Cross browser Produtividade – Poucas linhas de códigos AJAX
  25. 25. Para quê ? DOM PLUGINS Cross browser Produtividade – Poucas linhas de códigos AJAX CSS
  26. 26. Jquery ● ● ● ● ● ● Released Jan. 2006 Foco na manipulação de DOM Suporte a Events, Ajax e Animações Código sucinto, arquivos pequenos Extensível via plugin Cross browser (se comporta da mesma maneira sobre diferentes browser)
  27. 27. Ranking das bibliotecas JavaScript
  28. 28. Jquery + Programação Funcional JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional Funções como parâmetros Funções como retorno
  29. 29. Jquery + Programação Funcional JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional Funções como parâmetros Funções como retorno Funções anônimas
  30. 30. Jquery + Programação Funcional JQuery foi desenvolvido usando muitas das suas características como linguagem de programação funcional Funções como parâmetros Closures Funções como retorno Funções anônimas “Thank God for closures!”. John Resig
  31. 31. Alguns slides a partir daqui foram baseados em: jQuery Essentials by Marc Grabanski http://marcgrabanski.com/presentations/jquery-essentials.pdf
  32. 32. Mais fácil escrever do que códigos JavaScript puros.
  33. 33. Ocultando divs com JavaScript e DOM divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
  34. 34. Ocultando divs com JavaScript e DOM divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { 1. Selecionava todos <div> divs[i].style.display = ‘none’; 2. Para cada um } 3. Mudava o estilo, css Ocultando divs com JQuery $(“div”).hide();
  35. 35. Ocultando divs com JavaScript e DOM divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; } Ocultando divs com JQuery $(“div”).hide();
  36. 36. Filosofia JQuery
  37. 37. Filosofia JQuery #1. PROCURE algo no HTML
  38. 38. Filosofia JQuery #1. PROCURE algo no HTML #2. FAÇA algo com ele
  39. 39. PROCURE $("div")
  40. 40. PROCURE $("div") Procurando elementos...
  41. 41. Use o seletor $()
  42. 42. Use o seletor $() $(“#myId”)
  43. 43. Use o seletor $() $(“#myId”) $(“.myClass”)
  44. 44. Use o seletor $() $(“#myId”) $(“.myClass”)
  45. 45. Use o seletor $() $(“#myId”) $(“.myClass”) $(“table”)
  46. 46. Exemplos de seletores
  47. 47. Exemplos de seletores $(“#content”) todos elementos com id content
  48. 48. Exemplos de seletores $(“#content”) todos elementos com id content $(“li:first”) o primeiro item de uma lista
  49. 49. Exemplos de seletores $(“#content”) todos elementos com id content $(“li:first”) o primeiro item de uma lista $(“a[target=_blank]”) todos links onde target “_blank”
  50. 50. Exemplos de seletores $(“#content”) todos elementos com id content $(“li:first”) o primeiro item de uma lista $(“a[target=_blank]”) todos links onde target “_blank” $(“form[id^=step]”) todos "forms" onde id começa com “step”
  51. 51. Exemplos de seletores $(“#content”) todos elementos com id content $(“li:first”) o primeiro item de uma lista $(“a[target=_blank]”) todos links onde target “_blank” $(“form[id^=step]”) todos "forms" onde id começa com “step” $("img", cell) todos as imagens dentro de cell
  52. 52. Seleção com composição:
  53. 53. Seleção com composição: $(“#myId, .myClass, table”)
  54. 54. Procure $(“div”)
  55. 55. Procure Faça $(“div”).hide()
  56. 56. Vamos ver .... teste_jquery_1.html
  57. 57. Encadeamento
  58. 58. Encadeamento $("#div_1").addClass("redbox")
  59. 59. Encadeamento $("#div_1").addClass("redbox").fadeOut();
  60. 60. Encadeamento $("#div_1").addClass("redbox").fadeOut(); Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos.
  61. 61. Encadeamento $("#div_1").addClass("redbox").fadeOut(); Seleção retorna um objeto, então podemos aplicá-las em outras consultas ou métodos. Testando .....
  62. 62. Encadeamento $('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');
  63. 63. Encadeamento $('#content').find('h3').eq(2).html('o novo texto do terceiro h3!'); Formatando $('#content') .find('h3') .eq(2) .html('o novo texto do terceiro h3!');
  64. 64. Salvando seleções var $divs = $('div');
  65. 65. Salvando seleções var $divs = $('div'); $divs.addClass(“redbox”)
  66. 66. Salvando seleções var $divs = $('div'); $divs.addClass(“redbox”) O JQuery não salva as consultas, se for precisar do resultado dessa consulta, salve-a em uma variável
  67. 67. Salvando seleções var $divs = $('div'); $divs.addClass(“redbox”) O JQuery não salva as consultas, se for precisar do resultado dessa consulta, salve-a em uma variável Não existe nada especial no nome $divs, o $ é apenas uma notação para diferenciar o objetos JQuery
  68. 68. Checando o retorno de uma seleção Uma seleção sempre retornara um objeto, então o teste a seguir será sempre verdadeiro: if ($('div.foo')) { ... }
  69. 69. Checando o retorno de uma seleção Uma seleção sempre retornara um objeto, então o teste a seguir será sempre verdadeiro: if ($('div.foo')) { ... } Ao invés disso, testem o tamanho do objeto: if ($('div.foo').length) { ... }
  70. 70. Refinando & Filtrando Seleções
  71. 71. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s
  72. 72. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s $('h1').not('.bar'); // elementos h1 que não têm a classe bar
  73. 73. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s $('h1').not('.bar'); // elementos h1 que não têm a classe bar $('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current
  74. 74. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s $('h1').not('.bar'); // elementos h1 que não têm a classe bar $('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current $('ul li').first(); // somente o primeiro item da lista não ordenada
  75. 75. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s $('h1').not('.bar'); // elementos h1 que não têm a classe bar $('ul li').filter('.current'); // itens de listas não-ordenadas com a classe current $('ul li').first(); // somente o primeiro item da lista não ordenada $('ul li').eq(5); // o sexto item da lista
  76. 76. Refinando & Filtrando Seleções $('div.foo').has('p'); // o elemento div.foo que contém <p>'s $('h1').not('.bar'); // elementos h1 que não têm a classe bar Oculte o primeiro $('ul li').filter('.current'); // itens de listas não-ordenadas com a classe item das listas do current arquivo teste_jquery_1.html $('ul li').first(); // somente o primeiro item da lista não ordenada $('ul li').eq(5); // o sexto item da lista
  77. 77. Seletores relacionados à formulários :button Seleciona elementos do tipo <button> :checkbox Seleciona inputs com type="checkbox" :checked Seleciona inputs selecionados :disabled Seleciona elementos de formulário desabilitados :enabled Seleciona elementos de formulário habilitados
  78. 78. Seletores relacionados à formulários :input Seleciona <input>, <textarea>, e elementos <select> :radio Selecionam inputs com type="radio" :selected Seleciona inputs que estão selecionados :submit Seleciona inputs com type="submit" :text Seleciona inputs com type="text" ...
  79. 79. Um Método, Diferentes usos
  80. 80. Um Método, Diferentes usos $(...).html();
  81. 81. Um Método, Diferentes usos $(...).html(); $(...).html(“<p>hello</p>”);
  82. 82. Um Método, Diferentes usos $(...).html(); $(...).html(“<p>hello</p>”); $(...).html(function(i){ return “<p>hello “ + i + “</p>”; });
  83. 83. Um Método, Diferentes usos $(...).html(); $(...).html(“<p>hello</p>”); $(...).html(function(i){ return “<p>hello “ + i + “</p>”; }); Lembram da sobrecarga ? Este método é um exemplo de "sobrecarga".
  84. 84. Getters & Setters O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmo nome do método usado para obter um valor
  85. 85. Getters & Setters O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmo nome do método usado para obter um valor. O método $.fn.html usado como setter $('h1').html('olá mundo');
  86. 86. Getters & Setters O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmo nome do método usado para obter um valor. O método $.fn.html usado como setter $('h1').html('olá mundo'); O método html usado como getter $('h1').html();
  87. 87. JQuery Métodos Movendo append(), appendTo(), before(), after(), Atributos css(), attr(), html(), val(), addClass() Eventos bind(), trigger(), unbind(), live(), click() Travessia find(), is(), prevAll(), next(), hasClass() Efeitos show(), fadeOut(), toggle(), animate() Ajax
  88. 88. Método $()
  89. 89. Método $() Podemos passar uma função para o método $(), que será executada após o HTML ser carregado.
  90. 90. Método $() Podemos passar uma função para o método $(), que será executada após o HTML ser carregado. $(function(){ });
  91. 91. Método $() Podemos passar uma função para o método $(), que será executada após o HTML ser carregado. $(function(){ // código será executado após o carregamento do DOM });
  92. 92. Método $() Podemos passar uma função para o método $(), que será executada após o HTML ser carregado. $(function(){ // código será executado após o carregamento do DOM }); Nota: Esse é um atalho para: $(document).ready(function(){ });
  93. 93. Método $() Usando funções anônimas: $(function() { alert('pronto!'); });
  94. 94. Método $() Usando funções anônimas: $(function() { alert('pronto!'); }); Função nomeada f = function () {alert('pronto!'); } $(f);
  95. 95. Movendo elementos Pegue um elemento com ID foo e adicione algum HTML. $(“#foo”) <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
  96. 96. Movendo elementos Pegue um elemento com ID foo e adicione algum HTML. $(“#foo”).append(“<p>test</p>”); <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
  97. 97. Movendo elementos Pegue um elemento com ID foo e adicione algum HTML. $(“#foo”).append(“<p>test</p>”); <html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body> </html>
  98. 98. Movendo elementos Move parágrafos para o elemento com id “foo” $(“p”) <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
  99. 99. Movendo elementos Move parágrafos para o elemento com id “foo” $(“p”).appendTo(“#foo”); <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
  100. 100. Movendo elementos Move parágrafos para o elemento com id “foo” $(“p”).appendTo(“#foo”); <html> <body> <div>jQuery </div> <div id=”foo”>example <p>moving</p> <p>paragraphs</p></div> </body> </html>
  101. 101. Copiando elementos Copiando parágrafos para o elemento com id “foo” $(“p”) <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
  102. 102. Copiando elementos Copiando parágrafos para o elemento com id “foo” $(“p”).clone() <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
  103. 103. Copiando elementos Copiando parágrafos para o elemento com id “foo” $(“p”).clone().appendTo(“#foo”); <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>
  104. 104. Copiando elementos Copiando parágrafos para o elemento com id “foo” $(“p”).clone().appendTo(“#foo”); <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example <p>moving</p> <p>paragraphs</p></div> </body> </html>
  105. 105. Criando elementos
  106. 106. Criando elementos Copiando parágrafos para o elemento com id “foo” $(“<p>”, {text:"teste"}) <html> <body> <div id=”foo”> </div> </body> </html>
  107. 107. Criando elementos Copiando parágrafos para o elemento com id “foo” $(“<p>”, {text:"teste"}).appendTo(“#foo”); <html> <body> <div id=”foo”> </div> </body> </html>
  108. 108. Criando elementos Copiando parágrafos para o elemento com id “foo” $(“<p>”, {text:"teste"}).appendTo(“#foo”); <html> <body> <div id=”foo”> <p>teste</p> </div> </body> </html>
  109. 109. Atributos
  110. 110. Atributos Get .attr(‘id’)
  111. 111. Atributos Get .attr(‘id’) .html()
  112. 112. Atributos Get .attr(‘id’) .html() .css(“fontSize”)
  113. 113. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .css(“fontSize”) .width()
  114. 114. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .width()
  115. 115. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .css(“fontSize”, “100px”) .width()
  116. 116. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .css(“fontSize”, “100px”) .width() .width(60)
  117. 117. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .css(“fontSize”, “100px”) .width() .width(60) Largura do primeiro elemento
  118. 118. Atributos Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .css(“fontSize”) .css(“fontSize”, “100px”) .width() .width(60) Largura do primeiro elemento Largura de todos elemento
  119. 119. Atributos
  120. 120. Atributos Seta a borda para 1px black $(...).css(“border”, “1px solid black”);
  121. 121. Atributos Seta a borda para 1px black $(...).css(“border”, “1px solid black”); Seta varias propriedades CSS. $(...).css({ “background”: “yellow”, “height”: “400px” });
  122. 122. Atributos Seta a borda para 1px black $(...).css(“border”, “1px solid black”); Seta varias propriedades CSS. $(...).css({ “background”: “yellow”, “height”: “400px” }); Nota: $.fn.css é útil, mas, ele geralmente deve ser evitado como um setter. Pois você não quer informação de apresentação no seu JavaScript. Escreva regras CSS para classes que descrevam os vários estados visuais, e então mude a classe no elemento que você quer afetar.
  123. 123. Atributos Trabalhando com classes $h1.addClass('big'); $h1.removeClass('big');
  124. 124. Atributos Trabalhando com classes $h1.addClass('big'); $h1.removeClass('big'); $h1.toggleClass('big'); Adiciona se ainda não foi adiciona e remove caso contrário.
  125. 125. Atributos Trabalhando com classes $h1.addClass('big'); $h1.removeClass('big'); $h1.toggleClass('big'); if ($h1.hasClass('big')) { ... }
  126. 126. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”);
  127. 127. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”); <div>whatever</div> muda para: <div><p>I’m new</p></div>
  128. 128. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”); <div>whatever</div> muda para: <div><p>I’m new</p></div> Seta o atributo “checked” para checked. $(“:checkbox”).attr(“checked”,”checked”);
  129. 129. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”); <div>whatever</div> muda para: <div><p>I’m new</p></div> Seta o atributo “checked” para checked. $(“:checkbox”).attr(“checked”,”checked”); Seta o value para 3. $(...).val(“3”);
  130. 130. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”); <div>whatever</div> muda para: <div><p>I’m new</p></div> Seta o atributo “checked” para checked. $(“:checkbox”).attr(“checked”,”checked”); Usado para pegar um valor de um elemento de um Seta o value para 3. formulário. Ex. text. $(...).val(“3”);
  131. 131. Atributos Mude HTML com um novo parágrafo. $(...).html(“<p>I’m new</p>”); <div>whatever</div> muda para: <div><p>I’m new</p></div> Seta o atributo “checked” para checked. $(“:checkbox”).attr(“checked”,”checked”); Pega o valor. $(...).val(); Seta o value para 3. $(...).val(“3”);
  132. 132. Eventos
  133. 133. Eventos Quando o botão for clicado, faça algo. $(“button”).click(function(){ facaAlgo(); });
  134. 134. Eventos Quando o botão for clicado, faça algo. $(“button”).click(function(){ facaAlgo(); }); Usando o método bind: $("button").bind('click', function() { facaAlgo(); });
  135. 135. Eventos Hover, funções para o mouse in e mouseout $("span").hover( function () { $(this).css ("color", "red"); }, function () { $(this).css ("color", "black"); })
  136. 136. Funções utilitárias .trim Remove espaços em branco à esquerda e à direita. $.trim(" muitos espaços em branco extras "); // returns "muitos espaços em branco extras" $.each Itera sobre arrays e objetos. $.each([ 'foo', 'bar', 'baz' ], function(idx, val) { console.log('elemento ' + idx + 'é ' + val); }); $.each({ foo : 'bar', baz : 'bim' }, function(k, v) { console.log(k + ' : ' + v); });
  137. 137. Funções utilitárias $.inArray var meuArray = [ 1, 2, 3, 5 ]; if ($.inArray(4, meuArray) !== -1) { console.log('encontrei!'); }
  138. 138. Exercício 1 Baixem o arquivo Diga_incompleto, e insiram os códigos que permitirá o seguinte comportamento.
  139. 139. Exercício 2 Gerar tabela dinamicamente
  140. 140. Exercício e Façam uma calculadora usando o que foi discutido até aqui. Obs: para mostrar ou ocultar um objeto, use show() e hide () Caso o usuário entre com valores inválidos
  141. 141. JQuery Parte 2
  142. 142. JQuery Métodos Movendo append(), appendTo(), before(), after(), Atributos css(), attr(), html(), val(), addClass() Eventos bind(), trigger(), unbind(), live(), click() Travessia find(), is(), prevAll(), next(), hasClass() Efeitos show(), fadeOut(), toggle(), animate() Ajax
  143. 143. JQuery Métodos Movendo append(), appendTo(), before(), after(), Atributos css(), attr(), html(), val(), addClass() Eventos bind(), trigger(), unbind(), live(), click() Travessia find(), is(), prevAll(), next(), hasClass() Efeitos show(), fadeOut(), toggle(), animate() Ajax
  144. 144. Travessia
  145. 145. Travessia Uma vez que você tem uma seleção do jQuery, você pode encontrar outros elementos usando sua seleção como ponto de início.
  146. 146. Travessia Uma vez que você tem uma seleção do jQuery, você pode encontrar outros elementos usando sua seleção como ponto de início. $('h1').prevAll(); $('h1').next('p'); $('div:visible').parent(); $('input[name=first_name]').closest('form'); $('#myList').children(); $('li.selected').siblings(); $('h1').find('p');
  147. 147. Travessia Uma vez que você tem uma seleção do jQuery, você pode encontrar outros elementos usando sua seleção como ponto de início. $('h1').prevAll(); $('h1').next('p'); $('div:visible').parent(); $('input[name=first_name]').closest('form'); $('#myList').children(); $('li.selected').siblings(); $('h1').find('p');
  148. 148. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”) <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  149. 149. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”).prevAll() <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  150. 150. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”).prevAll().andSelf(); <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  151. 151. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”) <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  152. 152. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”).siblings(); <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  153. 153. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”).siblings().andSelf(); <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  154. 154. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”) <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  155. 155. Travessia Pegue as celulas anteriores a #myCell. $(“#myCell”).parent(); <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  156. 156. Travessia Pegue as celulas anteriores a #myCell. $(“table”); <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  157. 157. Travessia Pegue as celulas anteriores a #myCell. $(“table”).find ("td"); <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body>
  158. 158. Efeitos/Animação
  159. 159. Efeitos/Animação Tipos de efeitos
  160. 160. Efeitos/Animação Tipos de efeitos #1. Hide e Show
  161. 161. Efeitos/Animação Tipos de efeitos #1. Hide e Show #2. Fade In e Out
  162. 162. Efeitos/Animação Tipos de efeitos #1. Hide e Show #2. Fade In e Out #3. Slide Up e Down
  163. 163. Efeitos/Animação Hide e show $(...).click(function(){ $(...).hide(); });
  164. 164. Efeitos/Animação Hide e show $(...).click(function(){ $(...).hide(); }); $(...).hide("slow"); ou $(...).hide(5000);
  165. 165. Efeitos/Animação Hide e show $(...).click(function(){ $(...).hide(); }); $(...).hide("slow"); ou $(...).hide(5000); $(...).show() $(...).show("slow") $(...).show(500);
  166. 166. Efeitos/Animação Para cada click, slide up / slide down um elemento $(...).click(function(){ $(...).slideToggle(); });
  167. 167. Efeitos/Animação Para cada click, slide up / slide down um elemento $(...).click(function(){ $(...).slideToggle(); });
  168. 168. Efeitos/Animação Para cada click, slide up / slide down um elemento $(...).click(function(){ $(...).slideToggle(); }); Animar elementos é alterar a apresentação, atributos CSS. Essa animação irá durar 1 segundo. $(...).animate({ "fontSize": "400%" }, 1000);
  169. 169. Efeitos/Animação Para cada click, slide up / slide down um elemento $(...).click(function(){ $(...).slideToggle(); }); Animar elementos é alterar a apresentação, atributos CSS. Essa animação irá durar 1 segundo. $(...).animate({ "fontSize": "400%" }, 1000); Fade to 30% de opacidade $(...).fadeTo(500, 0.3);
  170. 170. Efeitos/Animação $.fn.show Mostra o elemento selecionado. $.fn.hide Esconde o elemente selecionado. $.fn.fadeIn Anima a opacidade dos elementos selecionados para 100%. $.fn.fadeOut Anima a opacidade dos elementos selecionados para 0%.
  171. 171. Efeitos/Animação $.fn.slideDown Mostra os elementos selecionados com um deslizamento vertical. $.fn.slideUp Esconde os elementos selecionados com um deslizamento vertical. $.fn.slideToggle Mostra ou esconde os elementos selecionados com um deslizamento vertical, dependendo se os elementos atualmente estão visíveis.
  172. 172. Efeitos/Animação Experimentem os métodos com o código abaixo ... <button id="b1">Click</button> <p id="p1">ANIMADO</p> ...
  173. 173. Efeitos/Animação Usem os recursos de animação para mostrar e ocultar as mensagens de erro da calculadora.
  174. 174. Extendendo JQuery
  175. 175. Plugins $.fn.OlaMundo = function(){ return this.each(function(){ // faça algo com a seleção }); }
  176. 176. Plugins $.fn.OlaMundo = function(){ return this.each(function(){ $(this).html("Plugin Ola Mundo"); }); } $(“div”) <html> <body> <div></div> <div></div> </body> </html>
  177. 177. Plugins $.fn.OlaMundo = function(){ return this.each(function(){ $(this).html("Plugin Ola Mundo"); }); } $(“div”).OlaMundo(); <html> <body> <div>Plugin Ola Mundo</div> <div>Plugin Ola Mundo</div> </body> </html>
  178. 178. Plugins Existem diversos plugins, com diferentes objetivos. http://plugins.jquery.com/ Vocês podem fazer o seu próprio ou estender os já existentes.
  179. 179. Exercício Façam um programa que realce uma seleção: texto a realçar $("span").realce() texto a realçar
  180. 180. Mais exercicios Baixem o jogo quebra cabeça e mapeiem o seu código para JQuery:
  181. 181. AJAX
  182. 182. Modelo classico
  183. 183. AJAX
  184. 184. O que é Ajax ? Assyncronous
  185. 185. O que é Ajax ? Assyncronous JavaScript
  186. 186. O que é Ajax ? Assyncronous JavaScript And XML
  187. 187. O que é Ajax ? Assyncronous JavaScript And XML
  188. 188. O que é Ajax ? Assyncronous JavaScript And XML + XHTML + JSON + CSS
  189. 189. O que é AJAX ? Não é uma linguagem
  190. 190. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes
  191. 191. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes XHtmllRequest
  192. 192. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes XHtmllRequest + JavaScript
  193. 193. O que é AJAX ? Não é uma linguagem Uso de tecnologias já existentes XHtmllRequest + JavaScript + DOM
  194. 194. Meu primeiro AJAX Criar uma requisição: function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
  195. 195. Meu primeiro AJAX Criar uma requisição: function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } Só existo por causa do IE
  196. 196. Meu primeiro AJAX Função que é chamado após a requisição for concluída. Callback. function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("a1").innerHTML = xmlHttp.responseText; } }
  197. 197. Meu primeiro AJAX Função que "monta" a requisição. function olamundo() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET","ajax_test.htm",true); xmlHttp.send(null); } window.onload = olamundo()
  198. 198. Muito Complicado ?
  199. 199. Ajax no JQuery
  200. 200. Lembram do Hello World do JQuery ? $ ("#a1") </html> </head> <body> <div id="a1"></div> </body> </html>
  201. 201. Lembram do Hello World do JQuery ? $ ("#a1").html ("<p>Ola Mundo</p>") </html> </head> <body> <div id="a1"><p>Ola Mundo</p></div> </body> </html>
  202. 202. Hello World Ajax - JQuery Dado uma pagina ajax_test.htm <p>Ola mundo</p> </html> </head> <body> <div id="a1"></div> </body> </html>
  203. 203. Hello World Ajax - JQuery Dado uma pagina ajax_test.htm <p>Ola mundo</p> $.ajax({ url: "ajax_test.htm", success: function(response){ $("#a1").html(response); }}) </html> </head> <body> <div id="a1"><p>Ola Mundo</p></div> </body> </html>
  204. 204. Hello World Ajax - JQuery - V 2 Dado uma pagina ajax_test.htm <p>Ola mundo</p> $.get("ajax_test.htm", function (response) { $("#a1").html(response); }) </html> </head> <body> <div id="a1"><p>Ola Mundo</p></div> </body> </html>
  205. 205. Enviando dados para o servidor Calculadora no servidor <?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; echo $n1+$n2; ?>
  206. 206. Enviando dados para o servidor Calculadora no servidor <?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; echo $n1+$n2; ?> $(function () { $("#button").click ( function () { $.get("calc.php", {n1: $("#n1").val(), n2: $("#n2").val() }, function (response) { $("#res").html(response); }) }) });
  207. 207. Recebendo dados do servidor: JSON Calculadora no servidor <?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; $res = array ( 'res' => $n1+$n2, ); $output = json_encode($res); echo $output; $("#button").click ( function () { $.getJSON("calc_json.php", {n1: $("#n1").val(), n2: $("#n2").val() }, function (response) { $("#res").html(response.res) }) }) });
  208. 208. Recebendo e enviando: JSON Calculadora no servidor <?php $data = json_decode ($_REQUEST['data'], true); $res = array ( 'res' => $data['n1'] + $data['n2'] ); $output = json_encode($res); echo $output ?> $("#button").click ( function () { $.getJSON("calc_json2.php", {data: JSON.stringify ({n1:$("#n1").val(), n2:$("#n2").val() }) }, function (response) { $("#res").html(response.res) }) })
  209. 209. É só isso ?
  210. 210. É só isso ? YES. Agora é JavaScript e criatividade.
  211. 211. É só isso ? YES. Agora é JavaScript e criatividade. No final da aula de PHP, tem outro exemplo de ajax com o php.

×