www.webdevbrasil.com.

br

Guia prtico
de JQuery
por WebDev Brasil.

Um Guia prtico e gil, feito para desenvolvedores que querem utilizar esta fantstica biblioteca em suas pginas sem muitos
cdigos e esforo.

V 0.1 12/02/2010
http://www.webdevbrasil.com.br/guia-pratico-jquery

Luiz Eduardo de Oliveira Fonseca

WebDev Brasil
www.webdevbrasil.com.br

Guia Prtico de JQuery WebDev Brasil

Contedo
O Autor......................................................................................................................................................................................................................... 4
Luiz Eduardo de Oliveira Fonseca ............................................................................................................................................................................ 4
Sobre este Guia............................................................................................................................................................................................................ 5
O que JQuery? ........................................................................................................................................................................................................... 6
Baixando e incorporando o JQuery em suas pginas ................................................................................................................................................ 7
Baixando ................................................................................................................................................................................................................... 7
Incorporando ........................................................................................................................................................................................................... 7
Primeiro Exemplo ........................................................................................................................................................................................................ 8
Um problema antigo ................................................................................................................................................................................................ 8
Uma soluo prtica, para um problema antigo .................................................................................................................................................... 8
O que DOM (Document Object Model)? .................................................................................................................................................................. 9
Entendendo o que so os seletores $(element) ....................................................................................................................................................... 10
Identificando um elemento atravs de seu ID ...................................................................................................................................................... 10
Identificando um elemento atravs de uma Classe.............................................................................................................................................. 10
Identificando um elemento atravs de uma Tag .................................................................................................................................................. 11
Aplicando efeitos em um documento HTML ............................................................................................................................................................ 12
O documento HTML ............................................................................................................................................................................................... 12
O documento JQuery.............................................................................................................................................................................................. 13
Usando efeitos com JQuery ....................................................................................................................................................................................... 14
.hide(speed) ............................................................................................................................................................................................................ 14
2

Guia Prtico de JQuery WebDev Brasil

.show(speed) .......................................................................................................................................................................................................... 14
.delay(speed) .......................................................................................................................................................................................................... 14
.fadeIn(speed) ........................................................................................................................................................................................................ 15
.fadeOut(speed) ...................................................................................................................................................................................................... 15
.slideDown(speed) .................................................................................................................................................................................................. 15
.slideUp(speed) ....................................................................................................................................................................................................... 15
Manipulando CSS ....................................................................................................................................................................................................... 16
.addClass(name) ..................................................................................................................................................................................................... 16
.removeClass(name) ............................................................................................................................................................................................... 16
.hasClass(name) ..................................................................................................................................................................................................... 16
Manipulando Atributos ............................................................................................................................................................................................. 17
.attr(name) .............................................................................................................................................................................................................. 17
.attr(name, value) ................................................................................................................................................................................................... 17
.removeAttr(name) ................................................................................................................................................................................................. 17
.val() ........................................................................................................................................................................................................................ 18
.html() ..................................................................................................................................................................................................................... 18

Guia Prtico de JQuery WebDev Brasil

O Autor
Luiz Eduardo de Oliveira Fonseca
Formado como Tcnico em Informtica e Tcnico em Acessoria e Gerenciamento Empresarial pelo Centro
Paula Souza, e atualmente cursando Tecnlogo em Sistemas para Internet na Faculdade Veris IBTA.
Reside em Pindamonhangaba, interior de So Paulo e trabalha com programao Desktop e Web.
Teve o primeiro contato com o Desenvolvimento Web em 2005 e desde ento se especializa em
Tecnologias como PHP, Ruby e Asp.NET, CSS, JQuery, entre outras.
Atualmente est a frente da Agncia Orangeweb (www.orangeweb.com.br) onde desenvolve websites
para pequenas e mdias empresas e do blog WebDev Brasil (www.webdevbrasil.com.br) onde posta
regularmente tutoriais e artigos sobre a arte do desenvolvimento web.
Para entrar em contato, envie um email para luizeof@gmail.com.

Guia Prtico de JQuery WebDev Brasil

