jQuery

Apostila Básica

Escrito por: Daniel de Campos Souza

INTRODUÇÃO CAPÍTULO 1 – POR ONDE INICIAR CAPÍTULO 2 – MEU PRIMEIRO SCRIPT!

3 3 4

EXERCÍCIOS .....................................................................................................................................5 CAPÍTULO 3 – ADICIONANDO CSS 6

EXERCÍCIOS .....................................................................................................................................7 CAPÍTULO 4 – MODIFICANDO APENAS PARTE DO DOCUMENTO 7

EXERCÍCIOS .....................................................................................................................................9 CAPÍTULO 5 – HIDE E SHOW 10

EXERCÍCIOS …exibir mais conteúdo…

Use ponto e virgula (;) para separar as linhas de comando e evitar erros de sintaxe. Esta linha inicial é de uso essencial, para não dizer obrigatório, no funcionamento do seu arquivo jQuery. Todos os comandos que usaremos no documento serão enlaçados 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”); });

jQuery – Apostila Básica

Escrito por: Daniel de Campos Souza

4

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 cifrão informa que elemento será alterado. Nesse caso a tag (“a”).

Observações: Nós não usamos aspas no elemento document pois o mesmo se refere à página 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 código HTML simples em seu arquivo HTML. Não se preocupe com formatação, apenas tenha certeza de ter feito as devidas referências aos documentos .js. Crie o seguinte código em seu documento HTML: clique aqui

Salve o