Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jquery

899 views

Published on

Jquery

  1. 1. Eduardo Mendes (edumendes@gmail.com) jQuery 1
  2. 2. Eduardo Mendes (edumendes@gmail.com)2 Biblioteca JavaScript rápida, pequena e rica em recursos Percorre e manipula documentos HTML, trata eventos, animações Facilita a utilização de AJAX
  3. 3. Eduardo Mendes (edumendes@gmail.com)33 32kB CSS 3 Cross-Browser
  4. 4. Eduardo Mendes (edumendes@gmail.com) O que você pode fazer com jQuery 4 revelar elementos da interface
  5. 5. Eduardo Mendes (edumendes@gmail.com) O que você pode fazer com jQuery 5 alterar conteúdo baseado na interação do usuário
  6. 6. Eduardo Mendes (edumendes@gmail.com) O5 maneiras de utilizar jQuery 6
  7. 7. Eduardo Mendes (edumendes@gmail.com) 05 maneiras de utilizar jQuery 7 encontrar elementos no documento HTML alterar conteúdo HTML ouvir o que o usuário faz e reagir em conformidade animar o conteúdo da página comunicar-se pela rede para recuperar novos conteúdos
  8. 8. Eduardo Mendes (edumendes@gmail.com)8 Alterando o conteúdo um documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> Como alterar o texto da tag <h1>? encontre-o altere-o
  9. 9. Eduardo Mendes (edumendes@gmail.com)9 Alterando o conteúdo um documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> encontre-o Como procurar um elemento/tag HTML com jQuery? Para isso precisamos entender como um navegador organiza o seu conteúdo
  10. 10. Eduardo Mendes (edumendes@gmail.com) Document Object Model Os navegadores armazenam os elementos de uma página HTML em uma estrutura de árvores, que permite encontrar e manipular estes elementos através de JavaScript 10 DOM
  11. 11. Eduardo Mendes (edumendes@gmail.com)11 HTML -> DOM um documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> DOM navegador 0% 100%
  12. 12. Eduardo Mendes (edumendes@gmail.com)12 HTML -> DOM um documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh…
  13. 13. Eduardo Mendes (edumendes@gmail.com)13 Como realizar uma busca na árvore DOM? A árvore do DOM DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh… JavaScript JavaScript fornece uma linguagem capaz de interagir com DOM
  14. 14. Eduardo Mendes (edumendes@gmail.com)14 Como realizar uma busca na árvore DOM? navegador servidor web JavaScript DOM JavaScript Cada navegador tem um DOM diferente
  15. 15. Eduardo Mendes (edumendes@gmail.com)15 Entretanto JavaScript DOM DOM DOM DOM Cada navegador tem um DOM diferente
  16. 16. Eduardo Mendes (edumendes@gmail.com)16 Entretanto JavaScript DOM DOM DOM DOM Um arquivo JS que utiliza jQuery para se comunicar com o DOM, será capaz de executar na maioria dos navegadores modernos
  17. 17. Eduardo Mendes (edumendes@gmail.com) jQuery Básico 17
  18. 18. Eduardo Mendes (edumendes@gmail.com)18 jQuery básico JavaScri jQuery(<code>); função principal jQuery
  19. 19. Eduardo Mendes (edumendes@gmail.com)19 jQuery básico JavaScri jQuery(document); O DOM Como utilizar para encontrar algum elemento no DOM?
  20. 20. Eduardo Mendes (edumendes@gmail.com)20 para usar a função é preciso utilizar seletores CSS Documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> Seletores CSS h1 {font-size: 3em;} p { color: red; }
  21. 21. Eduardo Mendes (edumendes@gmail.com)21 Utilizando funções jQuery para achar o nó Documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> Seletores jQuery jQuery(“h1”); jQuery(“p”); $(“h1”) $(“p”) == short
  22. 22. Eduardo Mendes (edumendes@gmail.com)22 Alterando o conteúdo um documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> Como alterar o texto da tag <h1>? encontre-o altere-o
  23. 23. Eduardo Mendes (edumendes@gmail.com)23 Selecione o elemento pelo seu nome HTML um documento HTML <!DOCTYPE html> <html> <head> <title>jQuery Festas</title> </head> <body> <h1>O que eu quero fazer?</h1> <p>Planejar minha próxima festa</p> </body> </html> DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh…
  24. 24. Eduardo Mendes (edumendes@gmail.com)24 Selecione o elemento pelo seu nome HTML DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh… $(“h1”);
  25. 25. Eduardo Mendes (edumendes@gmail.com)25 Selecione o elemento pelo seu nome HTML DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh… $(“h1”);
  26. 26. Eduardo Mendes (edumendes@gmail.com)26 Recuperando o texto do elemento DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh… $(“h1”).text(); método jQuery "O que eu quero fazer?"
  27. 27. Eduardo Mendes (edumendes@gmail.com)27 Modificando o texto do elemento DOCUMENT html head titles jQuery Festas body h1 O que eu quer… p Planejar minh… $(“h1”).text(“Hello jQuery"); método jQuery “Hello jQuery"
  28. 28. Eduardo Mendes (edumendes@gmail.com)28 Modificando o texto do elemento DOCUMENT html head title jQuery Festas body h1 Hello jQuery p Planejar minh… $(“h1”).text(“Hello jQuery"); método jQuery “Hello jQuery"
  29. 29. Eduardo Mendes (edumendes@gmail.com) DOM em 1.º Lugar O JavaScript pode executar
 antes do carregamento total do DOM 29 DOM $(“h1”).text(“Hello jQuery"); 0% 100% 50% É preciso certificar-se que o DOM está 100% carregado para executar jQuery com confiança
  30. 30. Eduardo Mendes (edumendes@gmail.com) DOM em 1.º Lugar É possível verificar o final do carregamento 30 DOM0% 100% 50% "I'm ready" Como ouvir este evento? Após ouvir o evento execute o <codigo>
  31. 31. Eduardo Mendes (edumendes@gmail.com)31 Ouvindo o evento ready jQuery(document).ready(function(){ <code> }); DOM "I'm ready" O código só executará depois que o DOM estiver "pronto"
  32. 32. Eduardo Mendes (edumendes@gmail.com)32 O código por inteiro jQuery(document).ready(function(){ $(“h1”).text(“Hello jQuery”); });
  33. 33. Eduardo Mendes (edumendes@gmail.com) Utilizando jQuery 33
  34. 34. Eduardo Mendes (edumendes@gmail.com)34 Utilizando jQuery dowload jQuery carregue-o em seu documento HTML <script src=“jquery.min.js”></script> daí é só utilizar <script src=“application.js”></script> 1 2 3
  35. 35. Eduardo Mendes (edumendes@gmail.com)35 Alterando múltiplos elementos Como alterar o texto de cada elemento de lista (<li>) deste trecho de código? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <p>Planeje sua próxima festa</p> <ul id="temas"> <li>Grécia antiga</li> <li>Oscar</li> <li class='promo'>White Party</li> </ul> $(“li”); ache-os altere-os
  36. 36. Eduardo Mendes (edumendes@gmail.com)36 Alterando múltiplos elementos Como alterar o texto de cada elemento de lista (<li>) deste trecho de código? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <p>Planeje sua próxima festa</p> <ul id="temas"> <li>Grécia antiga</li> <li>Oscar</li> <li class='promo'>White Party</li> </ul> $(“li”).text(“À fantasia”); ache-os altere-os
  37. 37. Eduardo Mendes (edumendes@gmail.com)37 Alterando múltiplos elementos Como alterar o texto de cada elemento de lista (<li>) deste trecho de código? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <p>Planeje sua próxima festa</p> <ul id="temas"> <li>À fantasia</li> <li>À fantasia</li> <li class='promo'>À fantasia</li> </ul> $(“li”).text(“À fantasia”); ache-os altere-os
  38. 38. Eduardo Mendes (edumendes@gmail.com)38 Outras formas de selecionar elementos h1 {...} CSS jQuery $(“h1”); #conteudo { . . . } $(“#conteudo”); .temas {...} $(“.temas”);
  39. 39. Eduardo Mendes (edumendes@gmail.com) Manipulando eventos 39
  40. 40. Eduardo Mendes (edumendes@gmail.com)40 Função como parâmetro $(document).ready(<funcao de manipulacao de evento>); O método ready recebe por parâmetro uma função como parâmetro function(){ <code> } Definição de função $(document).ready(function(){ <code> });
  41. 41. Eduardo Mendes (edumendes@gmail.com)41 Drinks especiais
  42. 42. Eduardo Mendes (edumendes@gmail.com)42 Esperando um click $(document).ready(function(){ <code> }); <h3>Lemon Breeze</h3> <p class="lemon"> Um drinks mais que saudavel, ... <button>Consultar Preco</button> </p> $('button').on('click', function() { ! ! });
  43. 43. Eduardo Mendes (edumendes@gmail.com)43 Esperando um click $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); });
  44. 44. Eduardo Mendes (edumendes@gmail.com)44 Esperando um click $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $('<span>$399.99</span>'); $('.lemon').append(preco);
  45. 45. Eduardo Mendes (edumendes@gmail.com)45 Esperando um click $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $('<p>$399.99</p>'); $('.lemon').append(preco); $('button').remove();
  46. 46. Eduardo Mendes (edumendes@gmail.com)46 Seletores descendentes Como encontrar os elementos <li> questão em uma <ul> de ID “temas"? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <p>Planeje sua próxima festa</p> <ul id="temas"> <li>Grécia antiga</li> <li>Oscar</li> <li class='promo'>White Party</li> </ul> seletor descendente
  47. 47. Eduardo Mendes (edumendes@gmail.com)47 Seletores descendentes Como encontrar os elementos <li> questão em uma <ul> de ID “temas"? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Grécia antiga</li> <li>Oscar</li> <li class='promo'>White Party</li> </ul> $(“temas li”); body h1 Qual o tema… ul li Grécia Antiga h2 Temas de fes… li Oscar li White Party
  48. 48. Eduardo Mendes (edumendes@gmail.com)48 Seletores descendentes Como encontrar somente os filhos diretos? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Europa</li> <li> <ul> <li>Grécia</li> </ul> </li> <li class='promo'>White Party</li> </ul> $(“temas li”); body h1 Qual o tema… ul li Europa h2 Temas de fes… li Grécia li White Party ul li
  49. 49. Eduardo Mendes (edumendes@gmail.com)49 Seletores descendentes Como encontrar somente os filhos diretos? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Europa</li> <li> <ul> <li>Grécia</li> </ul> </li> <li class='promo'>White Party</li> </ul> body h1 Qual o tema… ul li Europa h2 Temas de fes… li Grécia li White Party ul li seletor de filho
  50. 50. Eduardo Mendes (edumendes@gmail.com)50 Seletores descendentes Como encontrar somente os filhos diretos? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Europa</li> <li> <ul> <li>Grécia</li> </ul> </li> <li class='promo'>White Party</li> </ul> $(“temas > li”); body h1 Qual o tema… ul li Europa h2 Temas de fes… li Grécia li White Party ul li
  51. 51. Eduardo Mendes (edumendes@gmail.com)51 Selecionando múltiplos elementos <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Europa</li> <li> <ul id="grecia"> <li>Grécia</li> </ul> </li> <li class='promo'>White Party</li> </ul> $(“.promo, #grecia”); body h1 Qual o tema… ul ul Europa h2 Temas de fes… Grécia li White Party li li li
  52. 52. Eduardo Mendes (edumendes@gmail.com)52 Seletores com pseudo classes $("#temas li:first").text("alterado"); $("#temas li:last").text("alterado"); $("#temas li:odd").text("alterado"); $("#temas li:even").text("alterado");
  53. 53. Eduardo Mendes (edumendes@gmail.com) Transversing 53
  54. 54. Eduardo Mendes (edumendes@gmail.com)54 Filtros com transversing $(“temas li”); $(“temas”).find(“li”); O código é maior, mas é mais eficiente $(“li:first”); $(“li”).first(); $(“li:last”); $(“li”).last();
  55. 55. Eduardo Mendes (edumendes@gmail.com)55 Caminhando no DOM E como encontrar o elemento do meio? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Grécia antiga</li> <li>Oscar</li> <li class='promo'>White Party</li> </ul>
  56. 56. Eduardo Mendes (edumendes@gmail.com)56 Caminhando no DOM E como encontrar o elemento do meio? $(“li”).first(); body h1 Qual o tema… ul li Grécia Antiga h2 Temas de fes… li Oscar li White Party
  57. 57. Eduardo Mendes (edumendes@gmail.com)57 Caminhando no DOM E como encontrar o elemento do meio? $(“li”).first().next(); body h1 Qual o tema… ul li Grécia Antiga h2 Temas de fes… li Oscar li White Party
  58. 58. Eduardo Mendes (edumendes@gmail.com)58 Caminhando no DOM E como encontrar o elemento do meio? $(“li”).first().prev(); body h1 Qual o tema… ul li Grécia Antiga h2 Temas de fes… li Oscar li White Party
  59. 59. Eduardo Mendes (edumendes@gmail.com)59 Caminhando no DOM Também é possível encontrar o elemento pai $(“li”).first().parent(); body h1 Qual o tema… ul li Grécia Antiga h2 Temas de fes… li Oscar li White Party
  60. 60. Eduardo Mendes (edumendes@gmail.com)60 Seletores descendentes Como encontrar os filhos direto com transversing? <h1>Qual o tema da festa?</h1> <h2>Temas de festas</h2> <ul id="temas"> <li>Europa</li> <li> <ul> <li>Grécia</li> </ul> </li> <li class='promo'>White Party</li> </ul> body h1 Qual o tema… ul li Europa h2 Temas de fes… li Grécia li White Party ul li $(“temas”).children(“li”);
  61. 61. Eduardo Mendes (edumendes@gmail.com)61 Caminhando no DOM Como encontrar os filhos diretos utilizando transversing? $(“temas”).children(“li”); enquanto o método find() seleciona todos os <li> o método children() seleciona apenas os <li> que são filhos diretos
  62. 62. Eduardo Mendes (edumendes@gmail.com) Trabalhando com DOM 62
  63. 63. Eduardo Mendes (edumendes@gmail.com)63 Anexando e Removendo no DOM
  64. 64. Eduardo Mendes (edumendes@gmail.com)64 Anexando um elemento ao DOM anexar um novo nó no DOM remover um nó do DOM 1 2
  65. 65. Eduardo Mendes (edumendes@gmail.com)65 Anexando um elemento ao DOM $(document).ready(function(){ <code> }); var preco = ”$399.99”; var preco = ”<span>$399.99</span>”; var preco = ”$(<span>$399.99</span>)"; span $399.99 Não é HTML Funciona, mas é apenas uma String Cria um nó manipulável
  66. 66. Eduardo Mendes (edumendes@gmail.com)66 Anexando um documento no DOM $(document).ready(function(){ var preco = $('<span>$399.99</span>'); ! }); .append(<elemento>); .prepend(<elemento>); .after(<elemento>); .before(<elemento>);
  67. 67. Eduardo Mendes (edumendes@gmail.com)67 HTML Original
  68. 68. Eduardo Mendes (edumendes@gmail.com)68 Before $(document).ready(function(){ var preco = $('<span>$399.99</span>'); $('.lemon').before(preco); });
  69. 69. Eduardo Mendes (edumendes@gmail.com)69 After $(document).ready(function(){ var preco = $('<span>$399.99</span>'); $('.lemon').after(preco); });
  70. 70. Eduardo Mendes (edumendes@gmail.com)70 Prepend $(document).ready(function(){ var preco = $('<span>$399.99</span>'); $('.lemon').prepend(preco); }); preco no topo de .lemon
  71. 71. Eduardo Mendes (edumendes@gmail.com)71 Append $(document).ready(function(){ var preco = $('<span>$399.99</span>'); $('.lemon').append(preco); }); preco na base de .lemon
  72. 72. Eduardo Mendes (edumendes@gmail.com)72 Anexando e removendo $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $('<p>$399.99</p>'); $('.lemon').append(preco); $('button').remove();
  73. 73. Eduardo Mendes (edumendes@gmail.com)73 Anexando a partir do nó que se anexa .appendTo(<elemento>); .prependTo(<elemento>); .afterTo(<elemento>); .beforeTo(<elemento>); $(document).ready(function(){ var preco = $('<span>$399.99</span>'); $('.lemon').append(preco); }); preco.appendTo(”$(“.lemon”));
  74. 74. Eduardo Mendes (edumendes@gmail.com) Trabalhando com múltiplos elementos 74
  75. 75. Eduardo Mendes (edumendes@gmail.com)75 Trabalhando com múltiplos elementos
  76. 76. Eduardo Mendes (edumendes@gmail.com)76 Alterando a estrutura do código
  77. 77. Eduardo Mendes (edumendes@gmail.com)77 Alterando a estrutura do código $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $('.bebida').append(preco); $('button').remove();
  78. 78. Eduardo Mendes (edumendes@gmail.com)78 Alterando a estrutura do código
  79. 79. Eduardo Mendes (edumendes@gmail.com)79 Uma introdução ao this $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $('.bebida').append(preco); $('button').remove(); Quando o botão é clicado, ele será o 'this'
  80. 80. Eduardo Mendes (edumendes@gmail.com)80 Apresentando o $(this)
  81. 81. Eduardo Mendes (edumendes@gmail.com)81 Corrigindo $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $('.bebida').append(preco); $('button').remove(); this.remove(); $(this).remove(); Não é um objeto jQuery OK! E removerá somente o botão clivado
  82. 82. Eduardo Mendes (edumendes@gmail.com)82 Corrigindo $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $('.bebida').append(preco); $(this).remove();
  83. 83. Eduardo Mendes (edumendes@gmail.com)83 Alterando a estrutura do código
  84. 84. Eduardo Mendes (edumendes@gmail.com)84 Alterando a estrutura do código
  85. 85. Eduardo Mendes (edumendes@gmail.com)85 Corrigindo $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $('.bebida').append(preco); $(this).remove();
  86. 86. Eduardo Mendes (edumendes@gmail.com)86 Corrigindo $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $(this).after(preco); $(this).remove();
  87. 87. Eduardo Mendes (edumendes@gmail.com)87 Comportamento correto
  88. 88. Eduardo Mendes (edumendes@gmail.com)88 E se o DOM for alterado $(document).ready(function(){ $('button').on('click', function() { ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $(this).after(preco); $(this).remove(); O preço ficaria dentro da <div> ao invés do <li>
  89. 89. Eduardo Mendes (edumendes@gmail.com) 89 Use .closest(<seletor>) $(this).after(preco) $(this).parent().parent().append(preco); $(this).parents(“.bebida”).append(preco); $(this).closest(“.bebida”).append(preco); Retorna todos os ancestrais com este seletor Retorna apenas um nó
  90. 90. Eduardo Mendes (edumendes@gmail.com) Adicionando dados 90
  91. 91. Eduardo Mendes (edumendes@gmail.com)91 Todas as bebidas têm o mesmo valor
  92. 92. Eduardo Mendes (edumendes@gmail.com)92 Adicionando um atributo data <li class="bebida" <p> <img src="imagens/yellow.gif" /> </p> <h3>Lemon Breeze</h3> <p>Um drinks mais. . . <br/></p> <button>Consultar Preco</button> </li> data-preco="15,00"> Este é um elemento faz parte da HMTL5 que deve ser utilizado para fornecer informações adicionais sobre os objetos das páginas .data(<nome>) .data(<nome>, <valor>) $(‘.bebida’).first().data(‘preco'); “15,00”
  93. 93. Eduardo Mendes (edumendes@gmail.com)93 Refatorando o preco $(document).ready(function(){ $('button').on('click', function() { ! ! ! }); }); var preco = $(‘<p>R$ 15,00</p>’); $('.bebida').append(preco); $('button').remove(); var valor = $(this).closest(‘.bebida’).data(‘preco’); var preco = $(‘<p>R$ ’ + valor + ‘</p>' ); Recupera o valor do atributo data-preco Concatenação das 02 Strings
  94. 94. Eduardo Mendes (edumendes@gmail.com)94 Refatorando o preco Cada$(document).ready(function(){ $('button').on('click', function() { var valor = $(this).closest(".bebida").data('preco'); var preco = $("<p>R$" + valor + "</p>"); $(this).closest(".bebida").append(preco); $(this).remove(); }); }); Cada bebida terá seu próprio preço
  95. 95. Eduardo Mendes (edumendes@gmail.com)95 Cada bebida com seu próprio preço
  96. 96. Eduardo Mendes (edumendes@gmail.com)96 Refatorando o preco Cada $(document).ready(function(){ $('button').on('click', function() { var valor = $(this).closest(".bebida").data('preco'); var preco = $("<p>R$" + valor + "</p>"); $(this).closest(".bebida").append(preco); $(this).remove(); }); }); var valor = bebida.data(‘preco’); bebida.append(preco); var bebida = $(this).closest(“.bebida”);
  97. 97. Eduardo Mendes (edumendes@gmail.com) Refatorando o preco Cada $(document).ready(function(){ $('button').on('click', function() { var bebida = $(this).closest(".bebida"); var valor = bebida.data('preco'); var preco = $("<p>R$" + valor + "</p>"); bebida.append(preco); $(this).remove(); }); });
  98. 98. Eduardo Mendes (edumendes@gmail.com) Adicionando mais elementos 98
  99. 99. Eduardo Mendes (edumendes@gmail.com)99 E se tivéssemos mais um grupo de botões?
  100. 100. Eduardo Mendes (edumendes@gmail.com)100 É necessário transversing + seletores $(document).ready(function(){ $('button').on('click', function() { . . . }); }); $(‘#bebidas button').on('click', function() {}); $(‘#bebidas').on('click', ‘button’, function() {}); atinge somente os botoes que estiverem um dentro de um “#bebidas"
  101. 101. Eduardo Mendes (edumendes@gmail.com) Filtrando 101
  102. 102. Eduardo Mendes (edumendes@gmail.com)102 Filtrando o HTML <div id="filtros"> <button class="filtro-promo">Promocao do Dia</button> <button class="filtro-sem-alcool">Sem Alcool</button> </div> Vamos adicionar dois tratadores de eventos Vamos destacar as seções correspondentes quando clivados
  103. 103. Eduardo Mendes (edumendes@gmail.com)103 Filtrando bebidas em promoção $("#filtros").on("click", ".filtro-promo", function() { //encontrar todos os elementos <li> que estão //promocao e adicionar uma classe a eles }); <li class="bebida promo" data-preco="15,00"> <p> <img src="imagens/yellow.gif" /> </p> … </li> $(“.bebida”).filter(".promo") //
  104. 104. Eduardo Mendes (edumendes@gmail.com)104 Manipulação de classes .addClass(<class>) .removeClass(<class)
  105. 105. Eduardo Mendes (edumendes@gmail.com)105 Filtrando bebidas em promoção $("#filtros").on("click", ".filtro-promo", function() { $(".bebida").filter(".promo").addClass("destacada"); }); apenas bebidas em promoção adiciona a classe destacada A mesma coisa para a outra classe $("#filtros").on('click', '.filtro-sem-alcool', function() { $(".bebida").filter(".sem-alcool").addClass("destacada"); });
  106. 106. Eduardo Mendes (edumendes@gmail.com)106 Bebidas destacadas
  107. 107. Eduardo Mendes (edumendes@gmail.com) Qual a solução? 107
  108. 108. Eduardo Mendes (edumendes@gmail.com)108 Remover a classe que destaca $("#filtros").on("click", ".filtro-promo", function() { $(".destacada").removeClass("destacada"); $(".bebida").filter(".promo").addClass("destacada"); }); ! $("#filtros").on('click', '.filtro-sem-alcool', function() { $(".destacada").removeClass("destacada"); $(".bebida").filter(".sem-alcool").addClass("destacada"); });
  109. 109. Eduardo Mendes (edumendes@gmail.com)109 Bebidas destacadas
  110. 110. Eduardo Mendes (edumendes@gmail.com) Revelando elementos 110
  111. 111. Eduardo Mendes (edumendes@gmail.com)111 Página de receitas
  112. 112. Eduardo Mendes (edumendes@gmail.com)112 Apresentando a receita <ul id="bebidas"> <li class="bebida promo" data-preco="15,00"> <h3>Lemon Breeze</h3> <button>Receita completa</button> <ul class="receita"> <li>Passo 1</li> <li>Passo 2</li> <li>Passo 3</li> </ul> </li> .receita { display: none; }
  113. 113. Eduardo Mendes (edumendes@gmail.com)113 Apresentando a receita <ul id="bebidas"> <li class="bebida promo" data-preco="15,00"> <h3>Lemon Breeze</h3> <button>Receita completa</button> <ul class="receita"> <li>Passo 1</li> <li>Passo 2</li> <li>Passo 3</li> </ul> </li> .slideDown() .slideUp() .slideToggle()
  114. 114. Eduardo Mendes (edumendes@gmail.com)114 Apresentando a receita <ul id="bebidas"> <li class="bebida promo" data-preco="15,00"> <h3>Lemon Breeze</h3> <button>Receita completa</button> <ul class="receita"> <li>Passo 1</li> <li>Passo 2</li> <li>Passo 3</li> </ul> </li> Quando clicar no <button> aparecer a <ul> receita $(".bebida").on("click", "button", function() { $(this).closest(".bebida").find(".receita").slideDown (); });
  115. 115. Eduardo Mendes (edumendes@gmail.com)115 Outro evento Aparecer quando passarmos o mouse por cima do nome da bebida
  116. 116. Eduardo Mendes (edumendes@gmail.com) 116 Escolhendo o evento $(".bebida").on("click", "button", function() { $(this).closest(".bebida").find(".receita").slideDown (); }); ! $(“.bebida").on("?", "h3", function() { $(this).closest(".bebida").find(".receita").slideDown (); }); click dbclick focusin focusout mousedown mouseup mousemove mouseout mouseenter mouseleave diferenças em: http://www.quirksmode.org/js/events_mouse.html
  117. 117. Eduardo Mendes (edumendes@gmail.com) Escolhendo o evento $(".bebida").on("click", "button", function() { $(this).closest(".bebida").find(".receita").slideDown (); }); ! $(“.bebida").on("mouseenter", "h3", function() { $(this).closest(".bebida").find(".receita").slideDown (); });
  118. 118. Eduardo Mendes (edumendes@gmail.com)118 Ok! Aparecer quando passarmos o mouse por cima do nome da bebida
  119. 119. Eduardo Mendes (edumendes@gmail.com) Mais uma refatoração $(".bebida").on("click", "button", function() { $(this).closest(".bebida").find(".receita").slideDown (); }); ! $(“.bebida").on("mouseenter", "h3", function() { $(this).closest(".bebida").find(".receita").slideDown (); }); function exibirReceita(){ $(this).closest(".bebida").find(".receita").slideDown(); });
  120. 120. Eduardo Mendes (edumendes@gmail.com) Eventos do teclado 120
  121. 121. Eduardo Mendes (edumendes@gmail.com)121 Atualizando dados
  122. 122. Eduardo Mendes (edumendes@gmail.com)122 Eventos de teclado <div class="bebida" data-preco="15"> <h3>Lemon Breeze</h3> <p>R$ 15,00 por cada</p> <input type="text" class="quantidade" value="1" /> </p> <p>Preço total: R$ <span id="total">R$ 15</span>,00</p> </div> quando for alterado alterar também o total
  123. 123. Eduardo Mendes (edumendes@gmail.com)123 Eventos de teclado $(“.bebida”).on("???", ".quantidade", function() { ! ! }); keypress keydown keyup http://api.jquery.com/category/events/keyboard-events/
  124. 124. Eduardo Mendes (edumendes@gmail.com)124 Eventos de teclado $(“.bebida”).on("keyup", ".quantidade", function() { ! ! ! }); // Recuperar o preço da bebida // Recuperar a quantidade de bebida // Modificar o total para preço * quantidade var preco = $(this).closest(".bebida").data("preco"); "15" var preco = +$(this).closest(".bebida").data("preco"); 15
  125. 125. Eduardo Mendes (edumendes@gmail.com)125 Eventos de teclado $(“.bebida”).on("keyup", ".quantidade", function() { ! ! ! }); var preco = +$(this).closest(".bebida").data("preco"); // Recuperar a quantidade de bebida // Modificar o total para preço * quantidade var quantidade = $this).val(); "2" var quantidade = +$(this).val(); 2
  126. 126. Eduardo Mendes (edumendes@gmail.com)126 Eventos de teclado $(“.bebida”).on("keyup", ".quantidade", function() { ! ! ! }); var preco = +$(this).closest(".bebida").data("preco"); var quantidade = +$(this).val(); // Modificar o total para preço * quantidade $("#total").text(preco * quantidade);
  127. 127. Eduardo Mendes (edumendes@gmail.com)127 Eventos de teclado $(“.bebida”).on("keyup", ".quantidade", function() { ! ! ! }); var preco = +$(this).closest(".bebida").data("preco"); var quantidade = +$(this).val(); $("#total").text(preco * quantidade); Assim o valor atualizará imeditamente

×