jQuery na Prática vitorfs.com/jquery-na-pratica Vitor Freitas [email protected] 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 Animação Funções jQuery Ajax Formulários Introdução ao JavaScript e jQuery Em 1995 nasce o JavaScript VBSCRIPT MOCHA LIVESCRIPT JAVASCRIPT JavaScript hoje 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 jQuery não é nenhuma panacéia • Você ainda precisa de JavaScript • jQuery é pesado • Construa agora, melhore depois Fundamentos de JavaScript 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 ( ; ) 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) 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 ( ; ) 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 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”); titulo.split(“ ”); “jQuery n4 Prátic4” [“jQuery”, “na”, “Prática”] Operações numéricas 10 + 5; 15 10 / 2; 5 parseInt(“10 reais”); 10 var num = 10; num.toString(); “10” 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) Document Object Model (DOM) 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> DOM html head body title h1#titulo p.autor jQuery na Prática Curso de jQuery Vitor Freitas ul li li li JS DOM jQuery Preparando o Ambiente http://jquery.com Carregando jQuery <script type=“text/javascript” src=“jquery-1.9.0.min.js”></script> 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!) 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 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 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 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 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 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-napratica</p>”] Resultado da Seleção jQuery $(“h1, p#rodape”); Errado! $(“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-napratica</p>”] Espaço em branco $(“p#rodape”); Elemento p com id rodape $(“p #rodape”); Elemento com id rodape dentro do elemento p 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”); 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” 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 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) Manipulando CSS 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 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”}); Mas... vamos com calma HTML Conteúdo CSS Apresentação JavaScript Interação Interface CSS • DOM e CSS comunicam via IDs e Classes • Use .css() com cautela • Manipule IDs e Classes • Mais seguro e manutenível 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 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 Manipulando Conteúdo Template <html> <head> <title>jQuery na Prática</title> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“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> 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”] Definindo text $(“span.data”).text(“28/01 à 01/02”); <span class=“data”>28/01 class=“data”>21/01 à 01/02</span> 25/01</span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 28/01 21/01 à 01/02 25/01 Horário: 19:00 às 22:40 Definindo text $(“span.data”).text(“<u>28/01 à 01/02</u>”); <span class=“data”><u>28/01 class=“data”>21/01 à 25/01</span> à 01/02</u></span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: <u>28/01 21/01 à 25/01 à 01/02</u> Horário: 19:00 às 22:40 Definindo html $(“span.data”).html(“<u>28/01 à 01/02</u>”); <span class=“data”><u>28/01 class=“data”>21/01 à 25/01</span> à 01/02</u></span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 21/01 28/01 à 25/01 01/02 Horário: 19:00 às 22:40 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 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 Prepend $(“ul”).prepend(“<li>Seletores jQuery</li>”); Cronograma • Seletores jQuery • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Before $(“ul”).before(“<h3>Conteúdo</h3>”); Cronograma Conteúdo • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 After $(“ul”).after(“<h3>Data e Hora:</h3>”); Cronograma • Fundamentos JavaScript • DOM • jQuery Data e Hora: Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Eventos Como funciona <html> <head> Possui <title>jQuery na Prática</title> handler? </head> Possui <body> handler? Possui Possui <h2>Cronograma</h2> handler? handler? <ul> <li>Fundamentos <span class=“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> Timing <html> <head> <title>jQuery na Prática</title> <script src=“jquery.js”></script> <script> $(“p”).hide(); </script> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“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> Timing <html> <head> <title>jQuery na Prática</title> <script src=“jquery.js”></script> <script> $(“p”).hide(); </script> Nenhum parágrafo no documento! </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“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> DOM está pronto! Document Ready <html> <head> <title>jQuery na Prática</title> <script src=“jquery.js”></script> <script> Executa o $(document).ready(function () { handler $(“p”).hide(); }); </script> </head> <body> <h2>Cronograma</h2> <ul> <li>Fundamentos <span class=“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> Documento </body> está pronto! </html> 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 Click function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmente utilizamos funções anônimas $(“p”).click(function () { $(“p”).hide(); }); Hover .destacar { background: yellow; } $(“p”).hover(function () { $(this).addClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 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 Hover .destacar { background: yellow; } $(“p”).hover(function () { $(this).toggleClass(“destacar”); }); Data: 21/01 à 25/05 Horário: 19:00 às 22:40 Eventos de Teclado $(“input”).keydown(); //Dispara ao apertar a tecla $(“input”).keypress(); //Dispara ao pressionar a tecla $(“input”).keyup(); //Dispara ao soltar a tecla 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 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 Animação 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 slideUp, slideDown e slideToggle $(“p”).slideUp(“slow”); $(“p”).slideUp(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).slideDown(“fast”); $(“p”).slideToggle(); 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(); Funções jQuery Adicionando funções customizadas $.fn.vazio = function () { var value = $(this).val(); if (value == “”) { return true; } else { return false; } }; $(“input”).vazio(); Ajax 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 } }); 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 }); 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 }); 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); }); Formulários Serializando formulários <form method=“post” action=“cadastro.php” id=“cadastro”> Nome: <input type=“text” name=“nome” id=“nome”> Email: <input type=“text” name=“email” id=“email”> Cpf: <input type=“text” name=“cpf” id=“cpf”> <button type=“submit”>Enviar</button> </form> Nome: Vitor Email: [email protected] Cpf: 123456789012 $(“#cadastro”).serialize(); Retorna: nome=Vitor&[email protected]&cpf=123456789012 Serializando em array $(“#cadastro”).serializeArray(); [ { name = “nome”, value = “vitor” }, { name = “email”, value = “[email protected]” }, { name = “cpf”, value = “123456789012” } ]
Download
