Jquery

Eduardo Mendes (edumendes@gmail.com)
jQuery
1

Eduardo Mendes (edumendes@gmail.com)2
Biblioteca JavaScript
rápida, pequena e rica em recursos
Percorre e manipula documentos
HTML, trata eventos, animações
Facilita a utilização de AJAX

32kB
CSS 3
Cross-Browser

O que você pode fazer com jQuery
4
revelar elementos da interface

O que você pode fazer com jQuery
5
alterar conteúdo baseado na interação do usuário

O5 maneiras
de utilizar jQuery
6

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

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

um documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
encontre-o
Como procurar um elemento/tag
HTML com jQuery?
Para isso precisamos entender como
um navegador organiza o seu conteúdo

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

HTML -> DOM
um documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
DOM
navegador
0% 100%

HTML -> DOM
um documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…

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

Como realizar uma busca na árvore DOM?
navegador servidor web
JavaScript
DOM
JavaScript
Cada navegador
tem um DOM diferente

Entretanto
JavaScript
DOM
DOM
DOM
DOM
Cada navegador
tem um DOM
diferente

Entretanto
JavaScript
DOM
DOM
DOM
DOM
Um arquivo JS que utiliza jQuery
para se comunicar com o DOM,
será capaz de executar na maioria dos
navegadores modernos

jQuery Básico
17

jQuery básico
JavaScri
jQuery(<code>);
função principal jQuery

jQuery básico
JavaScri
jQuery(document);
O DOM
Como utilizar para encontrar algum elemento no DOM?

para usar a função é preciso utilizar seletores CSS
Documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Seletores CSS
h1 {font-size: 3em;}
p { color: red; }

Utilizando funções jQuery para achar o nó
Documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Seletores jQuery
jQuery(“h1”);
jQuery(“p”);
$(“h1”)
$(“p”)
==
short

um documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Como alterar o texto da tag <h1>?
encontre-o
altere-o

Selecione o elemento pelo seu nome HTML
um documento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…

DOCUMENT
html
head
titles
jQuery Festas
body
h1
O que eu quer…
p
Planejar minh…
$(“h1”);

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?"

Modiﬁcando 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"

Modiﬁcando o texto do elemento
DOCUMENT
html
head
title
jQuery Festas
body
h1
Hello jQuery
p
Planejar minh…
método jQuery
“Hello jQuery"

DOM em 1.º Lugar
O JavaScript pode executar 
antes do carregamento total do DOM
29
DOM
0% 100%
50%
É preciso certificar-se que o DOM está 100% carregado
para executar jQuery com confiança

DOM em 1.º Lugar
É possível veriﬁcar o ﬁnal do carregamento
30
DOM0% 100%
50%
"I'm ready"
Como ouvir este evento?
Após ouvir o evento execute o <codigo>

Ouvindo o evento ready
jQuery(document).ready(function(){
<code>
});
DOM
"I'm ready"
O código só executará depois que
o DOM estiver "pronto"

O código por inteiro
jQuery(document).ready(function(){
$(“h1”).text(“Hello jQuery”);
});

Utilizando jQuery
33

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

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

<ul id="temas">
<li>Oscar</li>
</ul>
$(“li”).text(“À fantasia”);
ache-os
altere-os

<ul id="temas">
<li>À fantasia</li>
<li>À fantasia</li>
<li class='promo'>À fantasia</li>
</ul>
$(“li”).text(“À fantasia”);
ache-os
altere-os

Outras formas de selecionar elementos
h1 {...}
CSS jQuery
$(“h1”);
#conteudo { . . . } $(“#conteudo”);
.temas {...} $(“.temas”);

Manipulando eventos
39

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>
}
Deﬁnição de função
$(document).ready(function(){
<code>
});

Drinks especiais

Esperando um click
<code>
});
<h3>Lemon Breeze</h3>
<p class="lemon">
Um drinks mais que saudavel, ...
<button>Consultar Preco</button>
</p>
$('button').on('click', function() {
!
!
});

Esperando um click
!
!
!
});
});

