Escolar Documentos
Profissional Documentos
Cultura Documentos
JQuery
JQuery
Apostila Bsica
INTRODUO
EXERCCIOS .....................................................................................................................................5
CAPTULO 3 ADICIONANDO CSS
EXERCCIOS .....................................................................................................................................7
CAPTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO
EXERCCIOS .....................................................................................................................................9
CAPTULO 5 HIDE E SHOW
10
EXERCCIOS ...................................................................................................................................10
CAPTULO 6 FIND E EACH
10
EXERCCIOS ...................................................................................................................................11
CAPTULO 7 IF E ELSE
11
EXERCCIO.....................................................................................................................................12
Escrito por:
Daniel de Campos Souza
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
Observaes:
Sua biblioteca jQuery (assim como
qualquer outro arquivo) pode ser salva
em qualquer pasta com qualquer
estejam corretos.
Escrito por:
Daniel de Campos Souza
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);
});
Escrito por:
Daniel de Campos Souza
Observaes:
Ns no usamos aspas no elemento
document pois o mesmo se refere
documentos .js.
possua algum).
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.
Escrito por:
Daniel de Campos Souza
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);
});
});
Escrito por:
Daniel de Campos Souza
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.
Escrito por:
Daniel de Campos Souza
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 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:
Escrito por:
Daniel de Campos Souza
$(document).ready(function () {
$(#botao1).click(function() {
$(#lista_teste li:last).addClass(fundo);
});
});
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:
Para
$(document).ready(function () {
$(#botao1).click(function() {
$(#lista_teste).addClass(fundo);
});
$(#botao2).click(function() {
$(#lista_teste).removeClass(fundo);
});
});
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
Escrito por:
Daniel de Campos Souza
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.
Escrito por:
Daniel de Campos Souza
10
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");
}
});
});
Escrito por:
Daniel de Campos Souza
11
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.
Escrito por:
Daniel de Campos Souza
12