A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

JQuery na Prática vitorfs.com/jquery-na-pratica. Vitor Freitas github.com/vitorfs.

Apresentações semelhantes


Apresentação em tema: "JQuery na Prática vitorfs.com/jquery-na-pratica. Vitor Freitas github.com/vitorfs."— Transcrição da apresentação:

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

2 Vitor Freitas 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 LIVESCRIPT JAVASCRIPT MOCHA LIVESCRIPT

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 ;  / 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 jQuery na Prática Curso de jQuery Vitor Freitas JS DOM jQuery

19 DOM html headbody titleh1#titulop.autorul li jQuery na Prática Curso de jQuery Vitor Freitas JS DOMjQuery

20 Preparando o Ambiente

21

22 Carregando jQuery

23 Verificando se o jQuery está carregado console.log(jQuery); //ou alert(jQuery); 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 [“ Vitor Freitas ”, “ vitorfs.com/jquery-na- pratica ”]

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 [“ Vitor Freitas ”, “ vitorfs.com/jquery-na- pratica ”] 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=‘ ’]”); // 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-’]”); // 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 Lorem ipsum dolor sit amet $(”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(); [ Vitor Freitas ] $(“p.autor”).show(); [ Vitor Freitas ] $(“p.autor”).toggle(); Alterna entre hide e show

43 Manipulando Conteúdo

44 Template jQuery na Prática Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

45 Acessando text e html html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML $(“p:first”).html(); [“Data: 21/01 à 25/01 ”] 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”); 21/01 à 25/01 28/01 à 01/02 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(“ 28/01 à 01/02 ”); 21/01 à 25/01 <u>28/01 à 01/02</u> 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

48 Definindo html $(“span.data”).html(“ 28/01 à 01/02 ”); 21/01 à 25/01 28/01 à 01/02 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(“ Seletores jQuery ”); Insere elemento dentro do final da seleção $(“ul”).prepend(“ Seletores jQuery ”); Insere elemento dentro do inicio da seleção $(“ul”).before(“ Conteúdo ”); Insere elemento antes da seleção $(“ul”).after(“ Data e Hora: ”); Insere elemento após a seleção

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

51 Prepend $(“ul”).prepend(“ Seletores jQuery ”); Cronograma Seletores jQuery Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

52 Before $(“ul”).before(“ Conteúdo ”); Cronograma Conteúdo Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

53 After $(“ul”).after(“ Data e Hora: ”); Cronograma Fundamentos JavaScript DOM jQuery Data e Hora: Data: 21/01 à 25/01 Horário: 19:00 às 22:40

54 Eventos

55 Como funciona jQuery na Prática Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Click! Possui handler?

56 Timing jQuery na Prática $(“p”).hide(); Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

57 Timing jQuery na Prática $(“p”).hide();  Nenhum parágrafo no documento! Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40  DOM está pronto!

58 Document Ready jQuery na Prática $(document).ready(function () { $(“p”).hide(); }); Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Documento está pronto! Executa o handler

59 Eventos de Mouse $(“p”).click(); //Dispara no evento de click do mouse $(“p”).dblclick(); //Dispara com click duplo $(“p”).hover(); //Dispara quando mouse entra e/ou sai do elemento $(“p”).mousedown(); //Dispara quando o botão do mouse é pressionado $(“p”).mouseenter(); //Dispara quando o mouse entra no elemento $(“p”).mouseleave(); //Dispara quando o mouse sai do elemento $(“p”).mousemove(); //Dispara quando o mouse se move $(“p”).mouseup(); //Dispara quando ao término do click do mouse

60 Click function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmente utilizamos funções anônimas $(“p”).click(function () { $(“p”).hide(); });

61 Hover.destacar { background: yellow; } $(“p”).hover(function () { $(this).addClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05

62 Hover.destacar { background: yellow; } $(“p”).hover( function () { $(this).addClass(“destacar”);}, function () { $(this).removeClass(“destacar”);} ); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05

63 Hover.destacar { background: yellow; } $(“p”).hover(function () { $(this).toggleClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Data: 21/01 à 25/05

64 Eventos de Teclado $(“input”).keydown(); //Dispara ao apertar a tecla $(“input”).keypress(); //Dispara ao pressionar a tecla $(“input”).keyup(); //Dispara ao soltar a tecla

65 Eventos de Formulário $(“input”).blur(); //Dispara ao input perder o foco $(“input”).change(); //Dispara quando um valor é alterado $(“input”).focus(); //Dispara quando um input recebe foco $(“input”).select(); //Dispara ao selecionar um texto, option, radio $(“input”).submit(); //Dispara submeter o formulário

66 Objeto event $(“body”).keypress(function (event) { }); event.which; // código númerico da tecla pressionada event.preventDefault(); // evita a ação padrão do browser event.stopPropagation(); // evita propagação do evento no DOM

67 Animação

68 Animações slide.slideUp([duração][,callback]); duração – Tempo da animação em milisegundos – Default 400 milisegundos – Aceita parâmetros “slow” (600ms) e “fast” (200ms) callback – Função que será executada após o término da animação

69 slideUp, slideDown e slideToggle $(“p”).slideUp(“slow”); $(“p”).slideUp(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).slideDown(“fast”); $(“p”).slideToggle();

70 Animações fade Utiliza os mesmos parâmetros do slide $(“p”).fadeIn(“slow”); $(“p”).fadeIn(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).fadeOut(“fast”); $(“p”).fadeToggle();

71 Funções jQuery

72 Adicionando funções customizadas $.fn.vazio = function () { var value = $(this).val(); if (value == “”) { return true; } else { return false; } }; $(“input”).vazio();

73 Ajax

74 XMLHttpRequest Requisições assíncronas por trás dos panos $.ajax({ url: ‘usuarios.php’, data: { id: “10”, acao: “editar” }, cache: false, type: “POST”, beforeSend: function () { // execução antes de realizar requisição }, success: function (data) { // execução em caso de sucesso }, error: function () { // execução em caso de erro } complete: function () { // execução ao terminar requisição } });

75 load Permite especificar um elemento para receber a resposta e uma função de callback $('#resultado').load(‘usuarios.php‘); // A resposta da requisição à página usuarios.php é inserida dentro do elemento #resultado $('#resultado').load(‘usuarios.php‘, function () { // Executa após terminar a requisição }); $('#resultado').load(‘usuarios.php‘, { id: 10 } function () { // Executa após terminar a requisição });

76 post $.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType]) O método post do jQuery corresponde à seguinte implementação: $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType }); $.post(“login.php”, { usuario: “vitorfs”, senha: “123456” }); $.post(“login.php”, $(“form”).serialize(), function () { // Executa callback });

77 get $.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType]) O método get do jQuery corresponde à seguinte implementação: $.ajax({ url: url, data: data, success: success, dataType: dataType }); $.get(“cidades.php”, { uf: “mg” }, function (data) { $(“select”).html(data); });

78 Formulários

79 Serializando formulários Nome: Cpf: Enviar $(“#cadastro”).serialize(); Retorna: Vitor Nome: Cpf:

80 Serializando em array $(“#cadastro”).serializeArray(); [ { name = “nome”, value = “vitor” }, { name = “ ”, value = }, { name = “cpf”, value = “ ” } ]


Carregar ppt "JQuery na Prática vitorfs.com/jquery-na-pratica. Vitor Freitas github.com/vitorfs."

Apresentações semelhantes


Anúncios Google