7. Eduardo Mendes (edumendes@gmail.com)
05 maneiras de utilizar jQuery
7
encontrar elementos no documento HTML
alterar conteúdo HTML
ouvir o que o usuário faz e reagir em conformidade
animar o conteúdo da página
comunicar-se pela rede para recuperar novos conteúdos
8. Eduardo Mendes (edumendes@gmail.com)8
Alterando o conteúdo
um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
Como alterar o texto da tag <h1>?
encontre-o
altere-o
9. Eduardo Mendes (edumendes@gmail.com)9
Alterando o conteúdo
um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
encontre-o
Como procurar um elemento/tag
HTML com jQuery?
Para isso precisamos entender como
um navegador organiza o seu conteúdo
10. Eduardo Mendes (edumendes@gmail.com)
Document Object Model
Os navegadores armazenam
os elementos de uma página HTML
em uma estrutura de árvores,
que permite encontrar e manipular
estes elementos através de JavaScript
10
DOM
11. Eduardo Mendes (edumendes@gmail.com)11
HTML -> DOM
um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
DOM
navegador
0% 100%
12. Eduardo Mendes (edumendes@gmail.com)12
HTML -> DOM
um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…
13. Eduardo Mendes (edumendes@gmail.com)13
Como realizar uma busca na árvore DOM?
A árvore do DOM
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…
JavaScript
JavaScript fornece
uma linguagem
capaz de interagir
com DOM
20. Eduardo Mendes (edumendes@gmail.com)20
para usar a função é preciso utilizar seletores CSS
Documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
Seletores CSS
h1 {font-size: 3em;}
p { color: red; }
21. Eduardo Mendes (edumendes@gmail.com)21
Utilizando funções jQuery para achar o nó
Documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
Seletores jQuery
jQuery(“h1”);
jQuery(“p”);
$(“h1”)
$(“p”)
==
short
22. Eduardo Mendes (edumendes@gmail.com)22
Alterando o conteúdo
um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
Como alterar o texto da tag <h1>?
encontre-o
altere-o
23. Eduardo Mendes (edumendes@gmail.com)23
Selecione o elemento pelo seu nome HTML
um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery Festas</title>
</head>
<body>
<h1>O que eu quero fazer?</h1>
<p>Planejar minha próxima festa</p>
</body>
</html>
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…
26. Eduardo Mendes (edumendes@gmail.com)26
Recuperando o texto do elemento
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…
$(“h1”).text();
método jQuery
"O que eu quero fazer?"
27. Eduardo Mendes (edumendes@gmail.com)27
Modificando o texto do elemento
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…
$(“h1”).text(“Hello jQuery");
método jQuery
“Hello jQuery"
28. Eduardo Mendes (edumendes@gmail.com)28
Modificando o texto do elemento
DOCUMENT
html
head
title
jQuery Festas
body
h1
Hello jQuery
p
Planejar minh…
$(“h1”).text(“Hello jQuery");
método jQuery
“Hello jQuery"
29. Eduardo Mendes (edumendes@gmail.com)
DOM em 1.º Lugar
O JavaScript pode executar
antes do carregamento total do DOM
29
DOM
$(“h1”).text(“Hello jQuery");
0% 100%
50%
É preciso certificar-se que o DOM está 100% carregado
para executar jQuery com confiança
30. Eduardo Mendes (edumendes@gmail.com)
DOM em 1.º Lugar
É possível verificar o final do carregamento
30
DOM0% 100%
50%
"I'm ready"
Como ouvir este evento?
Após ouvir o evento execute o <codigo>
34. Eduardo Mendes (edumendes@gmail.com)34
Utilizando jQuery
dowload jQuery
carregue-o em seu documento HTML
<script src=“jquery.min.js”></script>
daí é só utilizar
<script src=“application.js”></script>
1
2
3
35. Eduardo Mendes (edumendes@gmail.com)35
Alterando múltiplos elementos
Como alterar o texto de cada elemento de lista (<li>) deste trecho de código?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<p>Planeje sua próxima festa</p>
<ul id="temas">
<li>Grécia antiga</li>
<li>Oscar</li>
<li class='promo'>White Party</li>
</ul>
$(“li”);
ache-os
altere-os
36. Eduardo Mendes (edumendes@gmail.com)36
Alterando múltiplos elementos
Como alterar o texto de cada elemento de lista (<li>) deste trecho de código?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<p>Planeje sua próxima festa</p>
<ul id="temas">
<li>Grécia antiga</li>
<li>Oscar</li>
<li class='promo'>White Party</li>
</ul>
$(“li”).text(“À fantasia”);
ache-os
altere-os
37. Eduardo Mendes (edumendes@gmail.com)37
Alterando múltiplos elementos
Como alterar o texto de cada elemento de lista (<li>) deste trecho de código?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<p>Planeje sua próxima festa</p>
<ul id="temas">
<li>À fantasia</li>
<li>À fantasia</li>
<li class='promo'>À fantasia</li>
</ul>
$(“li”).text(“À fantasia”);
ache-os
altere-os
40. Eduardo Mendes (edumendes@gmail.com)40
Função como parâmetro
$(document).ready(<funcao de manipulacao de evento>);
O método ready recebe por parâmetro uma função como parâmetro
function(){
<code>
}
Definição de função
$(document).ready(function(){
<code>
});
46. Eduardo Mendes (edumendes@gmail.com)46
Seletores descendentes
Como encontrar os elementos <li> questão em uma <ul> de ID “temas"?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<p>Planeje sua próxima festa</p>
<ul id="temas">
<li>Grécia antiga</li>
<li>Oscar</li>
<li class='promo'>White Party</li>
</ul>
seletor descendente
47. Eduardo Mendes (edumendes@gmail.com)47
Seletores descendentes
Como encontrar os elementos <li> questão em uma <ul> de ID “temas"?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Grécia antiga</li>
<li>Oscar</li>
<li class='promo'>White Party</li>
</ul>
$(“temas li”);
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party
48. Eduardo Mendes (edumendes@gmail.com)48
Seletores descendentes
Como encontrar somente os filhos diretos?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
<li class='promo'>White Party</li>
</ul>
$(“temas li”);
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li
49. Eduardo Mendes (edumendes@gmail.com)49
Seletores descendentes
Como encontrar somente os filhos diretos?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
<li class='promo'>White Party</li>
</ul>
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li
seletor de filho
50. Eduardo Mendes (edumendes@gmail.com)50
Seletores descendentes
Como encontrar somente os filhos diretos?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
<li class='promo'>White Party</li>
</ul>
$(“temas > li”);
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li
51. Eduardo Mendes (edumendes@gmail.com)51
Selecionando múltiplos elementos
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Europa</li>
<li>
<ul id="grecia">
<li>Grécia</li>
</ul>
</li>
<li class='promo'>White Party</li>
</ul>
$(“.promo, #grecia”);
body
h1
Qual o tema…
ul
ul
Europa
h2
Temas de fes…
Grécia
li
White Party
li
li
li
54. Eduardo Mendes (edumendes@gmail.com)54
Filtros com transversing
$(“temas li”);
$(“temas”).find(“li”);
O código é maior,
mas é mais eficiente
$(“li:first”);
$(“li”).first();
$(“li:last”);
$(“li”).last();
55. Eduardo Mendes (edumendes@gmail.com)55
Caminhando no DOM
E como encontrar o elemento do meio?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Grécia antiga</li>
<li>Oscar</li>
<li class='promo'>White Party</li>
</ul>
57. Eduardo Mendes (edumendes@gmail.com)57
Caminhando no DOM
E como encontrar o elemento do meio?
$(“li”).first().next();
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party
58. Eduardo Mendes (edumendes@gmail.com)58
Caminhando no DOM
E como encontrar o elemento do meio?
$(“li”).first().prev();
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party
59. Eduardo Mendes (edumendes@gmail.com)59
Caminhando no DOM
Também é possível encontrar o elemento pai
$(“li”).first().parent();
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party
60. Eduardo Mendes (edumendes@gmail.com)60
Seletores descendentes
Como encontrar os filhos direto com transversing?
<h1>Qual o tema da festa?</h1>
<h2>Temas de festas</h2>
<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
<li class='promo'>White Party</li>
</ul>
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li
$(“temas”).children(“li”);
61. Eduardo Mendes (edumendes@gmail.com)61
Caminhando no DOM
Como encontrar os filhos diretos utilizando transversing?
$(“temas”).children(“li”);
enquanto o método
find() seleciona
todos os <li>
o método children()
seleciona apenas os
<li> que são filhos
diretos
65. Eduardo Mendes (edumendes@gmail.com)65
Anexando um elemento ao DOM
$(document).ready(function(){
<code>
});
var preco = ”$399.99”;
var preco = ”<span>$399.99</span>”;
var preco = ”$(<span>$399.99</span>)";
span
$399.99
Não é HTML
Funciona, mas
é apenas uma String
Cria um nó manipulável
66. Eduardo Mendes (edumendes@gmail.com)66
Anexando um documento no DOM
$(document).ready(function(){
var preco = $('<span>$399.99</span>');
!
});
.append(<elemento>); .prepend(<elemento>);
.after(<elemento>); .before(<elemento>);
73. Eduardo Mendes (edumendes@gmail.com)73
Anexando a partir do nó que se anexa
.appendTo(<elemento>); .prependTo(<elemento>);
.afterTo(<elemento>); .beforeTo(<elemento>);
$(document).ready(function(){
var preco = $('<span>$399.99</span>');
$('.lemon').append(preco);
});
preco.appendTo(”$(“.lemon”));
79. Eduardo Mendes (edumendes@gmail.com)79
Uma introdução ao this
$(document).ready(function(){
$('button').on('click', function() {
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
$('.bebida').append(preco);
$('button').remove();
Quando o botão é clicado,
ele será o 'this'
88. Eduardo Mendes (edumendes@gmail.com)88
E se o DOM for alterado
$(document).ready(function(){
$('button').on('click', function() {
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
$(this).after(preco);
$(this).remove();
O preço ficaria dentro
da <div> ao invés do <li>
89. Eduardo Mendes (edumendes@gmail.com)
89
Use .closest(<seletor>)
$(this).after(preco)
$(this).parent().parent().append(preco);
$(this).parents(“.bebida”).append(preco);
$(this).closest(“.bebida”).append(preco);
Retorna todos os ancestrais
com este seletor
Retorna apenas um nó
92. Eduardo Mendes (edumendes@gmail.com)92
Adicionando um atributo data
<li class="bebida"
<p>
<img src="imagens/yellow.gif" />
</p>
<h3>Lemon Breeze</h3>
<p>Um drinks mais. . . <br/></p>
<button>Consultar Preco</button>
</li>
data-preco="15,00"> Este é um elemento faz parte
da HMTL5 que deve ser
utilizado para fornecer
informações adicionais
sobre os objetos das páginas
.data(<nome>)
.data(<nome>, <valor>)
$(‘.bebida’).first().data(‘preco');
“15,00”
93. Eduardo Mendes (edumendes@gmail.com)93
Refatorando o preco
$(document).ready(function(){
$('button').on('click', function() {
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
$('.bebida').append(preco);
$('button').remove();
var valor = $(this).closest(‘.bebida’).data(‘preco’);
var preco = $(‘<p>R$ ’ + valor + ‘</p>' );
Recupera o valor
do atributo data-preco
Concatenação das 02 Strings
94. Eduardo Mendes (edumendes@gmail.com)94
Refatorando o preco
Cada$(document).ready(function(){
$('button').on('click', function() {
var valor = $(this).closest(".bebida").data('preco');
var preco = $("<p>R$" + valor + "</p>");
$(this).closest(".bebida").append(preco);
$(this).remove();
});
});
Cada bebida terá
seu próprio preço
96. Eduardo Mendes (edumendes@gmail.com)96
Refatorando o preco
Cada
$(document).ready(function(){
$('button').on('click', function() {
var valor = $(this).closest(".bebida").data('preco');
var preco = $("<p>R$" + valor + "</p>");
$(this).closest(".bebida").append(preco);
$(this).remove();
});
});
var valor = bebida.data(‘preco’);
bebida.append(preco);
var bebida = $(this).closest(“.bebida”);
97. Eduardo Mendes (edumendes@gmail.com)
Refatorando o preco
Cada
$(document).ready(function(){
$('button').on('click', function() {
var bebida = $(this).closest(".bebida");
var valor = bebida.data('preco');
var preco = $("<p>R$" + valor + "</p>");
bebida.append(preco);
$(this).remove();
});
});
100. Eduardo Mendes (edumendes@gmail.com)100
É necessário transversing + seletores
$(document).ready(function(){
$('button').on('click', function() {
. . .
});
});
$(‘#bebidas button').on('click', function() {});
$(‘#bebidas').on('click', ‘button’, function() {});
atinge somente os botoes
que estiverem um dentro de um
“#bebidas"
102. Eduardo Mendes (edumendes@gmail.com)102
Filtrando o HTML
<div id="filtros">
<button class="filtro-promo">Promocao do Dia</button>
<button class="filtro-sem-alcool">Sem Alcool</button>
</div>
Vamos adicionar dois tratadores de eventos
Vamos destacar as seções correspondentes quando clivados
103. Eduardo Mendes (edumendes@gmail.com)103
Filtrando bebidas em promoção
$("#filtros").on("click", ".filtro-promo", function() {
//encontrar todos os elementos <li> que estão
//promocao e adicionar uma classe a eles
});
<li class="bebida promo" data-preco="15,00">
<p>
<img src="imagens/yellow.gif" />
</p>
…
</li>
$(“.bebida”).filter(".promo") //
105. Eduardo Mendes (edumendes@gmail.com)105
Filtrando bebidas em promoção
$("#filtros").on("click", ".filtro-promo", function() {
$(".bebida").filter(".promo").addClass("destacada");
});
apenas bebidas em promoção adiciona a classe destacada
A mesma coisa para a outra classe
$("#filtros").on('click', '.filtro-sem-alcool', function() {
$(".bebida").filter(".sem-alcool").addClass("destacada");
});
124. Eduardo Mendes (edumendes@gmail.com)124
Eventos de teclado
$(“.bebida”).on("keyup", ".quantidade", function() {
!
!
!
});
// Recuperar o preço da bebida
// Recuperar a quantidade de bebida
// Modificar o total para preço * quantidade
var preco = $(this).closest(".bebida").data("preco");
"15"
var preco = +$(this).closest(".bebida").data("preco");
15
125. Eduardo Mendes (edumendes@gmail.com)125
Eventos de teclado
$(“.bebida”).on("keyup", ".quantidade", function() {
!
!
!
});
var preco = +$(this).closest(".bebida").data("preco");
// Recuperar a quantidade de bebida
// Modificar o total para preço * quantidade
var quantidade = $this).val();
"2"
var quantidade = +$(this).val();
2
126. Eduardo Mendes (edumendes@gmail.com)126
Eventos de teclado
$(“.bebida”).on("keyup", ".quantidade", function() {
!
!
!
});
var preco = +$(this).closest(".bebida").data("preco");
var quantidade = +$(this).val();
// Modificar o total para preço * quantidade
$("#total").text(preco * quantidade);
127. Eduardo Mendes (edumendes@gmail.com)127
Eventos de teclado
$(“.bebida”).on("keyup", ".quantidade", function() {
!
!
!
});
var preco = +$(this).closest(".bebida").data("preco");
var quantidade = +$(this).val();
$("#total").text(preco * quantidade);
Assim o valor atualizará
imeditamente