este capítulo é novo 123
Modele o DOM
O fato de termos
os mesmos pais não
nos torna elementos
iguais!
Só porque a página terminou de ser carregada, não significa que ela tenha
de manter a mesma estrutura. No Capítulo 1, vimos como o DOM é construído,
enquanto a página é carregada para configurar a estrutura da página. Neste capítulo,
veremos como ir para cima e para baixo, através da estrutura do DOM, e trabalhar
com a hierarquia do elemento e relacionamento pai/filho, para mudar a estrutura da
página instantaneamente, usando jQuery.
4
manipulação de página web com jQuery
BOOK - UCjQuery - PRODUTO FINAL.indb 123 16/05/2013 10:47:47
124 Capítulo 4
uma página para comandar todas outras
O Restaurante da Weblândia quer um menu interativo
Alexandra, a chefe de cozinha do Restaurante da Weblândia, tem um trabalho para você.
Ela vem mantendo páginas web separadas para versões diferentes do seu menu: o menu
convencional e o menu com substituições vegetarianas. Ela quer que você faça uma página
que ajuste o menu aos clientes vegetarianos do restaurante.
Colocamos nosso menu na web há alguns
anos atrás, e nossos clientes o adoram!
Gostaríamos que você acrescentasse
alguns botões que permitam que nossos
clientes mudem e destaquem o menu
web instantaneamente.
BOOK - UCjQuery - PRODUTO FINAL.indb 124 16/05/2013 10:47:49
você está aqui 125
manipulação de página web com jQuery
Vire vegetariano
Veja o que Alexandra gostaria que você fizesse.
Antes de escrevermos qualquer coisa em jQuery,
vamos dar uma olhada nos arquivos HTML e CSS
que o web designer nos enviou e ver se seu estilo e
estrutura são aceitáveis.
Queremos um botão “Vire Vegetariano” que substitua
automaticamente as opções vegetarianas no menu da nossa
página web.
Veja como funciona nossa substituição:
– Não oferecemos substituições para nossas entradas de
peixes; portanto, precisamos removê-las.
– Oferecemos cogumelos portobello gigantes como
substitutos vegetarianos de nossos hambúrgueres.
– Oferecemos tofu como substituto vegetariano para todos
os pratos com carne e ovo, exceto hambúrgueres.
– Precisaremos de um botão que restaure o menu ao seu
estado original.
Obs.: Se puder ajustar isso, também gostaríamos que o
ícone de uma folha aparecesse ao lado das entradas
vegetarianas substitutivas.
Eu pedi que o web designer lhe enviasse os arquivos
do menu atual para que você possa começar.
Não há exercício para isso dessa
vez – provavelmente porque você
já esteja pensando nele – mas
certifique-se de escrever com
suas próprias palavras quais são
as requisições para saber o que
construirá aqui.
O
R
e
s
t
a
u
r
a
n
t
e
W
e
b
l
â
n
d
i
a
BOOK - UCjQuery - PRODUTO FINAL.indb 125 16/05/2013 10:47:50
126 Capítulo 4
construa sua árvore do DOM
Isso é apenas um fragmento
da verdadeira página HTML.
<body>
<div id="menu_wrapper">
<div class="left_col">
<h4>Dinner Entrees</h4>
<ul class="menu_entrees">
<li>Thai-style Halibut
<ul class="menu_list">
<li>coconut milk</li>
<li>pan-fried halibut</li>
<li>early autumn vegetables</li>
<li>Thai spices </li>
</ul>
</li>
<li>House Grilled Panini
<ul class="menu_list">
<li>prosciutto</li>
<li>provolone</li>
<li>avocado</li>
<li>sourdough roll</li>
</ul>
</li>
<li>Southwest Slider
<ul class="menu_list">
<li>whole chiles</li>
<li>hamburger</li>
<li>pepperjack cheese</li>
<li>multigrain roll</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
index.html
Ímãs de Geladeira da Árvore do DOM
Aprofunde-se na estrutura atual do menu web, diagramando como o DOM
o vê. Abaixo, você encontrará todos os ímãs dos elementos que você
precisa para completar a árvore. Complete-a, usando o fragmento HTML
do menu à direita. Cada ímã se encaixará onde você vê um círculo vazio.
Já fizemos alguns para você.
body
h4
li
li
li
ul class=
"menu_list"
li
li
li
li
li
li
li
li
li
li
li
li
ul class=
"menu_list"
ul class=
"menu_list"
ul class=
"menu_entrees"
div class=
"left_col"
div class=
"menu_wrapper"
BOOK - UCjQuery - PRODUTO FINAL.indb 126 16/05/2013 10:47:51
você está aqui 127
manipulação de página web com jQuery
Isso é apenas um fragmento
da verdadeira página HTML.
<body>
<div id="menu_wrapper">
<div class="left_col">
<h4>Dinner Entrees</h4>
<ul class="menu_entrees">
<li>Thai-style Halibut
<ul class="menu_list">
<li>coconut milk</li>
<li>pan-fried halibut</li>
<li>early autumn vegetables</li>
<li>Thai spices </li>
</ul>
</li>
<li>House Grilled Panini
<ul class="menu_list">
<li>prosciutto</li>
<li>provolone</li>
<li>avocado</li>
<li>sourdough roll</li>
</ul>
</li>
<li>Southwest Slider
<ul class="menu_list">
<li>whole chiles</li>
<li>hamburger</li>
<li>pepperjack cheese</li>
<li>multigrain roll</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
index.html
Ímãs de Geladeira da Árvore do DOM
Aprofunde-se na estrutura atual do menu web, diagramando como o DOM
o vê. Abaixo, você encontrará todos os ímãs dos elementos que você
precisa para completar a árvore. Complete-a, usando o fragmento HTML
do menu à direita. Cada ímã se encaixará onde você vê um círculo vazio.
Já fizemos alguns para você.
body
h4
li
li
li
ul class=
"menu_list"
li
li
li
li
li
li
li
li
li
li
li
li
ul class=
"menu_list"
ul class=
"menu_list"
ul class=
"menu_entrees"
div class=
"left_col"
div class=
"menu_wrapper"
BOOK - UCjQuery - PRODUTO FINAL.indb 127 16/05/2013 10:47:51
Get Use A Cabeça jQuery now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
