Prática para exercitar a biblioteca jQuery
Envolva todos os parágrafos p, dentro dos quais
existe uma tag b,
em uma tag div.
Encontre todos os parágrafos p com a classe
www, coloque o texto
'!' no início deles,
em seguida, adicione a esses parágrafos
também os títulos h1-h6 e
pinte esses parágrafos e títulos de vermelho.
Encontre todos os parágrafos p e substitua-os
pela tag div com o mesmo conteúdo.
Encontre todas as caixas de seleção na página e desabilite as pares entre as encontradas.
Defina para todas as
caixas de seleção não desabilitadas
o status <a href="/pt/markup/manual/html/attr/checked/">'marcado'</a>.
Dado o elemento #test. Defina para seu vizinho
imediato acima o texto '!', e para o vizinho
abaixo - o texto '?'. Resolva o problema com uma
única cadeia.
Dado o elemento #test. Defina para seus vizinhos
imediatos acima e abaixo o texto do elemento #test.
Dado o elemento #test. Encontre entre seus vizinhos acima
o parágrafo mais próximo e defina para ele o texto do elemento
#test.
Encontre o segundo li na página,
adicione a ele a classe www, envolva-o
internamente com a tag i, insira após
ele um li com o texto 'olá'.
Encontre o décimo li na página,
encontre seu pai, obtenha o vizinho
imediato do pai acima, envolva-o em
<div class="www"></div>.
Adicione ao final de cada parágrafo p, exceto dos parágrafos
com a classe www, o seu número de ordem.
Encontre todos os parágrafos p e coloque
uma cópia de cada parágrafo antes dele. Pinte a cópia
de vermelho e o parágrafo original de verde.
Encontre os parágrafos p que estão
imediatamente abaixo de um h2
e mova cada parágrafo para que ele
fique imediatamente acima do h2.
Encontre todos os parágrafos vazios p
(sem texto) e insira neles o texto
do vizinho imediato acima.
Para o pai da tag b, se for
um elemento com a classe www ou um parágrafo
p, defina a cor vermelha e
tamanho
de texto de 30px.
Para todos os parágrafos vazios p defina
o texto da tag h2 mais próxima acima deles.
Dados campos de entrada com números. Faça com que nos campos de entrada fiquem os quadrados desses números.
Dado o elemento #test. Coloque no início dele o texto
do vizinho imediato acima, e no final
- o texto do vizinho imediato abaixo.
Dado o elemento #test. Encontre seu segundo vizinho
acima e seu segundo vizinho abaixo. Faça
com que os elementos encontrados troquem
os textos (o vizinho acima pegará o texto do vizinho
abaixo e vice-versa).
Dado o elemento div. Selecione
dele todos os filhos diretos, que
não são títulos e pinte-os de
vermelho.
Encontre todos os parágrafos p, pinte-os
de vermelho. Em seguida, selecione entre os encontrados
os parágrafos com a classe www e defina
para eles o texto '!'.
Encontre todos os parágrafos p com a classe
www, pinte-os de vermelho.
Em seguida, selecione entre os parágrafos encontrados o primeiro
e defina para ele o texto '!', depois selecione
o último e defina para ele o texto '?'.
Resolva o problema com uma única cadeia.
Encontre todos os parágrafos p, defina
para cada um deles no final o mesmo texto que
está dentro dele (ou seja, o texto no parágrafo
ficará escrito duas vezes).
Encontre todos os parágrafos p, defina
para cada um deles no final o seu número de ordem
no conjunto.
Dados parágrafos com números. Defina para cada um deles no final o número que está armazenado nele, multiplicado pelo seu número de ordem no conjunto.
Ao clicar em um parágrafo p exclua
seus vizinhos imediatos acima e abaixo.
Ao clicar em um parágrafo p exclua
todos os seus vizinhos acima até o primeiro título
h1-h6 (ou seja, os elementos que estão
acima desse título e o próprio título
não devem ser excluídos).
Ao clicar em um parágrafo p exclua
seu vizinho inferior mais próximo com
a classe www.
Ao clicar em um parágrafo p exclua
seu quinto vizinho abaixo.
Ao clicar em um parágrafo p exclua
seu quinto vizinho abaixo, se este não for
um h2.
Ao clicar em um parágrafo p exclua
seu quinto vizinho abaixo, se este vizinho
não tiver dentro dele a tag b.
Ao clicar em um parágrafo p exclua
seu quinto vizinho abaixo, se este vizinho
não estiver imediatamente após um h2.
Dado o elemento #test. Troque este
elemento de lugar com seu vizinho
imediato abaixo.
Dado o elemento #test. Após seu
vizinho imediato abaixo, insira
uma cópia do nosso elemento.
Dado o elemento #test. Troque este
elemento de lugar com seu vizinho mais próximo
abaixo com a classe www.
Encontre todos os parágrafos p que
dentro de um mesmo pai estão entre um
e outro h2.
Envolva cada parágrafo p por fora
e por dentro em um div.
Encontre todos os parágrafos p, cujo
pai imediato não é um div
e envolva cada um deles em <div class="www"></div>.
Encontre todos os parágrafos p. Remova
seu pai (faça um unwrap nele),
se este pai não for um div com a classe
www. Em seguida, para os parágrafos cujos
pais foram removidos, envolva-os em um div
com a classe zzz.
Encontre todos os pais do elemento #test
e crie um array com as classes CSS desses pais.
Encontre todos os parágrafos p que possuem
o atributo class, e envolva cada um deles
em um div com as mesmas classes
do parágrafo encontrado, e remova as classes de cada
parágrafo junto com o atributo class.
Encontre todos os parágrafos p dentro de
#test, defina para eles no final o texto
'!', em seguida, exclua dos encontrados
os parágrafos com a classe www e defina
para os restantes a cor vermelha.
Encontre todos os li na página,
em seguida, antes do penúltimo dos encontrados, insira
mais um li com o texto 'item'.
Encontre todos os li na página,
em seguida, selecione entre os encontrados o segundo, o terceiro
e o quarto a partir do final e defina para eles o texto
'!'.
Encontre o ol com #test
e reorganize todos os li
nele em ordem inversa.
Dado o elemento #test. Encontre todos os seus
vizinhos acima e todos os seus vizinhos abaixo e
troque-os de lugar (ou seja, tudo que está
antes do elemento deve ficar após ele e vice-versa).
Obtenha todos os li com a classe
www, defina a cor vermelha para eles, em seguida
encontre entre os encontrados aqueles li,
que possuem a classe bbb e exclua-os.
Resolva tudo com uma única cadeia.
Obtenha todos os li na página. Torne os pares
dentre os obtidos vazios, e
exclua os ímpares.
Encontre todas as tags div e dobre
sua altura.
Encontre a soma das alturas de todos os div
na página.
Para o elemento #test encontre o pai
mais próximo com a classe www, no final deste
pai adicione um parágrafo com o texto '!'.
Ao clicar no elemento #test encontre seu
pai mais próximo com a classe www, dentro
deste pai encontre todos os parágrafos e pinte-os
de vermelho.
Pinte os primeiros 10 li
na página de vermelho.
Pinte do 5-º ao 10-º li
na página de vermelho.
Encontre os últimos 10 li
na página, pinte-os de vermelho.
Em seguida, entre os encontrados, encontre os li pares
e envolva-os internamente na tag b.
Na página, são dados caixas de seleção. Conte quantas delas estão marcadas.
Dadas 5
caixas de seleção.
Faça com que após o usuário
marcar duas delas, todas as caixas de seleção
fiquem desabilitadas.
Faça com que todas as caixas de seleção marcadas mudem seu estado para desmarcado e vice-versa.
Dado um campo de entrada.
Mova o conteúdo do atributo value para o atributo
placeholder,
e remova completamente o próprio atributo value.
Dado um link.
Se o atributo href começar com http://,
adicione ao link o atributo target="_blank".
Dado um campo de entrada, no qual pode ser inserido um número. Faça com que, ao inserir um número neste campo e perder o foco, na página seja procurada uma caixa de seleção com esse número e ela se torne marcada, e as demais caixas de seleção se tornem desmarcadas.
Dado um seletor e botões de rádio, a quantidade de botões de rádio é igual à quantidade de itens no seletor. Faça com que ao selecionar um item no seletor, automaticamente se torne marcado o botão de rádio correspondente (correspondência pelo número de ordem: primeiro item da lista - primeiro botão de rádio e assim por diante).