jquery na prática - cauê fajoli
Post on 20-Mar-2017
45 Views
Preview:
TRANSCRIPT
jQuery na Prática
Cauê Fajolicauefajoli@gmail.com
Software Developer
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
JavaScript hoje
Por que usar jQuery?
jQuery é uma camada de abstração
Use jQuery porque...
... é fácil
... é produtivo
... é simples
... constantes atualizações
... suporte da comunidade
jQuery não é nenhuma panacéia
Você ainda precisa de JavaScript
jQuery tem seu peso
Mais uma camada
Abstração
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”); “jQuery n4 Prátic4”
titulo.split(“ ”); [“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”>Caue Fajoli</p>
<ul>
<li>JS</li>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
DOMhtml
head body
title h1#titulo p.autor ul
lililijQuery na Prática
Curso de jQuery
Cauê Fajoli
JS DOM jQuery
Preparando o Ambiente
http://jquery.com
Carregando jQuery
<script type=“text/javascript” src=“jquery-X.X.X.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)
DOMhtml
body
h1 jQuery na Prática p.autor Cauê Fajoli p#rodape cauefajoli@gmail.com
Seletores jQuery
jQuery$(“p”);
(Nome do elemento)
DOMhtml
body
h1 jQuery na Prática p.autor Cauê Fajoli p#rodape cauefajoli@gmail.com
Seletores jQuery
jQuery$(“p.autor”);
(Elemento + . + Classe)
DOMhtml
body
h1 jQuery na Prática p.autor Cauê Fajoli p#rodape cauefajoli@gmail.com
Seletores jQuery
jQuery$(“.autor”);
(Somente a classe)
DOMhtml
body
h1 jQuery na Prática p.autor Cauê Fajoli p#rodape cauefajoli@gmail.com
Seletores jQuery
jQuery$(“p#rodape”);
(Elemento + # + Id)
DOMhtml
body
h1 jQuery na Prática p.autor Cauê Fajoli p#rodape cauefajoli@gmail.com
Resultado da Seleção
jQuery$(“p”);
DOMp.autor Cauê Fajolip#rodape cauefajoli@gmail.com
JavaScript[“<p class=‘autor’>Cauê Fajoli</p>”, “<p id=‘rodape’>cauefajoli@gmail.com</p>”]
Resultado da Seleção
jQuery$(“h1, p#rodape”); $(“h1”, “p#rodape”);
DOMh1 jQuery na Práticap#rodape vitorfs.com/jquery-na-pratica
JavaScript[“<h1>Vitor Freitas</h1>”, “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”]
Errado!
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
HTMLConteúdo
CSSApresentação
JavaScriptInteraçã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”>Cauê Fajoli</p>]
$(“p.autor”).show();[<p class=“autor” style=“display: normal”>Cauê Fajoli</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”>21/01 à 25/01</span><span class=“data”>28/01 à 01/02</span>
Cronograma• Fundamentos JavaScript• DOM• jQuery
Data: 21/01 à 25/01Horário: 19:00 às 22:40
Cronograma• Fundamentos JavaScript• DOM• jQuery
Data: 28/01 à 01/02Horário: 19:00 às 22:40
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/01Horário: 19:00 às 22:40
Cronograma• Fundamentos JavaScript• DOM• jQuery
Data: 28/01 à 01/02Horá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/01Horário: 19:00 às 22:40
Prepend
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
Cronograma• Seletores jQuery• Fundamentos JavaScript• DOM• jQuery
Data: 21/01 à 25/01Horário: 19:00 às 22:40
Before
$(“ul”).before(“<h3>Conteúdo</h3>”);
CronogramaConteúdo• Fundamentos JavaScript• DOM• jQuery
Data: 21/01 à 25/01Horá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/01Horário: 19:00 às 22:40
Eventos
Como funciona
<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>
Click!
Possui handler
?
Possui handler
?
Possui handler
?
Possui handler
?
Document Ready<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>
Documento está pronto!
Executa o handler
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/05Horário: 19:00 às 22:40Data: 21/01 à 25/05
Hover
.destacar { background: yellow;}
$(“p”).hover( function () { $(this).addClass(“destacar”);}, function () { $(this).removeClass(“destacar”);});
Data: 21/01 à 25/05Horário: 19:00 às 22:40Data: 21/01 à 25/05
Hover
.destacar { background: yellow;}
$(“p”).hover(function () { $(this).toggleClass(“destacar”);});
Data: 21/01 à 25/05Horário: 19:00 às 22:40Data: 21/01 à 25/05
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 }});
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>
$(“#cadastro”).serialize();
Retorna: nome=Caue&email=cauefajoli@gmail.com&cpf=123456789012
Caue
cauefajoli@gmail.com
123456789012
Nome:Email:Cpf:
<h1>Muito Obrigado</h1>
<a href="mailto:cauefajoli@gmail.com"></a>
<p>Cauê Fajoli</p>
top related