Guia prático de JQuery por WebDev Brasil. Um Guia prático e ágil, feito para desenvolvedores que querem utilizar esta fantástica biblioteca em suas páginas sem muitos códigos e esforço.
V 0.1 – 12/02/2010
http://www.webdevbrasil.com.br/guia-pratico-jquery
www.webdevbrasil.com.br
Luiz Eduardo de Oliveira Fonseca WebDev Brasil
www.webdevbrasil.com.br
Guia Prático de JQuery – WebDev Brasil
2
Conteúdo
O Autor ......................................................................................................................................................................................................................... 4
Luiz Eduardo de Oliveira Fonseca ............................................................................................................................................................................ 4
Sobre este Guia ............................................................................................................................................................................................................ 5
O que é JQuery? ........................................................................................................................................................................................................... 6
Baixando e incorporando o JQuery em suas páginas ................................................................................................................................................ 7
Baixando ................................................................................................................................................................................................................... 7
Incorporando ........................................................................................................................................................................................................... 7
Primeiro Exemplo ........................................................................................................................................................................................................ 8
Um problema antigo ................................................................................................................................................................................................ 8
Uma solução prática, para um problema antigo .................................................................................................................................................... 8
O que é DOM (Document Object Model)? .................................................................................................................................................................. 9
Entendendo o que são os seletores $(element) ....................................................................................................................................................... 10
Identificando um elemento através de seu ID ...................................................................................................................................................... 10
Identificando um elemento através de uma Classe .............................................................................................................................................. 10
Identificando um elemento através 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
Guia Prático de JQuery – WebDev Brasil
3
.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 Prático de JQuery – WebDev Brasil
4
O Autor
Luiz Eduardo de Oliveira Fonseca
Formado como Técnico em Informática e Técnico em Acessoria e Gerenciamento Empresarial pelo Centro
Paula Souza, e atualmente cursando Tecnólogo em Sistemas para Internet na Faculdade Veris IBTA.
Reside em Pindamonhangaba, interior de São Paulo e trabalha com programação Desktop e Web.
Teve o primeiro contato com o Desenvolvimento Web em 2005 e desde então se especializa em
Tecnologias como PHP, Ruby e Asp.NET, CSS, JQuery, entre outras.
Atualmente está a frente da Agência Orangeweb (www.orangeweb.com.br) onde desenvolve websites
para pequenas e médias 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 [email protected].
Guia Prático de JQuery – WebDev Brasil
5
Sobre este Guia
Este Guia Prático do site WebDev Brasil serve como base para o aprendizado de JQuery. O público alvo são desenvolvedores web iniciantes
ou até mesmo profissionais que nunca tiveram um contato com a biblioteca JQuery.
Desejo a todos uma ótima leitura.
Guia Prático de JQuery – WebDev Brasil
6
O que é JQuery?
Desenvolvimento de um sistema ou um site, sempre nos oferece um desafio: Criar códigos Javascript. Digamos que não é uma das
tarefas mais triviais inserir efeitos em uma página, validar um formulário ou qualquer coisa desse tipo com Javascript. A linguagem
em si é incrível, 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 códigos 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 além de ser um simples framework, ele muda a maneira no qual você escreve JavaScript. Além disso, o JQuery
possui suporte à Plug-ins, sendo esse o recurso mais interessante do framework. O JQuery também possui uma abstração ao CSS e um
suporte completo a manipulação do DOM, manipulação de eventos, animação e interações Ajax.
Apesar de ser completo em funcionalidades, o JQuery mantém uma maneira de trabalhar muito simples, muitas vezes podemos realizar
vários efeitos, validações e manipulação do documento HTML em poucas linhas.
O JQuery é o tipo de framework que você vai utilizar em todos os seus projetos futuros.
O
Guia Prático de JQuery – WebDev Brasil
7
Baixando e incorporando o JQuery em suas páginas
Baixando
Para baixar o JQuery basta ir ao site oficial www.jquery.com e escolher umas das opções disponíveis: Development ou Production, sendo
estas as diferenças:
Development: Esta opção é composta pelo código fontes legível da biblioteca, onde é possível observar como o JQuery foi
desenvolvido e entender melhor o seu funcionamento.
Production: Esta é a opção recomendada para ser colocada em produção, ou seja, é a versão que deve ser enviada para o servidor
quando o web site for disponibilizado ao público.
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 Prático de JQuery – WebDev Brasil
8
Primeiro Exemplo
É uma boa prática 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 código para aplicar funções ao evento onLoad do documento:
carrega = function(){ alert(“WebDev Brasil”); }
window.onload = carrega();
O que acontece, é que esse código será executado enquanto a página esta sendo carregada, ou seja, enquanto o DOM ainda não estiver
totalmente disponível, e isso muitas vezes pode ser um problema.
Uma solução prática, para um problema antigo
O JQuery faz uma abstração 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 código JQuery só estará disponível ou só será executado
quando a página estiver pronta, ou seja, quando o documento estiver totalmente carregado e o DOM estiver pronto.
Guia Prático de JQuery – WebDev Brasil
9
O que é DOM (Document Object Model)?
DOM (Document Object Model - Modelo de Objetos de Documentos) é uma especificação da W3C, independente de plataforma e linguagem,
onde pode-se dinamicamente alterar e editar a estrutura, conteúdo e estilo de um documento eletrônico. Ou seja, o DOM permite que o
documento seja mais tarde processado e os resultados desse processamento sejam incorporados de volta no próprio documento. A API
DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses
elementos separadamente, e por esses motivos criar páginas altamente dinâmicas. Este método de acesso se dá através 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 através desses nós você pode alterar as estruturas da sua página. O DOM pode ser manipulado por qualquer
linguagem script client-side (Javascript, Vbscript e etc...).
Guia Prático de JQuery – WebDev Brasil
10
Entendendo o que são 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 através de seu ID
O ID é o identificador único de um elemento HTML em uma página, ou seja, utilizamos ID para referenciar um elemento específico. Como
regra, uma página HTML não pode conter dois ou mais elementos com o mesmo ID. Para identificar um elemento através do seu ID, basta
informar ID precedido do sinal de “#”, por exemplo:
$(“#header”)
Identificando um elemento através de uma Classe
As classes existem para agrupar elementos em uma página 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 através de uma classe, basta
informar o nome da classe precedido do sinal de “.”, por exemplo:
$(“.importante”)
Guia Prático de JQuery – WebDev Brasil
11
Identificando um elemento através de uma Tag
Para identificar um elemento através de uma tag, basta informar o nome da tag, por exemplo:
$(“h1”)
Guia Prático de JQuery – WebDev Brasil
12
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>Introdução 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>Título da Página</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">
Guia Prático de JQuery – WebDev Brasil
13
<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 títulos
$(“h1, h2, h3, h4, h5, h6”).hide(0).delay(600).show(300);
// aplicando efeitos nos Div’s
$(“#bloco1, #bloco2”).hide(0).delay(500).fadeIn(300);
// aplicando efeitos ao span “importante”
$(“.importante”).hide(0).delay(500).show(600);
// capturando o conteúdo de um span “important” e exibindo um alert com seu conteúdo
alert($(“.important”).html());
});
Guia Prático de JQuery – WebDev Brasil
14
Usando efeitos com JQuery
O JQuery oferece uma quantidade considerável de efeitos visuais que podem ser utilizados em web sites. Abaixo segue uma lista dos efeitos
mais comuns e fáceis de usar que estão disponíveis no Core do JQuery, ou seja, não dependem de plug-ins de terceiros:
.hide(speed)
Esta função oculta o elemento em questão. O parâmetro speed especifica o tempo em milissegundos em que o elemento deve desaparecer.
O parâmetro speed pode ser omitido. Exemplo:
$(“#post”).hide(100);
.show(speed)
Esta função exibe o elemento em questão. O parâmetro speed especifica o tempo em milissegundos em que o elemento deve aparecer. O
parâmetro speed pode ser omitido. Exemplo:
$(“#post”).show(500);
.delay(speed)
Esta função aplica uma delay, ou seja, uma demora especificada através do parâmetro speed.
$(“#post”).hide(500)delay(500).show(100);
Guia Prático de JQuery – WebDev Brasil
15
.fadeIn(speed)
Esta função aplica um efeito de ‘fade’ e exibe o elemento. O parâmetro speed especifica o tempo em milissegundos em que o elemento deve
aparecer. O parâmetro speed pode ser omitido. Exemplo:
$(“#post”).fadeIn(500);
.fadeOut(speed)
Esta função aplica um efeito de ‘fade’ e oculta o elemento. O parâmetro speed especifica o tempo em milissegundos em que o elemento
deve desaparecer. O parâmetro speed pode ser omitido. Exemplo:
$(“#post”).fadeOut(500);
.slideDown(speed)
Esta função altera a altura do elemento, começando com 0 e aumentando até o tamanho real do elemento. O parâmetro speed especifica o
tempo em milissegundos em que o elemento deve aparecer. O parâmetro speed pode ser omitido. Exemplo:
$(“#post”).slideDown(500);
.slideUp(speed)
Esta função altera a altura do elemento, começando com o tamanho real e diminuindo até 0. O parâmetro speed especifica o tempo em
milissegundos em que o elemento deve desaparecer. O parâmetro speed pode ser omitido. Exemplo:
$(“#post”).slideUp(500);
Guia Prático de JQuery – WebDev Brasil
16
Manipulando CSS
O JQuery permite a manipulação de classes CSS dos elementos de uma página. Abaixo segue os métodos para a manipulação de CSS:
.addClass(name)
Este método adiciona uma ou mais classes CSS para o elemento. A(s) classe(s) deve(em) ser especificadas através do parâmetro name. Caso
exista mais de uma classe a ser atribuída, estas devem estar separadas por um espaço em branco. Exemplo:
$(“p”).addClass(“negrito italic vermelho”);
.removeClass(name)
Este método remove uma ou mais classes CSS para o elemento. A(s) classe(s) deve(em) ser especificadas através do parâmetro name. Caso
exista mais de uma classe a ser removida, estas devem estar separadas por um espaço em branco. Exemplo:
$(“p”).removeClass(“negrito italic vermelho”);
.hasClass(name)
Este método verifica se uma ou mais classes CSS estão atribuídas para o elemento em questão e retorna true ou false. A(s) classe(s)
deve(em) ser especificadas através do parâmetro name. Caso exista mais de uma classe a ser verificada, estas devem estar separadas por
um espaço em branco. Exemplo:
$(“p”).hasClass(“vermelho”);
Guia Prático de JQuery – WebDev Brasil
17
Manipulando Atributos
O JQuery permite a manipulação de atributos dos elementos, ou seja, podemos ler e alterar estes atributos. Abaixo segue a descrição dos
principais métodos para trabalhar com atributos no JQuery.
.attr(name)
Este método retorna o valor de um atributo do elemento em questão. O atributo deve ser especificado através do parâmetro name.
Exemplo:
$(“#link”).attr(“href”);
.attr(name, value)
Este método atribui um valor em um atributo do elemento em questão. O atributo deve ser especificado através do parâmetro name.
Exemplo:
$(“#link”).attr(“href”,”HTTP://www.webdevbrasil.com.br”);
.removeAttr(name)
Este método remove um atributo do elemento em questão. O atributo deve ser especificado através do parâmetro name. Exemplo:
$(“#link”).removeAttr(“href”);
Guia Prático de JQuery – WebDev Brasil
18
.val()
Este método retorna o valor de um elemento de um formulário. Exemplo:
$(“#txtNome”).val();
.html()
Este método retorna o conteúdo HTML de um elemento. Exemplo:
$(“#titulo”).html();
Top Related