jQuery na Prática
vitorfs.com/jquery-na-pratica
Vitor Freitas
[email protected]/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çõesfunction 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”>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 ul
lililijQuery na Prática
Curso de jQuery
Vitor Freitas
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)
DOMhtml
body
h1 jQuery na Prática
p.autor Vitor Freitas
p#rodape vitorfs.com/jquery-na-pratica
Seletores jQuery
jQuery$(“p”);
(Nome do elemento)
DOMhtml
body
h1 jQuery na Prática
p.autor Vitor Freitas
p#rodape vitorfs.com/jquery-na-pratica
Seletores jQuery
jQuery$(“p.autor”);
(Elemento + . + Classe)
DOMhtml
body
h1 jQuery na Prática
p.autor Vitor Freitas
p#rodape vitorfs.com/jquery-na-pratica
Seletores jQuery
jQuery$(“.autor”);
(Somente a classe)
DOMhtml
body
h1 jQuery na Prática
p.autor Vitor Freitas
p#rodape vitorfs.com/jquery-na-pratica
Seletores jQuery
jQuery$(“p#rodape”);
(Elemento + # + Id)
DOMhtml
body
h1 jQuery na Prática
p.autor Vitor Freitas
p#rodape vitorfs.com/jquery-na-pratica
Resultado da Seleção
jQuery$(“p”);
DOMp.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>”]
Resultado da Seleção
jQuery$(“h1, p#rodape”); $(“h1”, “p#rodape”);
DOMh1 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!
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”>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”>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 text$(“span.data”).text(“<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: <u>28/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”>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?
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>
$(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
Clickfunction 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
}
});
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>
$(“#cadastro”).serialize();
Retorna: nome=Vitor&[email protected]&cpf=123456789012
Vitor
123456789012
Nome:
Email:
Cpf:
Serializando em array$(“#cadastro”).serializeArray();
[
{
name = “nome”,
value = “vitor”
},
{
name = “email”,
value = “[email protected]”
},
{
name = “cpf”,
value = “123456789012”
}
]
Top Related