Introdução ao jQuery
Lista de atividades
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#esconder").bind("click",function(){
$("img").hide();
alert("imagens ocultadas");
});
$("#remover").bind("click",function(){
$("#esconder").unbind("click");
alert("botão esconder foi desabilitado");
});
});
</script>
</head>
<body>
<button id="esconder">Esconder imagens</button> <button id="remover">Remove evento</button> <img src="../images/g650.jpg" height="200"> <img src="../images/c400.jpg" height="200">
</body>
</html>
Nesse exemplo também usamos a função unbind. É o que acontece quando o botão remover é clicado. Aqui fazemos um unbind do evento click no botão esconder. A função unbind remove o ouvinte de um determinado evento. Isso é útil quando precisamos desabilitar uma funcionalidade associada a um evento. A função bind é, na verdade, uma função proxy, que por "baixo dos panos" chama a função on(). Portanto, o mais indicado é usar a função on() ao invés da função bind();
Lista de atividades
1. Considere o código HTML abaixo e escreva a função seletora
para:
a. Selecionar todas as tags <span>
b. Selecionar apenas as universidades cuja classe é
"b"
c. Selecionar a lista de universidades do Paraná
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<title>Lista de universidades</title>
</head>
<body>
<h2>Lista de universidades federais</h2> <span class="estado">Rio Grande do Sul</span> <ul id="lista_rs">
<li class="a">UFRGS</li>
<li class="b">UNIPAMPA</li>
<li class="b">UFPEL</li>
</ul>
<span class="estado">Paraná</span> <ul id="lista_pr">
<li class="b">UNILA</li>
<li class="b">UFPR</li>
<li class="c">UTFPR</li>
</ul>
</body>
</html>
2. Implemente no jQuery a tela abaixo, onde o usuário pode
digitar algo, e clicar no botão "alterar". Quando o botão é clicado, o texto digitado é copiado para dentro da div, substituindo o "Texto inicial da div".
Veja o que acontece depois que o usuário digita algo e clica no botão alterar:
3. Continue o exercício 2, colocando agora uma caixa de seleção
com 3 opções de cores (azul, amarelo e laranja). Quando o usuário selecionar uma cor, esta deverá ser aplicada como cor de fundo da div.
Depois de selecionada a cor, o resultado será:
4. Faça uma tabela contendo 6 carros que, ao clique do usuário,
seleciona a célula marcando-a com fundo vermelho. Se clicar novamente na célula, a célula é desmarcada voltando a sua cor inicial (#CCC).
5. Elabore a página abaixo que, quando o usuário seleciona uma
categoria na select filtrar, apenas os produtos daquele tipo são exibidos e o restante é ocultado. Faça 3 categorias: notebooks, câmeras e smartphones.
OceanofPDF.com