guia jquery

18
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

Upload: douglas-lodi

Post on 05-Jul-2015

285 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Guia jquery

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

Page 2: Guia jquery

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

Page 3: Guia jquery

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

Page 4: Guia jquery

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].

Page 5: Guia jquery

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.

Page 6: Guia jquery

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

Page 7: Guia jquery

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.

Page 8: Guia 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.

Page 9: Guia jquery

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...).

Page 10: Guia jquery

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”)

Page 11: Guia jquery

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”)

Page 12: Guia jquery

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">

Page 13: Guia jquery

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());

});

Page 14: Guia jquery

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);

Page 15: Guia jquery

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);

Page 16: Guia jquery

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”);

Page 17: Guia jquery

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”);

Page 18: Guia jquery

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();