Esperando um click
!
!
!
});
});
var preco = $('<span>$399.99</span>');
$('.lemon').append(preco);

Esperando um click
!
!
!
});
});
var preco = $('<p>$399.99</p>');
$('button').remove();

Seletores descendentes
Como encontrar os elementos <li> questão em uma <ul> de ID “temas"?
<ul id="temas">
<li>Oscar</li>
</ul>
seletor descendente

Como encontrar os elementos <li> questão em uma <ul> de ID “temas"?
<ul id="temas">
<li>Oscar</li>
</ul>
$(“temas li”);
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party

Como encontrar somente os ﬁlhos diretos?
<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
</ul>
$(“temas li”);
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li

<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
</ul>
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li
seletor de ﬁlho

<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</li>
</ul>
$(“temas > li”);
body
h1
Qual o tema…
ul
li
Europa
h2
Temas de fes…
li
Grécia
li
White Party
ul
li

Selecionando múltiplos elementos
<ul id="temas">
<li>Europa</li>
<li>
<ul id="grecia">
<li>Grécia</li>
</ul>
</li>
</ul>
$(“.promo, #grecia”);
body
h1
Qual o tema…
ul
ul
Europa
h2
Temas de fes…
Grécia
li
White Party
li
li
li

Seletores com pseudo classes
$("#temas li:first").text("alterado");
$("#temas li:last").text("alterado");
$("#temas li:odd").text("alterado");
$("#temas li:even").text("alterado");

Transversing
53

Filtros com transversing
$(“temas li”);
$(“temas”).find(“li”);
O código é maior,
mas é mais eficiente
$(“li:first”);
$(“li”).first();
$(“li:last”);
$(“li”).last();

Caminhando no DOM
E como encontrar o elemento do meio?
<ul id="temas">
<li>Oscar</li>
</ul>

Caminhando no DOM
$(“li”).first();
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party

Caminhando no DOM
$(“li”).first().next();
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party

Caminhando no DOM
$(“li”).first().prev();
body
h1
Qual o tema…
ul
li
Grécia Antiga
h2
Temas de fes…
li
Oscar
li
White Party

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

Como encontrar os ﬁlhos direto com transversing?
<ul id="temas">
<li>Europa</li>
<li>
<ul>
<li>Grécia</li>
</ul>
</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”);

Caminhando no DOM
Como encontrar os ﬁlhos 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

Trabalhando com DOM
62

Anexando e Removendo no DOM

Anexando um elemento ao DOM
anexar um novo nó no DOM
remover um nó do DOM
1
2

Anexando um elemento ao DOM
<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

Anexando um documento no DOM
!
});
.append(<elemento>); .prepend(<elemento>);
.after(<elemento>); .before(<elemento>);

HTML Original

Before
$('.lemon').before(preco);
});

After
$('.lemon').after(preco);
});

Prepend
$('.lemon').prepend(preco);
});
preco no topo
de .lemon

Append
});
preco na base
de .lemon

Anexando e removendo
!
!
!
});
});
var preco = $('<p>$399.99</p>');

Anexando a partir do nó que se anexa
.appendTo(<elemento>); .prependTo(<elemento>);
.afterTo(<elemento>); .beforeTo(<elemento>);
});
preco.appendTo(”$(“.lemon”));

Trabalhando
com múltiplos elementos
74

Trabalhando com múltiplos elementos

Alterando a estrutura do código

!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
$('.bebida').append(preco);

Uma introdução ao this
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
Quando o botão é clicado,
ele será o 'this'

Apresentando o $(this)

Corrigindo
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
this.remove();
$(this).remove();
Não é um objeto jQuery
OK! E removerá somente
o botão clivado

Corrigindo
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
$(this).remove();

Corrigindo
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
$(this).after(preco);
$(this).remove();

Comportamento correto

E se o DOM for alterado
!
!
});
});
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
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ó

Adicionando dados
90

Todas as bebidas têm o mesmo valor

Adicionando um atributo data
<li class="bebida"
<p>
<img src="imagens/yellow.gif" />
</p>
<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”

