Olá pessoal. Estamos encerrando o tutorial “Iniciando em JQuery” com a quinta parte (você pode ver os tutorias anteriores clicando aqui, aqui, aqui e aqui).
Até agora aprendemos alguns efeitos bacanas e também a manipular estilos para os elementos de nossa página. Como o Jquery é um “filho” do Javascript, você pode utilizar comandos lógicos aqui também. Para começar, vamos utilizar o condicional If/Else.
“Limpe” o seu código HMTL do tutorial anterior, deixando apenas as estruturas básicas. Adicione agora dois campos para que o usuário digite um texto e um botão – não se esqueça de identifica-los corretamente. Sua página será algo do tipo:
O que faremos agora é comparar o que foi digitado em cada textbox e emitir um alerta para o usuário ao clicar o botão. Até aqui você já deve saber o que fazer, certo? Tenha bastante atenção com parenteses nos scripts, pois qualquer pareenteses no local errado o seu script não funcionará corretamente.
Assim, nosso script será:
[code language=”javascript”] $(document).ready(function() {$(‘#bntConfere’).click(function() {
if ($(‘#txbSenha’).val() != $(‘#txbSenhaconfere’).val()){
alert(‘Os textos digitados não conferem!’);}
else{
alert(‘Parabéns! Os textos digitados são iguais.’);}
});
});
[/code]Teste os dois casos e vamos em frente. O comando que vamos trabalhar agora é bem parecido com o foreach do C# – vamos percorrer todos os elementos em um div ou outro elemento, a partir de uma busca no mesmo. “Limpe” sua página HTML e crie uma lista de elementos qualquer. O script que utilizaremos aqui é:
[code language=”jscript”]$(document).ready(function () {
var numero = 0;
$(‘#Lista_de_opcoes’).find(‘li’).each(function() {
numero=numero+1;
$(this).html($(this).html() +’Índice: ‘ + numero);
});
});
[/code]
O que fizemos aqui foi o seguinte: Para cada elemento li de Lista_de_opcoes adicionaremos à frente do mesmo, quando a página for carregada, um índice referente. Para que esse valor do índice seja dinâmico, declarei uma variável numero, que é acrescida de um unidade à cada loop na função.
Ao carregar a página, você verá algo do tipo:
Assim terminamos essa série Iniciando em Jquery. Se você chegou até aqui, parabéns! Mas não deixe de continuar os estudos, ainda há muita coisa para aprender! 🙂
