Exercícios jquery
Para cada alteração solicitada, foi criada uma função nos arquivos indicados, os quais foram submetidos compactado juntamente com este. As funções estão aptas para serem executadas no evento ready do documento. Exercícios
Lista 1
Abra o arquivo index.html no seu navegador. Use o arquivo sandbox.js e trabalhe no
Firebug para fazer o seguinte:
1. Selecione todos os elementos DIV que têm a classe "module".
Resposta:
Utilize o comando $('div.module')
Função criada: function readyMod(){
$('div.module').css( 'background', 'yellow' );
}
2. Escreva três seletores que você pode usar para obter o terceiro item na lista não ordenada #myList. Qual é o melhor para se usar? Por quê?
Resposta : a melhor forma é pelo id do item #myListItem, o que oferece uma busca mais ágil. Função criada function readyList3(){
$('#myListItem').css ('color', 'blue');
}
Outra forma
$('#myList li').eq(2).css ('color', 'yellow');
3. Selecione o label para o input de busca usando um seletor de atributo.
Função criada: function readyLabel(){
$('label[for=q]').css ('color', 'yellow');
}
4. Encontre quantos elementos na página estão escondidos (dica: .length).
Função criada: function readyOculto(){ var totalOcultos = $(':hidden', $('body')).length;
$('Elementos Ocultos ('+totalOcultos+') ').prependTo('body');
}
5. Encontre quantos elementos na página têm um atributo alt.
Resposta : 3 elementos(fruit, vegetable e Bread)
$('[alt=fruit]')
6. Selecione todas as linhas ímpares no corpo de uma tabela.
Função criada: function linhaimpar(){
$('tr:odd').css('color','green');
}
Resposta:
$('tr:odd').css('color','green');
Lista 2
Abra o arquivo index.html no seu navegador. Use o arquivo inputHint.js e trabalhe no
Firebug.
Os passos são os seguintes:
1. Sete o valor do input de busca para o texto do elemento label var _text = $('label[for=q]').text();
$('input[name=q]').attr('value',_text);
2. Adicione uma