Refatorando o preco
!
!
!
});
});
var preco = $(‘<p>R$ 15,00</p>’);
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

Refatorando o preco
Cada$(document).ready(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

Cada bebida com seu próprio preço

Refatorando o preco
Cada
var valor = $(this).closest(".bebida").data('preco');
$(this).closest(".bebida").append(preco);
$(this).remove();
});
});
var valor = bebida.data(‘preco’);
bebida.append(preco);
var bebida = $(this).closest(“.bebida”);

Refatorando o preco
Cada
var bebida = $(this).closest(".bebida");
var valor = bebida.data('preco');
bebida.append(preco);
$(this).remove();
});
});

Adicionando mais elementos
98

E se tivéssemos mais um grupo de botões?

É necessário transversing + seletores
. . .
});
});
$(‘#bebidas button').on('click', function() {});
$(‘#bebidas').on('click', ‘button’, function() {});
atinge somente os botoes
que estiverem um dentro de um
“#bebidas"

Filtrando
101

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

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") //

Manipulação de classes
.addClass(<class>)
.removeClass(<class)

Filtrando bebidas em promoção
$(".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");
});

Bebidas destacadas

Qual a solução?
107

Remover a classe que destaca
$(".destacada").removeClass("destacada");
$(".bebida").filter(".promo").addClass("destacada");
});
!
$("#filtros").on('click', '.filtro-sem-alcool', function() {
$(".destacada").removeClass("destacada");
$(".bebida").filter(".sem-alcool").addClass("destacada");
});

Bebidas destacadas

Revelando elementos
110

Página de receitas

Apresentando a receita
<ul id="bebidas">
<button>Receita completa</button>
<ul class="receita">
<li>Passo 1</li>
<li>Passo 2</li>
<li>Passo 3</li>
</ul>
</li>
.receita { display: none; }

<ul id="bebidas">
<li>Passo 1</li>
<li>Passo 2</li>
<li>Passo 3</li>
</ul>
</li>
.slideDown() .slideUp() .slideToggle()

<ul id="bebidas">
<li>Passo 1</li>
<li>Passo 2</li>
<li>Passo 3</li>
</ul>
</li>
Quando clicar
no <button>
aparecer a
<ul> receita
$(".bebida").on("click", "button", function() {
$(this).closest(".bebida").find(".receita").slideDown ();
});

Outro evento
Aparecer quando passarmos o mouse por cima do nome da bebida

116
Escolhendo o evento
});
!
$(“.bebida").on("?", "h3", function() {
});
click
dbclick
focusin
focusout
mousedown
mouseup
mousemove
mouseout
mouseenter
mouseleave
diferenças em: http://www.quirksmode.org/js/events_mouse.html

Escolhendo o evento
});
!
$(“.bebida").on("mouseenter", "h3", function() {
});

Ok!
Aparecer quando passarmos o mouse por cima do nome da bebida

Mais uma refatoração
});
!
$(“.bebida").on("mouseenter", "h3", function() {
});
function exibirReceita(){
$(this).closest(".bebida").find(".receita").slideDown();
});

Eventos do teclado
120

Atualizando dados

Eventos de teclado
<div class="bebida" data-preco="15">
<p>R$ 15,00 por cada</p>
<input type="text" class="quantidade" value="1" />
</p>
<p>Preço total: R$ <span id="total">R$ 15</span>,00</p>
</div>
quando for alterado
alterar também o total

Eventos de teclado
$(“.bebida”).on("???", ".quantidade", function() {
!
!
});
keypress keydown keyup
http://api.jquery.com/category/events/keyboard-events/

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

Eventos de teclado
!
!
!
});
// Recuperar a quantidade de bebida
var quantidade = $this).val();
"2"
var quantidade = +$(this).val();
2

Eventos de teclado
!
!
!
});
$("#total").text(preco * quantidade);

Eventos de teclado
!
!
!
});
$("#total").text(preco * quantidade);
Assim o valor atualizará
imeditamente

Jquery

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Jquery

Semelhante a Jquery (20)

Mais de Eduardo Mendes

Mais de Eduardo Mendes (20)

Jquery