Sobre este Guia

Este Guia Prtico do site WebDev Brasil serve como base para o aprendizado de JQuery. O pblico alvo so desenvolvedores web iniciantes
ou at mesmo profissionais que nunca tiveram um contato com a biblioteca JQuery.
Desejo a todos uma tima leitura.

Guia Prtico de JQuery WebDev Brasil

O que JQuery?

Desenvolvimento de um sistema ou um site, sempre nos oferece um desafio: Criar cdigos Javascript. Digamos que no uma das
tarefas mais triviais inserir efeitos em uma pgina, validar um formulrio ou qualquer coisa desse tipo com Javascript. A linguagem
em si incrvel, Orientada a Objetos, Interpretada no Navegador e possui uma sintaxe muito parecida com a linguagem Java, apesar
de serem completamente diferentes em funcionalidades. Mesmo assim criar cdigos Javascript "na unha" hoje em dia considerado uma
gambiarra, pois existem frameworks que nos auxiliam a lidar com essa tarefa de uma maneira muito mais gil e simples de implementar,
dentre as existentes (Dojo, script.aculo.us, ExtJS, etc) a que recebe mais destaque atualmente a JQuery.
O JQuery vai um pouco mais alm de ser um simples framework, ele muda a maneira no qual voc escreve JavaScript. Alm disso, o JQuery
possui suporte Plug-ins, sendo esse o recurso mais interessante do framework. O JQuery tambm possui uma abstrao ao CSS e um
suporte completo a manipulao do DOM, manipulao de eventos, animao e interaes Ajax.
Apesar de ser completo em funcionalidades, o JQuery mantm uma maneira de trabalhar muito simples, muitas vezes podemos realizar
vrios efeitos, validaes e manipulao do documento HTML em poucas linhas.
O JQuery o tipo de framework que voc vai utilizar em todos os seus projetos futuros.

Guia Prtico de JQuery WebDev Brasil

Baixando e incorporando o JQuery em

suas pginas
Baixando
Para baixar o JQuery basta ir ao site oficial www.jquery.com e escolher umas das opes disponveis: Development ou Production, sendo
estas as diferenas:

Development: Esta opo composta pelo cdigo fontes legvel da biblioteca, onde possvel observar como o JQuery foi
desenvolvido e entender melhor o seu funcionamento.
Production: Esta a opo recomendada para ser colocada em produo, ou seja, a verso que deve ser enviada para o servidor
quando o web site for disponibilizado ao pblico.

O JQuery composto por um nico arquivo, que deve ficar hospedado junto aos arquivos do seu web site.

Incorporando
Para incorporar o JQuery ao seu documento HTML, basta digitar isto no <HEAD> do seu documento:
<script type="text/javascript" src="jquery.js"></script>
Agora o seu documento est pronto para receber os comandos do JQuery.

Guia Prtico de JQuery WebDev Brasil

Primeiro Exemplo
uma boa prtica de escrever comandos Javascript em um arquivo externo e incorpor-lo ao documento HTML. Para isso, abra seu editor
Javascript preferido (NetBeans, Aptana, Dreamweaver CS4 e CS5 possuem suporte nativo ao JQuery) e crie um novo documento. Agora
incorpore este arquivo ao seu documento HTML. Neste exemplo, o arquivo se chama application.js.

Um problema antigo
No modo tradicional de programar em javascript, utilizamos o seguinte cdigo para aplicar funes ao evento onLoad do documento:
carrega = function(){ alert(WebDev Brasil); }
window.onload = carrega();
O que acontece, que esse cdigo ser executado enquanto a pgina esta sendo carregada, ou seja, enquanto o DOM ainda no estiver
totalmente disponvel, e isso muitas vezes pode ser um problema.

Uma soluo prtica, para um problema antigo

O JQuery faz uma abstrao dos eventos do Javascript, sendo assim, os comandos devem ficar contidos na seguinte estrutura:
// arquivo application.js
$(document).ready(function(){
alert(WebDev Brasil);
});
Esta estrutura, deve ser seguida em todos os arquivos JQuery. Ela garante que o cdigo JQuery s estar disponvel ou s ser executado
quando a pgina estiver pronta, ou seja, quando o documento estiver totalmente carregado e o DOM estiver pronto.

