Carregar apresentação
A apresentação está carregando. Por favor, espere
1
vitorfs.com/jquery-na-pratica
jQuery na Prática vitorfs.com/jquery-na-pratica
2
vitorfs@gmail.com github.com/vitorfs
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 MOCHA LIVESCRIPT 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 Palavra reservada: function
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; / 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 li li li
jQuery na Prática Curso de jQuery Vitor Freitas li li li JS DOM jQuery
20
Preparando o Ambiente
22
Carregando jQuery <script type=“text/javascript” src=“jquery 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 DOM html body h1 jQuery na Prática
(Nome do elemento) DOM html body h jQuery na Prática p.autor Vitor Freitas p#rodape vitorfs.com/jquery-na-pratica
25
Seletores jQuery jQuery DOM html body h1 jQuery na Prática
(Nome do elemento) DOM html body h jQuery na Prática p.autor Vitor Freitas p#rodape vitorfs.com/jquery-na-pratica
26
Seletores jQuery jQuery DOM html body h1 jQuery na Prática
$(“p.autor”); (Elemento Classe) DOM html body h jQuery na Prática p.autor Vitor Freitas p#rodape vitorfs.com/jquery-na-pratica
27
Seletores jQuery jQuery DOM html body h1 jQuery na Prática
$(“.autor”); (Somente a classe) DOM html body h jQuery na Prática p.autor Vitor Freitas p#rodape vitorfs.com/jquery-na-pratica
28
Seletores jQuery jQuery DOM html body h1 jQuery na Prática
$(“p#rodape”); (Elemento + # + Id) DOM html body h jQuery na Prática p.autor Vitor Freitas p#rodape vitorfs.com/jquery-na-pratica
29
Resultado da Seleção jQuery DOM JavaScript 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 DOM JavaScript h1 jQuery na Prática
$(“h1, p#rodape”); $(“h1”, “p#rodape”); DOM h 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=‘ ’]”); // 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.autor”).show();
[<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 <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>
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 Cronograma Cronograma
$(“span.data”).text(“28/01 à 01/02”); <span class=“data”>28/01 à 01/02</span> <span class=“data”>21/01 à 25/01</span> Cronograma Fundamentos JavaScript DOM jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40 Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
47
Definindo text Cronograma Cronograma
$(“span.data”).text(“<u>28/01 à 01/02</u>”); <span class=“data”><u>28/01 à 01/02</u></span> <span class=“data”>21/01 à 25/01</span> Cronograma Fundamentos JavaScript DOM jQuery Data: <u>28/01 à 01/02</u> Horário: 19:00 às 22:40 Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
48
Definindo html Cronograma Cronograma
$(“span.data”).html(“<u>28/01 à 01/02</u>”); <span class=“data”><u>28/01 à 01/02</u></span> <span class=“data”>21/01 à 25/01</span> Cronograma Fundamentos JavaScript DOM jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40 Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 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
51
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
52
Before Cronograma $(“ul”).before(“<h3>Conteúdo</h3>”);
Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40
53
After Cronograma $(“ul”).after(“<h3>Data e Hora:</h3>”);
Fundamentos JavaScript DOM jQuery Data e Hora: Data: 21/01 à 25/01 Horário: 19:00 às 22:40
54
Eventos
55
Como funciona Click! Possui handler? Possui handler? Possui handler?
<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> Possui handler? Possui handler? Possui handler? Possui handler? Click!
56
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>
57
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!
58
Document Ready Executa o handler Documento está pronto!
<html> <head> <title>jQuery na Prática</title> <script src=“jquery.js”></script> <script> $(document).ready(function () { $(“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> Executa o handler Documento está pronto!
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 () { });
61
Hover Data: 21/01 à 25/05 Data: 21/01 à 25/05 Horário: 19:00 às 22:40
.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 Data: 21/01 à 25/05 Data: 21/01 à 25/05 Horário: 19:00 às 22:40
.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 Data: 21/01 à 25/05 Data: 21/01 à 25/05 Horário: 19:00 às 22:40
.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 callback
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
![Animações slide .slideUp([duração][,callback]); duração callback](http://slideplayer.com.br/slide/2644450/9/images/68/Anima%C3%A7%C3%B5es+slide+.slideUp%28%5Bdura%C3%A7%C3%A3o%5D%5B%2Ccallback%5D%29%3B+dura%C3%A7%C3%A3o+callback.jpg "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 () {
76
post O método post do jQuery corresponde à seguinte implementação:
$.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 O método get do jQuery corresponde à seguinte implementação:
$.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
<form method=“post” action=“cadastro.php” id=“cadastro”> Nome: <input type=“text” name=“nome” id=“nome”> <input type=“text” name=“ ” id=“ ”> Cpf: <input type=“text” name=“cpf” id=“cpf”> <button type=“submit”>Enviar</button> </form> $(“#cadastro”).serialize(); Retorna: Nome: Vitor Cpf:
80
Serializando em array $(“#cadastro”).serializeArray(); [ {
name = “nome”, value = “vitor” }, name = “ ”, value = name = “cpf”, value = “ ” } ]
Apresentações semelhantes
