Escolar Documentos
Profissional Documentos
Cultura Documentos
Jquery Basico
Jquery Basico
Apostila Bsica
3 3 4
EXERCCIO.....................................................................................................................................12
Introduo
jQuery no uma nova linguagem de programao, antes, trata-se de uma compilao do JavaScript. Para utiliz-la, basta referenciar o arquivo .js do jQuery em sua pgina e voc j pode usar esta linguagem com prazer. Recomendo que todo o cdigo produzido tambm esteja em um arquivo externo; isso diminu o tamanho final de sua pgina HTML e tambm assegura que o cdigo no ficar exposto, tornando as coisas mais fcies, caso voc queira mudar um cdigo que aparea em todas as suas pginas
Certifique-se de que a referncia biblioteca seja feita antes da referencia ao seu arquivo .js, caso contrrio o navegador no ir interpretar corretamente os cdigos desnvolvidos. Agora crie um arquivo .js em branco, nele iremos desenvolver todas as lies. Faa a referncia a ele em sua pgina HTML.
Observaes: Sua biblioteca jQuery (assim como qualquer outro arquivo) pode ser salva em qualquer pasta com qualquer nome, desde que no momento da referenciao todos os parmetros estejam corretos.
Vamos analizar parte por parte deste cdigo. Usa-se o cifro ($) para referir-se a modificao de um elemento (podendo ser desde uma tag at uma classe e ID CSS). Usamos os parnteses aps o cifro para identificar qual elemento ser modificado. Neste caso, nos referimos ao documento como um todo, pois os cdigos que sero introduzidos iro alterar o contedo do documento. A funo .ready informa ao navegador que os commandos devem ser executados quando o documento estiver pronto (navegvel). Adicionamos o parentese aps o .ready para informar ao navegador que os comandos enlaados pelos parnteses devero ser executados no momento em que o documento for navegvel. O uso de function enlaa todos os comandos que devero ser executados. Use os colchetes e parnteses para fechar o enlace. Use ponto e virgula (;) para separar as linhas de comando e evitar erros de sintaxe. Esta linha inicial de uso essencial, para no dizer obrigatrio, no funcionamento do seu arquivo jQuery. Todos os comandos que usaremos no documento sero enlaados por esta linha de comando. Agora que entendemos como o navegador ir interpretar os comandos, vamos construir nosso primeiro script; o famoso ol mundo.
$(document).ready(function () { alert(ol mundo); });
Em suma, neste comando, estamos informando ao navegador que, assim que o documento estiver pronto, ele deve escrever na tela ol mundo. Esse texto ser exibido em uma janela de alerta. timo! Agora vamos tentar o mesmo comando s que de uma forma um pouco diferente:
$(document).ready(function () { $(a).click(function() { alert(ol mundo); }); });
Como j foi passado o uso do cifro informa que elemento ser alterado. Nesse caso a tag (a).
Observaes: Ns no usamos aspas no elemento document pois o mesmo se refere pgina como um todo, diferente da tag a que se refere apenas a ela e/ou seus elementos filhos (caso a tag possua algum).
Feito isto, construa um cdigo HTML simples em seu arquivo HTML. No se preocupe com formatao, apenas tenha certeza de ter feito as devidas referncias aos documentos .js. Crie o seguinte cdigo em seu documento HTML:
<body> <p><a href=#>clique aqui</a></p> </body>
Salve o documento e abra-o em seu navegador, clique no link e veja o resultado. Agora vamos estudar o caso. Quando fizemos a referncia tag a e usamos o comando .click , informamos ao navegador que uma ao deveria ser executada; nesse caso o comando alert que exibir o texto ol mundo.
Exerccios
1) Crie um comando que exiba uma mensagem, avisando ao usurio que ele clicou em um link. 2) Em uma pgina HTML o usurio dever ser informado de que o link clicado est funcionando, escreva um comando que faa isso.
Observao: Atente ao correto uso das letras maisculas em todos os comandos, para evitar erros de sintaxe
Agora vamos fazer com que, ao clicarmos no link, seja possvel adicionar a classe .teste tag <p>. Exemplo
$(document).ready(function () { $(a).click(function() { $(p).addClass(teste); }); });
Agora, quando clicarmos no link, uma borda, de espessura media, pontilhada e vermelha, ir aparecer ao redor do texto. Tambm podemos adicionar uma formatao CSS direto tag, usando o comando .css(). Dentro dos parnteses, coloque a formatao desejada.
Exemplo
$(document).ready(function () { $(a).click(function() { $(p).css(border, 3px dashed red); }); });
Exerccios
1) Crie um comando que, quando o usurio clicar no link, o navegador adicione uma borda azul, com 4 pixels de espessura e que seja tracejada, esta formatao deve ser uma classe CSS do seu documento anexo ou que esteja entre as tags <style></style> do seu documento HTML. 2) Modifique este comando para que os atributos sejam adicionados diretamente tag.
Agora, em seu documento HTML, crie duas listas com marcadores, ou no classificadas (<ul></ul>), com, no mnimo, dois itens; d a uma das listas o ID lista_teste. Em seu documento .js, crie o seguinte comando:
$(document).ready(function () { $(#lista_teste).hover(function() { $(this).addClass(fundo); }, function() { $(this).removeClass(fundo); }); });
Com esse comando voc ur modificar apenas os itens que conetenham a ID lista_teste, no momento em que voc passer o mouse sobre eles. Agora, vamos aprofundar o cdigo ainda mais. Ao invs de modificar a lista toda, que tal modificar apenas um nico item dessa lista? Para isso, no seu documento .js, escreva o seguinte comando:
$(document).ready(function () { $(#lista_teste li:last).hover(function() { $(this).addClass(fundo); }, function() { $(this).removeClass(fundo); }); });
Com isso, apenas o ltimo item da lista ir ser modificado quando voc passar o mouse por cima dele, caso o mouse seja passado no resto da lista, nenhuma alterao ser feita. Agora vamos entender o que ns escrevemos: Aprendemos um comando novo; o (this), ele faz a referncia ao ltimo elemento que foi alterado no script. Nesses casos, o ID lista_teste e o ltimo item desta lista. Agora vamos crier um boto no documento HTML. D a ele o ID botao1. Atualize seu cdigo .js da seguinte forma:
$(document).ready(function () { $(#botao1).click(function() { $(#lista_teste).addClass(fundo); }); });
Dessa forma, toda vez que o usurio clicar no boto que possua o ID botao1, a lista receber a classe fundo. Tambm possvel modificar apenas o ltimo elemento da lista; basta adicionar li:last aps o ID lista_teste. O cdigo ficar assim:
Agora vamos adicionar um boto para remover a classe fundo. Crie em seu documento HTML outro boto e atribua a ele o ID boto2, escreva o seguinte cdigo em seu documento .js:
$(document).ready(function () { $(#botao1).click(function() { $(#lista_teste).addClass(fundo); }); $(#botao2).click(function() { $(#lista_teste).removeClass(fundo); }); });
Para
fazer isso
apenas no ltimo item da lista, basta adicionar li:last aps o ID lista_teste, nas duas vezes em que ela referenciada no cdigo, ficando dessa forma:
$(document).ready(function () { $(#botao1).click(function() { $(#lista_teste li:last).addClass(fundo); }); $(#botao2).click(function() { $(#lista_teste li:last).removeClass(fundo); }); });
Essas funes .addClass e .removeClass podem ser usadas para alterar qualquer tag, porm tome muito cuidado para no usar junto ao evento .hover, pois em alguns casos, como por exemplo textos, pode ser que o pargrafo adicione e remova a classe CSS toda a vez que o ponteiro do mouse oscilar entre o texto e o espao em branco.
Exerccios
1) Construa um documento que contenha uma lista ordenada(<ol></ol>),e, toda vez que o usurio passar o mouse sobre a lista, ela receba um fundo vermelho. 2) Crie um documento, com dois pargrafos, onde haja dois botes; um que adicione uma borda preta ao redor do pargrafo e outro que remova essa borda
Este comando pode ser aplicado diretamente uma ID, ao invs de tag, possibilitando um melhor uso desta funo.
Exerccios
1) Crie um documento com dois pargrafos e dois botes, um ir esconder os pargrafos e o outro ir exibi-los. 2) Modifique o documento para que apenas um pargrafo seja escondido e exibido.
Esta linha de comando faz com que cada elemento definido seja alterado; alguns comandos como o .addClass j fazem isto internamente.
10
O comando .html busca a tag definida e faz a alterao. Voc pode usar o .find e .each para alterar qualquer tag, mas, no caso de tags que no possuam filhos (ex: <p>), voc deve definir a busca dentro da tag <body>. Exemplo
$(document).ready(function () { $(body).find(p).each(function() { $(this).html($(this).html() + ol); }); });
Exerccios
1) Construa uma lista ordenada (<ol></ol>) e, para cada elemento, adicione ao final a palavra item. 2) Crie dois pargrafos, e um comando que adicione, ao final de cada um, a frase: fim do pargrafo.
Captulo 7 If e Else
Assim como no JavaScript e em qualquer outra linguagem programao, o uso do if e else nos ajuda a no s extender a funcionalidade, mas tambm as possibilidades de uso do seu cdigo. Podemos usar esse comando para criar novos eventos quando um outro tenha sido concludo, como por exemplo, para verificar se um formulrio foi corretamente preenchido. Exemplo: Supondo que em um documento HTML haja um formulrio, Observao: Os mesmos elementos de comparao do JavaScript so usados no jQuery, porisso se faz necessrio um conhecimento bsico desta linguagem para o uso do jQuery.
onde alguns de seus campos necessitem estar iguais, pode-se usar o seguinte cdigo, tendo como base que so dois campos; um com ID campo1 e o outro com ID campo2, e o boto submit com ID bot1:
$(document).ready(function() { $("#bot1").click(function() { if ($("#campo1").val() != $("#campo2").val()) { alert("favor preencher os campos corretamente"); } else { alert("campos preenchidos corretamente"); } }); });
11
A sintaxe de verificao a mesma que a do JavaScript. Para usar o if e o else, basta indicar quais os campos (ou IDs), e quais os dados devem ser verificados. O comando .val() indica ao navegador que o conteudo dos campos deve ser verificado. Note que para fazer a comparao do IDs necessrio o uso do cifro ($) para que o navegador no entenda isso como uma string.
Exerccio
Crie um formulrio onde o usurio deve preencher um campo igual ao outro, e, caso no sejam iguais, o navegador deve alert-lo; caso sejam, dever aparecer a mensagem de que tudo foi preenchido corretamente.
Parabns, voc acaba de concluir sua introduo ao jQuery! Estude profundamente e pesquise mais para dominar esta poderosa ferramenta.
12