jQuery Fundamentos

Cauê Fajoli
cauefajoli@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

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

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)
(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
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)

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>

DOM
html
head body
title h1#titulo p.autor ul
lilili
jQuery na
Prática
Curso de
jQuery
Cauê
Fajoli
JS DOM jQuery

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)
DOM
html
body
h1  jQuery na Prática
p.autor  Cauê Fajoli
p#rodape  cauefajoli@gmail.com

Seletores jQuery
jQuery
$(“p”);
(Nome do elemento)
DOM
html
body

Seletores jQuery
jQuery
$(“p.autor”);
(Elemento + . + Classe)
DOM
html
body

Seletores jQuery
jQuery
$(“.autor”);
(Somente a classe)
DOM
html
body

Seletores jQuery
jQuery
$(“p#rodape”);
(Elemento + # + Id)
DOM
html
body

Resultado da Seleção
jQuery
$(“p”);
DOM
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”);
DOM
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
<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”>Cauê Fajoli</p>]
$(“p.autor”).show();
[<p class=“autor” style=“display: normal”>Cauê Fajoli</p>]
$(“p.autor”).toggle();
Alterna entre hide e show

Template
<html>
<head>
</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/01
Horário: 19:00 às 22:40
Cronograma
• DOM
• jQuery
Data: 28/01 à 01/02
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
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
• DOM
• jQuery
Data: 28/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
• 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
• DOM
• jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40

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

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

Como funciona
<html>
<head>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
Click!
Possui
handler?
Possui
handler?
Possui
handler?
Possui
handler?

Document Ready
<html>
<head>
<script src=“jquery.js”></script>
<script>
$(document).ready(function () {
$(“p”).hide();
});
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</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/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05

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

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

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çõ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();

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

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
}
});

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>

jQuery Fundamentos

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie jQuery Fundamentos

Ähnlich wie jQuery Fundamentos (20)

jQuery Fundamentos