Jquery

812 views
722 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

×