Guia Prtico de JQuery WebDev Brasil

O que DOM (Document Object Model)?

DOM (Document Object Model - Modelo de Objetos de Documentos) uma especificao da W3C, independente de plataforma e linguagem,
onde pode-se dinamicamente alterar e editar a estrutura, contedo e estilo de um documento eletrnico. Ou seja, o DOM permite que o
documento seja mais tarde processado e os resultados desse processamento sejam incorporados de volta no prprio documento. A API
DOM oferece uma maneira padro de se acessar os elementos de um documento, alm de se poder trabalhar com cada um desses
elementos separadamente, e por esses motivos criar pginas altamente dinmicas. Este mtodo de acesso se d atravs de seletores.
Fonte: http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos

O modelo DOM baseado no modelo hierarquia em formato de uma rvore, assim como o corre com o XML. Cada elemento ou texto
considerado um n, e atravs desses ns voc pode alterar as estruturas da sua pgina. O DOM pode ser manipulado por qualquer
linguagem script client-side (Javascript, Vbscript e etc...).

Guia Prtico de JQuery WebDev Brasil

Entendendo o que so os seletores

$(element)
Para o JQuery manipular os elementos, precisamos primeiro dizer ao JQuery qual elemento DOM vamos manipular. Para tanto, o JQuery
utiliza seletores, do mesmo modo que o CSS, para evidenciar um ou mais elementos em um determinado contexto.

Identificando um elemento atravs de seu ID

