1 / 80

jQuery na Prática

jQuery na Prática. vitorfs.com/jquery-na-pratica. Vitor Freitas. vitorfs@gmail.com github.com/vitorfs. Agenda. Introdução ao JavaScript e jQuery Fundamentos de JavaScript Document Object Model (DOM) Preparando o Ambiente Seletores jQuery Manipulando CSS Manipulando Conteúdo Eventos

sadah
Download Presentation

jQuery na Prática

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery na Prática vitorfs.com/jquery-na-pratica

  2. Vitor Freitas vitorfs@gmail.com github.com/vitorfs

  3. Agenda • Introdução ao JavaScript e jQuery • Fundamentos de JavaScript • Document Object Model (DOM) • Preparando o Ambiente • Seletores jQuery • Manipulando CSS • Manipulando Conteúdo • Eventos • Animação • Funções jQuery • Ajax • Formulários

  4. Introdução ao JavaScript e jQuery

  5. Em 1995 nasce o JavaScript VBSCRIPT MOCHA MOCHA LIVESCRIPT LIVESCRIPT JAVASCRIPT

  6. JavaScript hoje

  7. Por que usar jQuery? jQuery é uma camada de abstração Use jQuery porque... ... é fácil ... é produtivo ... browsers são incompatíveis ... seus usuários utilizam browsers antigos

  8. jQuery não é nenhuma panacéia • Você ainda precisa de JavaScript • jQuery é pesado • Construa agora, melhore depois

  9. Fundamentos de JavaScript

  10. Criando variáveis Dê nome aos dados var titulo = “jQuery na Prática”; • Palavra reservada: var • Nomes de variáveis normalmente em snake_case • Linha termina em ponto e vírgula ( ; )

  11. Variáveis e dados • Tipagem fraca, dinâmica e implícita var numero = 100; (int) var titulo = “jQuery na Prática”; (string) var quantidade = 5.7; (float) var erro = true; (boolean)

  12. Funções function soma (num1, num2) { var resultado; resultado = num1 + num2; return resultado; } • Palavra reservada: function • Nomes de funções normalmente em camelCase • Linha termina em ponto e vírgula ( ; )

  13. Funções globais do JavaScript alert(“Olá, mundo!”); void var resposta = confirm(“Confirmar exclusão do registro?”); Retorna boolean var idade = prompt(“Informe sua idade:”); Retorna string

  14. Funções de string var titulo = “jQuery na Prática”; titulo.toLowerCase(); “jquery na prática” titulo.toUpperCase(); “JQUERY NA PRÁTICA” titulo.charAt(2); “u” titulo.replace(“a”, “4”); “jQuery n4 Prátic4” titulo.split(“ ”); [“jQuery”, “na”, “Prática”]

  15. Operações numéricas 10 + 5;  15 10 / 2;  5 parseInt(“10 reais”); 10 var num = 10; num.toString(); “10”

  16. Arrays var frutas =[“maçã”, “uva”, “abacaxi”]; (Inicializa um array na variável frutas) frutas[2]; “abacaxi” (Retorna a posição 2) frutas.length; 3 (Retorna o tamanho da lista) frutas.reverse(); [“abacaxi”, “uva”, “maçã”] (Retorna a lista em ordem inversa)

  17. Document Object Model (DOM)

  18. DOM <html> <head> <title>jQuery na Prática</title> </head> <body> <h1 id=“titulo”>Curso de jQuery</h1> <p class=“autor”>Vitor Freitas</p> <ul> <li>JS</li> <li>DOM</li> <li>jQuery</li> </ul> </body> </html>

  19. DOM html head body title h1#titulo p.autor ul Curso de jQuery Vitor Freitas jQuery na Prática li li li JS DOM jQuery

  20. Preparando o Ambiente

  21. http://jquery.com

  22. Carregando jQuery <script type=“text/javascript” src=“jquery-1.9.0.min.js”></script>

  23. Verificando se o jQuery está carregado <script> console.log(jQuery); //ou alert(jQuery); </script> jQuery;  ReferenceError: jQuery is not defined (jQuery não está carregado) jQuery;  function (e,t){return new v.fn.init(e,t,n)} (Pronto para começar!) $;  function (e,t){return new v.fn.init(e,t,n)} (Também jQuery!)

  24. Seletores jQuery jQuery $(“h1”); (Nome do elemento) DOM html body h1  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

  25. Seletores jQuery jQuery $(“p”); (Nome do elemento) DOM html body h1  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

  26. Seletores jQuery jQuery $(“p.autor”); (Elemento + . + Classe) DOM html body h1  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

  27. Seletores jQuery jQuery $(“.autor”); (Somente a classe) DOM html body h1  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

  28. Seletores jQuery jQuery $(“p#rodape”); (Elemento + # + Id) DOM html body h1  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

  29. Resultado da Seleção jQuery $(“p”); DOM p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica JavaScript [“<p class=‘autor’>Vitor Freitas</p>”, “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”]

  30. Resultado da Seleção jQuery $(“h1, p#rodape”); $(“h1”, “p#rodape”); DOM h1  jQuery na Prática p#rodape  vitorfs.com/jquery-na-pratica JavaScript [“<h1>Vitor Freitas</h1>”, “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”] Errado!

  31. Espaço em branco $(“p#rodape”); Elemento p com id rodape $(“p #rodape”); Elemento com id rodape dentro do elemento p

  32. Selecionando atributos $(“input”); // Todos inputs do DOM $(“input[type=‘text’]”); // Todos inputs do tipo text $(“input[type=‘text’][name=‘email’]”); // Selecione por mais de um atributo $(“p[id=‘rodape’]”); ou $(“p#rodape”); $(“p[class=‘autor’]”); ou $(“p.autor”);

  33. Seletores css também são válidos <i class=“icon-ok”></i> <i class=“icon-cancelar”></i> $(“i[class^=‘icon-’]”); // Todos elementos i que a classe começa com “icon-” $(“i[class$=‘ok’]”); // Todos elementos i que a classe termina com “ok” $(“i[class*=‘icon’]”); // Todos elementos i que a classe possua “icon”

  34. Filtros de seleção Filtros baseados no index do array de retorno da seleção $(“p:first”); // primeiro p da seleção $(“p:last”); // último p da seleção $(“li:eq(2)”); // elemento li com index 2 $(“tr:even”); // todos tr com index par $(“tr:odd”); // todos tr com index ímpar

  35. Filtros de hierarquia Filtros baseados no hierarquia do DOM $(“body div”); // todas as divs dentro do body $(“body > div”); // todas as divs que estão diretamente abaixo do body $(“label + input”); // label com input adjacente (deve possuir o mesmo elemento pai)

  36. Manipulando CSS

  37. Manipulando CSS <p>Lorem ipsum dolor sit amet</p> $(”p”).css(”font-size”); // retorna o valor do font-size do elemento p $(”p”).css(”font-size”, ”12px”); // define o font-size do elemento p para 12px

  38. Definindo múltiplos atributos Utilizando métodos encadeados $(“p”).css(“font-size”, “24px”) .css(“font-weight”, “bold”) .css(“line-height”, “32px”); Ou um map $(“p”).css({“font-size”: “24px”, “font-weight”: “bold”, “line-height”: “32px”});

  39. Mas... vamos com calma HTML Conteúdo CSS Apresentação JavaScript Interação

  40. Interface CSS • DOM e CSS comunicam via IDs e Classes • Use .css() com cautela • Manipule IDs e Classes • Mais seguro e manutenível

  41. Manipulando classes $(“p”).hasClass(“autor”); // retorna true ou false $(“p”).addClass(“bigger”); $(“p”).removeClass(“bigger”); // remove a classe passada via parâmetro $(“p”).removeClass(); // remove todas as classes $(“p”).toggleClass(“bigger”); // se o elemento tiver a classe bigger, o jQuery remove. Se não tiver, adiciona

  42. Visibilidade $(“p.autor”).hide(); [<p class=“autor” style=“display: none”>Vitor Freitas</p>] $(“p.autor”).show(); [<p class=“autor” style=“display: normal”>Vitor Freitas</p>] $(“p.autor”).toggle(); Alterna entre hide e show

  43. Manipulando Conteúdo

  44. Template <html> <head> <title>jQuery na Prática</title> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <spanclass=“js”>JavaScript</span></li> <li>DOM</li> <li>jQuery</li> </ul> <p>Data: <span class=“data”>21/01 à 25/01</span></p> <p>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html>

  45. Acessando text e html • html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML $(“p:first”).html(); [“Data: <span class=‘data’>21/01 à 25/01</span>”] • text  Recupera todo texto dentro do elemento selecionado, ignorando as tags HTML $(“p:first”).text(); [“Data: 21/01 à 25/01”]

  46. Definindo text $(“span.data”).text(“28/01 à 01/02”); <span class=“data”>21/01 à 25/01</span> <span class=“data”>28/01 à 01/02</span> • Cronograma • Fundamentos JavaScript • DOM • jQuery • Data: 21/01 à 25/01 • Horário: 19:00 às 22:40 • Cronograma • Fundamentos JavaScript • DOM • jQuery • Data: 28/01 à 01/02 • Horário: 19:00 às 22:40

  47. Definindo text $(“span.data”).text(“<u>28/01 à 01/02</u>”); <span class=“data”>21/01 à 25/01</span> <span class=“data”>&lt;u&gt;28/01 à 01/02&lt;/u&gt;</span> • Cronograma • Fundamentos JavaScript • DOM • jQuery • Data: 21/01 à 25/01 • Horário: 19:00 às 22:40 • Cronograma • Fundamentos JavaScript • DOM • jQuery • Data: <u>28/01 à 01/02</u> • Horário: 19:00 às 22:40

  48. Definindo html $(“span.data”).html(“<u>28/01 à 01/02</u>”); <span class=“data”>21/01 à 25/01</span> <span class=“data”><u>28/01 à 01/02</u></span> • Cronograma • Fundamentos JavaScript • DOM • jQuery • Data: 21/01 à 25/01 • Horário: 19:00 às 22:40 • Cronograma • Fundamentos JavaScript • DOM • jQuery • Data: 28/01 à 01/02 • Horário: 19:00 às 22:40

  49. Inserindo html no DOM $(“ul”).append(“<li>Seletores jQuery</li>”); Insere elemento dentro do final da seleção $(“ul”).prepend(“<li>Seletores jQuery</li>”); Insere elemento dentro do inicio da seleção $(“ul”).before(“<h3>Conteúdo</h3>”); Insere elemento antes da seleção $(“ul”).after(“<h3>Data e Hora:</h3>”); Insere elemento após a seleção

  50. Append $(“ul”).append(“<li>Seletores jQuery</li>”); • Cronograma • Fundamentos JavaScript • DOM • jQuery • Seletores jQuery • Data: 21/01 à 25/01 • Horário: 19:00 às 22:40

More Related