128 Capítulo 4
ímãs de geladeira do DOM solução
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
body
h4
li
li
li
ul class=
"menu_list"
li
li
li
li
li
li
li
li
li
li
li
li
Cada entrada do menu é um item da lista...
Felizmente, o menu web
atual possui uma estrutura
consistente para isso.
...com a lista de
ingredientes (ul.menu_
list), como um elemento
da lista não ordenado
aninhado.
Cada ingrediente em cada
entrada é um item da lista.
O menu usa uma lista
não ordenada para
manter as entradas.
ul class=
"menu_list"
ul class=
"menu_list"
ul class=
"menu_entrees"
div class=
"left_col"
div class=
"menu_wrapper"
Precisamos escrever seletores que procurarão os ingredientes
que precisamos mudar. Nesse nível, eles são todos elementos
da lista...
...portanto, como podemos
distinguir os ingredientes
que queremos substituir do
restante?
Ímãs de Geladeira da Árvore do DOM - Solução
Parece que todos os ingredientes estão configurados como itens da lista filho
dos itens da lista pai de entrada. Eles não estão nomeados de forma clara ou
exclusivamente, estão?
BOOK - UCjQuery - PRODUTO FINAL.indb 128 16/05/2013 10:47:52
você está aqui 129
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
body
h4
li
li
li
ul class=
"menu_list"
li
li
li
li
li
li
li
li
li
li
li
li
Cada entrada do menu é um item da lista...
Felizmente, o menu web
atual possui uma estrutura
consistente para isso.
...com a lista de
ingredientes (ul.menu_
list), como um elemento
da lista não ordenado
aninhado.
Cada ingrediente em cada
entrada é um item da lista.
O menu usa uma lista
não ordenada para
manter as entradas.
ul class=
"menu_list"
ul class=
"menu_list"
ul class=
"menu_entrees"
div class=
"left_col"
div class=
"menu_wrapper"
Precisamos escrever seletores que procurarão os ingredientes
que precisamos mudar. Nesse nível, eles são todos elementos
da lista...
...portanto, como podemos
distinguir os ingredientes
que queremos substituir do
restante?
Ímãs de Geladeira da Árvore do DOM - Solução
Parece que todos os ingredientes estão configurados como itens da lista filho
dos itens da lista pai de entrada. Eles não estão nomeados de forma clara ou
exclusivamente, estão?
A estrutura regular da página web (HTML) facilita muito a escrita do código jQuery, mas
os elementos dos ingredientes que queremos encontrar não estão nomeados de uma
maneira que facilitará a escrita do código jQuery. Como podemos facilitar a seleção de
nossos elementos?
BOOK - UCjQuery - PRODUTO FINAL.indb 129 16/05/2013 10:47:53
130 Capítulo 4
você disse que era da classe alta...
Crie classes para seus elementos
Como vimos em cada capítulo até aqui, podemos ajudar o jQuery a procurar elementos nas
páginas web mais efetivamente, configurando nosso HTML e CSS adequadamente. Para
fazer nossa estrutura cantar, devemos acrescentar classes e IDs em nossa folha de estilo e
definir os atributos dos elementos HTML com as classes e IDs apropriados. Isso facilita a
seleção dos elementos e poupa seu tempo para codificação posteriormente.
No jQuery, os seletores não estão apenas controlando a aparência da sua página. Os
seletores também permitem que o jQuery relacione (ou busque) os elementos da página.
.meat
<li class="meat">turkey</li>
<li class="meat">chicken</li>
<li class="meat">eggs</li>
<li class="meat">lamb shoulder</li>
Você pode escrever um seletor para cada
ingrediente que precisar relacionar...
...ou você pode agrupá-los
em uma classe e escrever um
seletor que relacione todos eles.
<li>turkey</li><li>chicken</li> <li>eggs</li>
<li>lamb shoulder</li>
Ao definir o atributo de
classe do elemento da lista,
você o coloca dentro do
grupo meat.
Como eu vim
parar na seção
de “carnes”?
Ok, então meat (carne)
não é uma classificação
apropriada de mercearia
em cada um desses itens,
mas um nome de classe
bom e breve.
BOOK - UCjQuery - PRODUTO FINAL.indb 130 16/05/2013 10:47:55
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.