O ID o identificador nico de um elemento HTML em uma pgina, ou seja, utilizamos ID para referenciar um elemento especfico. Como
regra, uma pgina HTML no pode conter dois ou mais elementos com o mesmo ID. Para identificar um elemento atravs do seu ID, basta
informar ID precedido do sinal de #, por exemplo:
$(#header)

Identificando um elemento atravs de uma Classe

As classes existem para agrupar elementos em uma pgina independentemente do tipo do elemento, ou seja, utilizamos as classes para
agrupar elementos relacionados. Uma Tag pode conter uma ou mais classes. Para identificar um elemento atravs de uma classe, basta
informar o nome da classe precedido do sinal de ., por exemplo:
$(.importante)

10

Guia Prtico de JQuery WebDev Brasil

Identificando um elemento atravs de uma Tag

Para identificar um elemento atravs de uma tag, basta informar o nome da tag, por exemplo:
$(h1)

11

Guia Prtico de JQuery WebDev Brasil

Aplicando efeitos em um documento

HTML
Neste exemplo, vamos aplicar um efeito simples em alguns elementos HTML. Fique atento aos seletores utilizados no exemplo:

O documento HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduo ao JQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="application.js"></script>
</head>
<body>
<h1>Ttulo da Pgina</h1>
<div id="bloco1">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div id="bloco2">
12

Guia Prtico de JQuery WebDev Brasil

<p><span class=importante>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
</div>
</body>
</html>

O documento JQuery
// estrutura equivalente ao onload
$(document).ready(function(){
// colocando efeitos nos ttulos
$(h1, h2, h3, h4, h5, h6).hide(0).delay(600).show(300);
// aplicando efeitos nos Divs
$(#bloco1, #bloco2).hide(0).delay(500).fadeIn(300);
// aplicando efeitos ao span importante
$(.importante).hide(0).delay(500).show(600);
// capturando o contedo de um span important e exibindo um alert com seu contedo
alert($(.important).html());
});

13

Guia Prtico de JQuery WebDev Brasil

Usando efeitos com JQuery

O JQuery oferece uma quantidade considervel de efeitos visuais que podem ser utilizados em web sites. Abaixo segue uma lista dos efeitos
mais comuns e fceis de usar que esto disponveis no Core do JQuery, ou seja, no dependem de plug-ins de terceiros:

.hide(speed)
Esta funo oculta o elemento em questo. O parmetro speed especifica o tempo em milissegundos em que o elemento deve desaparecer.
O parmetro speed pode ser omitido. Exemplo:
$(#post).hide(100);

.show(speed)
Esta funo exibe o elemento em questo. O parmetro speed especifica o tempo em milissegundos em que o elemento deve aparecer. O
parmetro speed pode ser omitido. Exemplo:
$(#post).show(500);

.delay(speed)
Esta funo aplica uma delay, ou seja, uma demora especificada atravs do parmetro speed.
$(#post).hide(500)delay(500).show(100);

14

Guia Prtico de JQuery WebDev Brasil

.fadeIn(speed)
Esta funo aplica um efeito de fade e exibe o elemento. O parmetro speed especifica o tempo em milissegundos em que o elemento deve
aparecer. O parmetro speed pode ser omitido. Exemplo:
$(#post).fadeIn(500);

.fadeOut(speed)
Esta funo aplica um efeito de fade e oculta o elemento. O parmetro speed especifica o tempo em milissegundos em que o elemento
deve desaparecer. O parmetro speed pode ser omitido. Exemplo:
$(#post).fadeOut(500);

.slideDown(speed)
Esta funo altera a altura do elemento, comeando com 0 e aumentando at o tamanho real do elemento. O parmetro speed especifica o
tempo em milissegundos em que o elemento deve aparecer. O parmetro speed pode ser omitido. Exemplo:
$(#post).slideDown(500);

.slideUp(speed)
Esta funo altera a altura do elemento, comeando com o tamanho real e diminuindo at 0. O parmetro speed especifica o tempo em
milissegundos em que o elemento deve desaparecer. O parmetro speed pode ser omitido. Exemplo:
$(#post).slideUp(500);

15

Guia Prtico de JQuery WebDev Brasil

Manipulando CSS
O JQuery permite a manipulao de classes CSS dos elementos de uma pgina. Abaixo segue os mtodos para a manipulao de CSS:

.addClass(name)
Este mtodo adiciona uma ou mais classes CSS para o elemento. A(s) classe(s) deve(em) ser especificadas atravs do parmetro name. Caso
exista mais de uma classe a ser atribuda, estas devem estar separadas por um espao em branco. Exemplo:
$(p).addClass(negrito italic vermelho);

.removeClass(name)
Este mtodo remove uma ou mais classes CSS para o elemento. A(s) classe(s) deve(em) ser especificadas atravs do parmetro name. Caso
exista mais de uma classe a ser removida, estas devem estar separadas por um espao em branco. Exemplo:
$(p).removeClass(negrito italic vermelho);

.hasClass(name)
Este mtodo verifica se uma ou mais classes CSS esto atribudas para o elemento em questo e retorna true ou false. A(s) classe(s)
deve(em) ser especificadas atravs do parmetro name. Caso exista mais de uma classe a ser verificada, estas devem estar separadas por
um espao em branco. Exemplo:
$(p).hasClass(vermelho);

16

Guia Prtico de JQuery WebDev Brasil

Manipulando Atributos
O JQuery permite a manipulao de atributos dos elementos, ou seja, podemos ler e alterar estes atributos. Abaixo segue a descrio dos
principais mtodos para trabalhar com atributos no JQuery.

.attr(name)
Este mtodo retorna o valor de um atributo do elemento em questo. O atributo deve ser especificado atravs do parmetro name.
Exemplo:
$(#link).attr(href);

.attr(name, value)
Este mtodo atribui um valor em um atributo do elemento em questo. O atributo deve ser especificado atravs do parmetro name.
Exemplo:
$(#link).attr(href,HTTP://www.webdevbrasil.com.br);

.removeAttr(name)
Este mtodo remove um atributo do elemento em questo. O atributo deve ser especificado atravs do parmetro name. Exemplo:
$(#link).removeAttr(href);

17

Guia Prtico de JQuery WebDev Brasil

.val()
Este mtodo retorna o valor de um elemento de um formulrio. Exemplo:
$(#txtNome).val();

.html()
Este mtodo retorna o contedo HTML de um elemento. Exemplo:
$(#titulo).html();

18