Introducao Jquery

Introduo ao jQuery
Introduo ao jQuery
Todos os direitos reservados para Alfamdia Prow.
AVISO DE RESPONSABILIDADE
As informaes contidas neste material de treinamento so distribudas NO ESTADO EM

QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as
precaues tenham sido tomadas na preparao deste material, a Alfamdia Prow no tm
qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instrues contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.
07/2011 Verso 1.0
Alfamdia Prow
http://www.alfamidia.com.br
2
Introduo ao jQuery
Alfamdia d Boas Vindas aos seus clientes e deseja um

excelente treinamento.
Benefcios ao aluno
- Suporte ps-treinamento via e-mail (3 consultas por 90 dias aps o trmino do curso)
para tirar dvidas do contedo ministrado em aula, atravs do e-mail
matricula@alfamidia.com.br ;
- Acesso a extranet www.l3tool.com para verificao de agenda e baixar os materiais.
- Avaliaes de acompanhamento e final de curso (em cada mdulo) durante todo o

treinamento, garantindo a qualidade do curso.
Observaes Importantes
- Qualquer necessidade de alterao na agenda ou cursos contratados inicialmente,

consulte os Termos de Contratao na Ficha de Matrcula;
- Contatos com a Alfamdia podem ser feitos atravs dos e-mails:
matricula@alfamidia.com.br dvidas aps contratao
info@alfamidia.com.br novas contrataes
3
Introduo ao jQuery
UNIDADE 1 INTRODUO AO JQUERY ............................................................................................................... 6

1.1 O QUE JQUERY? ................................................................................................................................ 6
1.2 PARA QUE SERVE?................................................................................................................................ 7
1.3 COMPATIBILIDADE ............................................................................................................................... 7
1.4 OBTENDO E INSTALANDO A JQUERY .................................................................................................... 7
1.5 INSERINDO A JQUERY NA PGINA ........................................................................................................ 8
UNIDADE 2 NOES BSICAS ............................................................................................................................. 9
2.1 O CONSTRUTOR JQUERY ...................................................................................................................... 9
2.2 PRONTO PARA COMEAR? .................................................................................................................... 9
2.3 ENCADEAMENTOS .............................................................................................................................. 10
2.4 MANIPULANDO O CSS ....................................................................................................................... 11
UNIDADE 3 SELETORES ...................................................................................................................................... 14
3.1 SELETORES SIMPLES .......................................................................................................................... 14
3.1.1 Seletor $(id) ............................................................................................................................. 14
3.1.2 Seletor $(classe) ...................................................................................................................... 14
3.1.3 Seletor $(elemento) .................................................................................................................. 15
3.1.4 Agrupamento de seletores ....................................................................................................... 16
3.1.5 Ancestral descendente ............................................................................................................ 17
3.1.6 Pai > filho ............................................................................................................................... 18
3.1.7 Anterior + prximo.................................................................................................................. 18
3.1.8 Anterior ~ irmos .................................................................................................................... 19
3.1.9 seletor:first .............................................................................................................................. 20
3.1.10 seletor:last .......................................................................................................................... 21
3.1.11 seletor:not(elemento) .......................................................................................................... 22
3.1.12 seletor:even ......................................................................................................................... 23
3.1.13 seletor:Odd ......................................................................................................................... 24
3.1.14 seletor:eq(n) ........................................................................................................................ 24
3.1.15 seletor:gt(n) ........................................................................................................................ 25
3.1.16 seletor:lt(n) ......................................................................................................................... 26
3.1.17 seletor(:header) .................................................................................................................. 27
3.1.18 seletor:contains(texto) ........................................................................................................ 28
3.1.19 seletor:empty ...................................................................................................................... 29
3.1.20 seletor1:hs(seletor2) ......................................................................................................... 29
3.1.21 seletor:parent...................................................................................................................... 29
3.1.22 :hidden ................................................................................................................................ 29
3.1.23 :visible ................................................................................................................................ 29
3.1.24 seletor[atributo] ................................................................................................................. 29
3.1.25 seletor[atributo="valor"] ................................................................................................... 30
3.1.26 seletor[atributo!="valor"] .................................................................................................. 30
3.1.27 seletor[atributo^="valor"] ................................................................................................. 30
3.1.28 seletor[atributo$="valor"] ................................................................................................. 31
3.1.29 seletor[atributo*="valor"] ................................................................................................. 31
3.1.30 Seletores elemento:filho ...................................................................................................... 31
3.1.31 Seletores para formulrios ................................................................................................. 31
UNIDADE 4 MANIPULANDO A PGINA .............................................................................................................. 33
4.1 MTODOS PARA MANIPULAO DA PGINA ..................................................................................... 33
4.1.1 addClass() ............................................................................................................................... 33
4.1.2 css() ......................................................................................................................................... 33
4.1.3 .removeClass ........................................................................................................................... 33
4.1.4 .toggleClass() .......................................................................................................................... 33
4.1.5 .hasClass() ............................................................................................................................... 33
4.1.6 .height() ................................................................................................................................... 34
4.1.7 .width() .................................................................................................................................... 34
4.1.8 .innerHeight() .......................................................................................................................... 34
4.1.9 .innerWidth() ........................................................................................................................... 34
4.1.10 .outerHeight() ..................................................................................................................... 34
4.1.11 .outerWidth() ....................................................................................................................... 35
4.1.12 .position() ............................................................................................................................ 35
4.1.13 .offset() ................................................................................................................................ 35
4.1.14 .scrollTop() ......................................................................................................................... 35
4.1.15 .scrollLeft() ......................................................................................................................... 35
4.2 EXEMPLOS ......................................................................................................................................... 35
UNIDADE 5 TRABALHANDO COM PLUGINS ................................................................................................................ 39
UNIDADE 6 JQUERY UI ................................................................................................................................................... 68
UNIDADE 7 ELEMENTOS DO JQUERY UI ..................................................................................................................... 71
5
Unidade 1
Introduo ao jQuery
1.1 O que jQuery?
No incio da web, a linguagem JavaScript era vista coma linguagem difcil de
aprender e utilizar. Depois de uma semana estudando a linguagem, conseguamos
escrever um script que validava um formulrio e que com certeza daria erro nos
navegadores que eram diferentes do que utilizamos para desenvolver. Afinal, cada
navegador tinha o seu prprio padro de implementao do JavaScript.
Para nossa sorte, foram estabelecidos padres para a linguagem e tambm houve o
surgimento de diversas bibliotecas que foram criadas para lidar com essas
diferenas entre navegadores. Desse universo que surge a jQuery.
A jQuery uma biblioteca JavaScript, cross-browser, desenvolvida por John

Resig. Foi lanada em janeiro de 2006, e se tornou uma das bibliotecas JavaScript
mais populares da internet.
A biblioteca disponibilizada como software livre e disponibilizada sobre as

regras das licenas MIT e GPL. Ou seja, uma biblioteca que pode ser utilizada
tanto para projetos pessoais como para projetos comerciais, sem a necessidade de
pagar qualquer tipo de licena de uso.
Foi criada tendo como foco a simplicidade e com o objetivo de facilitar a

programao JavaScript. Programas que utilizariam linhas e mais linhas de cdigo
para obter um determinado efeito ou carregar um componente AJAX, so
substitudos por poucas instrues utilizando jQuery o que permite o uso dela por
designers e desenvolvedores com pouco conhecimento de JavaScript.
A jQuery leve (em torno de 30kb), extensvel, oferece suporte a plugins e

atualmente conta com uma vasta comunidade de programadores que diariamente
acrescentam novos recursos biblioteca. Alm de funes, oferece ao
programador uma grande quantidade de controles de interface.
Introduo ao jQuery
1.2 Para que serve?

A jQuery pode ser utilizada para:
adicionar efeitos visuais e animaes;
acessar e manipular o DOM;
carregar componentes AJAX;
prover interatividade;
alterar contedos;
simplificar tarefas JavaScript.
1.3 Compatibilidade
A jQuery foi criada para ser uma biblioteca compatvel com qualquer navegador
Web. Ela resolve para o programador a penosa tarefa de desenvolver programas
em JavaScript tendo que prever a enorme gama de navegadores em que sua
pgina poder rodar. Sabemos que cada navegador tem seu prprio conjunto de
caractersticas de implementao, que ainda podem variar de acordo com a
plataforma e sistema operacional onde estiver rodando. Com a jQuery, a
programao nica e transparente.
A jQuery oferece suporte a CSS3. Voc pode utilizar os seletores CSS3 mesmo
que o navegador no tenha suporte a esta verso de folhas de estilo. No caso da
jQuery, ela prpria implementa os seletores CSS3, o que a torna independente do
navegador em que estiver rodando.
1.4 Obtendo e instalando a jQuery

A query pode ser obtida gratuitamente no site http://jquery.com/. Na pgina
principal, no lado direito da pgina h um boto de Download (jQuery) onde
podemos escolher entre duas verses:
PRODUCTION : a verso voltada para ambiente de produo. uma verso

com o cdigo em formato minimizado, sem quebras de linha e com o cdigo
obscurecido. Essa verso tem em torno de 15% do tamanho da verso de
Desenvolvimento (DEVELOPMENT).
7
Introduo ao jQuery
DEVELOPMENT: a verso de desenvolvimento. a verso no compactada

da bibliteca e com o cdigo no obscurecido. ideal para ambientes de
desenvolvimento por se integrar facilmente s ferramentas e IDEs.
A verso atual da jQuery (maro/2011) a verso 1.5.1.
Basta escolher a verso que voc deseja baixar e clicar em Download. A

biblioteca abrir em formato de cdigo JavaScript no prprio navegador, e voc
dever clicar em Arquivo > Salvar e guardar a biblioteca na sua pasta de
desenvolvimento.
Usualmente guardamos a biblioteca com o nome jquery-1.5.1.min.js quando for a

verso compactada, ou com o nome jquery-1.5.1.js quando for a verso de
desenvolvimento.
Preferencialmente, salve a jQuery em uma pasta "js" dentro da sua pasta principal
de desenvolvimento, ou na raiz do seu site.
1.5 Inserindo a jQuery na pgina
Para utilizar a jQuery dentro de uma pgina HTML, aps baixar e salvar a mesma
dentro da pasta do nosso site, vamos referenciar a mesma atravs do parmetro src
da tag script:
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
Tambm muito comum encontrarmos na internet pginas que fazem referncia a

jQuery apontando os servidores do Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
Mas durante a apostila vamos utilizar somente a jQuery com cpia local.
8
Unidade 2
Noes bsicas
2.1 O construtor jQuery

A jQuery faz uso do construtor $() para encontrar os elementos HTML dentro da
pgina e utilizar as funes da biblioteca. Tcnicamente chamos ele de construtor,
ou funo construtora e ele estar nas pginas em que vamos utilizar a jQuery.
denominado dessa forma para ser simples e fcil de decorar. E o fato de se

chamar $, evita que ocorra conflitos com outras funes da biblioteca do usurio.
Eventualmente, podemos estar utilizando alguma outra biblioteca que faa uso de
uma funo chamada $. Nesse caso podemos utilizar como alternativa a funo
jQuery().
O construtor faz uso de um parmetro $(alvo), onde 'alvo' um seletor CSS do
tipo TAG, id, ou classe como nos exemplos abaixo:
$('h1');
$('p');
4('table');
$('#conteudo');
$('.negrito');
Nos exemplos acima, estamos instruindo a jQuery a encontrar os elementos H1, P,

TABLE, e os elementos de id="conteudo" e class="negrito".
Um dos requisitos bsicos para utilizar a jQuery saber usar os seletores CSS.
2.2 Pronto para comear?

Uma das primeiras coisas que devemos aprender sobre a jQuery sobre como
fazer uso da funo $(document).ready(). De maneira bem simples, podemos
dizer que essa funo responsvel por executar o contedo do mtodo ready()
to logo o navegador tenha carregado todos os elementos HTML.
A prtica mais comum, utilizarmos ela em conjunto com uma funo annima,
contendo os comandos que queremos executar:
Introduo ao jQuery
$(document).ready(function() {
// seu cdigo jQuery vai aqui
});
Uma das vantagens que o uso do mtodo ready() nos apresenta, a possibilidade
de separar o cdigo contendo o comportamento da nossa pgina em um arquivo
separado sem misturar JavaScript com o HTML.
Uma das coisas que mais fazemos usualmente, executar algum cdigo
JavaScript logo aps a carga da pgina para inicializarmos nosso cdigo
JavaScript utilizando o evento onLoad:
window.onload = function() { alert("pgina carregada");}
Essa prtica porm, trs consigo o fato de que o nosso cdigo no ser executado
enquanto todas as imagens da pgina, incluindo banners, no forem carregados.
Mas ao mesmo tempo, o evento onLoad a nica sada quando precisamos
garantir que todos os elementos da pgina j esto disponveis no DOM para
serem manipulados e utilizados.
2.3 Encadeamentos
Outro conceito muito importante da jQuery o encadeamento de mtodos.
Vamos tomar como referncia a seguinte pgina HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Encadeamentos</title>
<style type="text/css">
.escondido {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
10
Introduo ao jQuery
<script type="text/javascript">
$(document).ready( function() {
// aciona os eventos de forma encadeada
$('div').addClass('escondido').fadeIn(3000);
});
</script>
</head>
<body>
<div>
<h1>Encadeamentos</h1>
<p>Teste.</p>
</div>
</body>
</html>
No se preocupe se o cdigo parecer complicado. Logo vamos ver todos os

detalhes do funcionamento dele. No momento repare na linha
"$('div').addClass('escondido').fadeIn(3000);", pois nela temos o nosso exemplo
de encadeamento de mtodos. No comando acima, estamos dizendo para jQuery
encontrar os elementos <div> da pgina, adicionar a classe escondido a eles, e
exibir eles com um fade in que deve durar 3 segundos.
2.4 Manipulando o CSS

Uma tarefa bastante comum a de adicionar ou remover classes de elementos
HTML. A jQuery disponibiliza trs mtodos para tal funo:
addClass("lista") : adiciona uma ou mais classes;
removeClass("lista") : remove uma ou mais classes;
toggleClass("lista") : adiciona ou remove uma ou mais classes de um
elemento, dependendo se elas estiverem ou no presentes no elemento. Se
estiverem presentes, remove, caso contrrio, adiciona.
Vejamos o exemplo abaixo, onde temos uma class 'escondido', e trs links que
alteram o estado de exibio das divs com a mensagem de ajuda dos mesmos:
11
Introduo ao jQuery

<head>
<title>Encadeamentos</title>
.escondido {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
function exibe(id)
{
$(id).removeClass('escondido');
}
function esconde(id)
{
$(id).addClass('escondido');
}
</script>
</head>
<body>
<h1>Meu Site</h1>
<hr />
<a href="" onmouseover="exibe('#conteudo1')"
onmouseout="esconde('#conteudo1')">Home</a> ::
onmouseout="esconde('#conteudo2')">Quem Somos</a> ::
onmouseout="esconde('#conteudo3')">Contato</a>
<hr />
<div id="conteudo1" class="escondido">
Clique nesse link para acessar a home.
</div>
Clique nesse link para saber mais sobre ns.
</div>
Clique nesse link para entrar em contato conosco.
</div>
</body>
</html>
Poderamos tornar nosso cdigo mais simples, trocando as funes esconde e

exibe por uma funo s, utilizando o mtodo toggleClass():
12
Introduo ao jQuery
function altera(id)
{
$(id).toggleClass('escondido');
}
</script>
</head>
<body>
<h1>Meu Site</h1>
<hr />
<a href="" onmouseover="altera('#conteudo1')"
onmouseout="altera('#conteudo1')">Home</a> ::
onmouseout="altera('#conteudo2')">Quem Somos</a> ::
onmouseout="altera('#conteudo3')">Contato</a>
13
Introduo ao jQuery
Unidade 3
Seletores
3.1 Seletores simples
3.1.1 Seletor $(id)

O seletor de id: acessa o elemento cujo valor do atributo id for especificado no
parmetro. A sintaxe de id segue as mesmas regras do CSS, onde o id do elemento
precedido com #.
Exemplo:
function mostraParagrafo()
{
$("#paragrafo").fadeIn("slow");
</script>
<input type="button" onclick="mostraParagrafo()" value="exibe paragrafo" />
<p id="paragrafo" style="display: none;">

"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>
No exemplo acima foi utilizado um boto para disparar o evento de exibio do

pargrafo.
3.1.2 Seletor $(classe)

O seletor $(classe) acessa o elemento, ou os elementos que tiverem o atributo
class com o valor listado no parmetro. A sintaxe do nome da classe segue as
mesmas regras do CSS onde o nome da classe precedido de ponto.
14
Introduo ao jQuery
Exemplo:
.escondido{
display: none;
}
</style>
{
$(".escondido").slideDown("slow");
</script>
<p class="escondido">
Paragrafo 1.
</p>
Paragrafo 2.
</p>
Paragrafo 3.
</p>
3.1.3 Seletor $(elemento)
O seletor $(elemento) utilizado para referenciar uma tag ou conjunto de tags de

nome 'elemento'. Repetimos no exemplo abaixo o efeito do seletor anterior, mas
dessa vez referenciamos os elementos da pgina apartir da tag.
Exemplo:
.escondido{
display: none;
}
</style>
15
Introduo ao jQuery
{
$("p").slideDown("slow");
</script>
Paragrafo 1.
</p>
Paragrafo 2.
</p>
Paragrafo 3.
</p>
3.1.4 Agrupamento de seletores

Podemos acessar um grupo de elementos da pgina utilizando um agrupamento de
seletores. O agrupamento referenciado por uma lista de seletores separados por
vrgula. Exemplo: $( 'p, .escondido, #menu' ).
Exemplo:
$("a, #menu, h1").css("font-family", "Verdana");
});
</script>
<h1>Meu site</h1>
<hr />
<div id="menu">
<a href="">Home</a> ::
<a href="">Quem somos</a> ::
<a href="">Contato</a>
</div>
16
Introduo ao jQuery
No exemplo acima, ao ser carregada a pgina a fonte dos elementos referenciados

alterada para "Verdana".
3.1.5 Ancestral descendente

Acessa o elemento descendente do ancestral especificano no parmetro.
Exemplo:
div {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 20px;
}
</style>
$('#botao').click(function()
{
$('div span').css('background-color', 'red');
});
});
</script>
<input type="button" id="botao" value="adiciona cor vermelha" />

<div>
<p>Paragrafo filho de div com <span>texto</span> marcado com span.</p>
</div>
No exemplo acima adicionado um evento click ao boto que adiciona a cor

vermelha ao fundo do elemento span contido dentro do elemento div, indicado
como 'div span' dentro da lista parmetros.
17
Introduo ao jQuery
3.1.6 Pai > filho

Acessa o elemento-filho do pai no parmetro.
Exemplo:
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('div > span').css('background-color', 'red');
});
});
</script>

<div>
<p>Paragrafo filho de div com <span>texto</span> marcado com span.</p>
</div>
Foi utilizado o mesmo exemplo do seletor anterior, mas como no h elemento

span filho da div (o span filho do pargrafo), nada acontece quando se clica no
boto. Caso tivesse usado o seletor $('p>span'), o elemento span teria sido alvo do
seletor. Faa essa mudana e rode o exemplo.
3.1.7 Anterior + prximo

Acessa o elemento prximo que se segue imediatamente ao elemento anterior.
18
Introduo ao jQuery
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('div+p').css('background-color', 'red');
});
});
</script>

<div>
<p>Paragrafo filho de div com <span>texto</span> marcado com
span.</p>
</div>
<p>Paragrafo irmo da div.</p>
No exemplo acima foi utilizado um evento que marca com o fundo vermelho o
prximo pargrafo depois da div.
3.1.8 Anterior ~ irmos

Este um seletor previsto na CSS 3 que acessa todos os elementos irmos e que
se seguem ao elemento 'anterior'.
div {
width: 200px;
height: 100px;
margin: 20px;
}
19
Introduo ao jQuery
</style>
{
$('h2 ~ p').css('background-color', 'red');
});
});
</script>

<h2>Titulo</h2>
<p>Paragrafo 1 irmo da div.</p>

O exemplo acima marca todos os pargrafos que ocorrem aps o elemento h2 com
o fundo vermelho.
3.1.9 seletor:first
Acessa a primeira ocorrncia do conjunto de elementos selecionados pelo seletor.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('p:first').css('background-color', 'red');
20
Introduo ao jQuery
});
});
</script>

O exemplo acima marca o primeiro dos pargrafos com o fundo vermelho.
3.1.10 seletor:last
Acessa a ltima ocorrncia do conjunto de elementos selecionados pelo seletor.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('p:last').css('background-color', 'red');
});
});
21
Introduo ao jQuery
</script>

O exemplo acima marca o ltimo dos pargrafos com o fundo vermelho.
3.1.11 seletor:not(elemento)
Busca todos os elementos menos o especificado.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('p:not(p:first)').css('background-color', 'red');
});
});
</script>
22
Introduo ao jQuery

No exempolo acima marca todos os pargrafos menos o primeiro.
3.1.12 seletor:even
Acessa as ocorrncias de ordem par do conjunto.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('p:even').css('background-color', 'red');
});
});
</script>

23
Introduo ao jQuery
3.1.13 seletor:Odd
Acessa todas as ocorrncias de ordem impar do conjunto.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('p:odd').css('background-color', 'red');
});
});
</script>

3.1.14 seletor:eq(n)
Acessa o ensimo elemento do conjunto selecionado. O primeiro item o idem de ordem
zero.
div {
width: 200px;
height: 100px;
margin: 20px;
24
Introduo ao jQuery
</style>
{
$('li:eq(3)').css('background-color', 'red');
});
});
</script>
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
3.1.15 seletor:gt(n)
Acessa todos as ocorrncias do conjunto de elementos cujo ndice maior que o nmero
definido no parmetro de gt().
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
25
Introduo ao jQuery
{
$('li:gt(2)').css('background-color', 'red');
});
});
</script>
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
3.1.16 seletor:lt(n)
Acessa todos os elementos de ndice menor que n.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
26
Introduo ao jQuery
$('li:lt(2)').css('background-color', 'red');
});
});
</script>
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
3.1.17 seletor(:header)
Seleciona todas as ocorrncias de cabealho de qualquer nvel (h1 at h6).
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$(':header').css('background-color', 'red');
});
});
</script>
27
Introduo ao jQuery
<h1>Ttulo</h1>
<h2>Ttulo</h2>
<h5>Ttulo</h5>
3.1.18 seletor:contains(texto)
Seleciona todos os elementos que contiverem o texto especificado dentro da propriedade
text.
div {
width: 200px;
height: 100px;
margin: 20px;
}
</style>
{
$('p:contains("jQuery")').css('background-color', 'red');
});
});
</script>
<p>Pargrafo de teste.</p>
<p>Pargrafo contendo o termo jQuery.</p>
<p>Outro pargrafo de teste.</p>
<p>Outro pargrafo contendo o termo jQuery.</p>
28
Introduo ao jQuery
Importante observar que esse seletor Case Sensitive.
3.1.19 seletor:empty
Acessa todas as ocorrncias vazias de um seletor.
3.1.20 seletor1:hs(seletor2)
Acessa todas as ocorrncias de seletor1 que contenham pelo menos uma ocorrncia do
elemento definido por seletor2.
3.1.21 seletor:parent
Acessa o elemento pai do elemento definido pelo seletor.
3.1.22 :hidden
Acessa todos elementos ocultos do documento incluindo campos input type="hidden".
3.1.23 :visible
Acessa todos os elementos visveis do documento.
3.1.24 seletor[atributo]
Acessa todas as ocorrncias do elemento seletor para o qual se tenha declarado o atributo
definido.
div {
width: 200px;
height: 100px;
29
Introduo ao jQuery

margin: 20px;
}
</style>
{
$('p[title]').css('background-color', 'red');
});
});
</script>
<p title="titulo">Pargrafo de teste com parametro title definido.</p>
<p title="titulo">Pargrafo de teste com parametro title definido.</p>
3.1.25 seletor[atributo="valor"]
Seleciona todas as ocorrncias do elemento seletor para o qual se tenha declarado o par
atributo='valor'.
3.1.26 seletor[atributo!="valor"]
Seleciona todas as ocorrncias onde o valor do atributo seja diferente do informado.
3.1.27 seletor[atributo^="valor"]
Idem, onde o atributo iniciar com 'valor'.
30
Introduo ao jQuery
3.1.28 seletor[atributo$="valor"]
Idem, onde o atributo terminar com 'valor'.
3.1.29 seletor[atributo*="valor"]
Idem, onde o atributo contem o 'valor'.
3.1.30 Seletores elemento:filho

Os seletores abaixo selecionam filhos especficos de um determinado elemento
:first-child : primeiro filho

:last-child : ltimo filho
:only-child : acessa o elemento que o filho nico do seletor.
:nth-child(ndice | even | odd | equao ) : ensimo element filho
3.1.31 Seletores para formulrios
So usados para acessar os campos input de um formulrio.
:input
:text
:password
:radio
:checkbox
:submit
:reset
:image
31
Introduo ao jQuery
:Button
:file
:hidden
:enabled
:disabled
:checked
:selected
32
Unidade 4
Manipulando a Pgina
4.1 Mtodos para Manipulao da Pgina
4.1.1 addClass()
O mtodo addClass(classe) adiciona a classe especificada ao elemento selecionado.
4.1.2 css()
O mtodo css possui dois formatos de utilizao:
css( propriedade) : obtm o valor da propriedade especificada
css(propriedade, valor) : atribui valor propriedade CSS.
Exemplo para acessar a propriedade cor de uma DIV clicada:
4.1.3 .removeClass
O mtodo .removeClass(classe) Remove uma classe, uma lista de classes, ou todas as
classes dos elementos selecionados.
4.1.4 .toggleClass()
Esse mtodo adiciona ou remove um ou mais classes de cada elemento selecionado. Se a
classe existir no elemento, remove, se no existir, adiciona.
4.1.5 .hasClass()
O mtodo .hasClass(nomeDaClasse) retorna true caso o elemento tenha atribudo
propriedade class a classe especificada.
Introduo ao jQuery
4.1.6 .height()
Obtm ou seta a altura do elemento selecionado. A diferena entre .css('height') e .height()
que o ltimo retorna somente o valor (por exemplo: 400), enquanto o primeiro retorna o
valor precedido de px (por exemplo: 400px).
Importante observar que o tamanho se refere ao tamanho interno do elemento sem
considerar padding, border e margin.
4.1.7 .width()
Obtm ou seta a largurado elemento selecionado. A diferena entre .css('width') e .width()
que o ltimo retorna somente o valor (por exemplo: 400), enquanto o primeiro retorna o
valor precedido de px (por exemplo: 400px).
Importante observar que o tamanho se refere ao tamanho interno do elemento sem
considerar padding, border e margin.
4.1.8 .innerHeight()
Retorna a altura do elemento especificado, incluindo o padding top e bottom, em pixels.
Esse mtodo no se aplica ao objeto window e document, para estes, utilize o mtodo
.height().
4.1.9 .innerWidth()
Retorna a largura do elemento, incluindo o padding (preenchimento) esquerda e direita.
dado em pixels. Esse mtodo no se aplica ao objeto window e document, para estes,
utilize o mtodo .width().
4.1.10 .outerHeight()
Obtm o valor da altura do primeiro elemento selecionado incluindo padding, border e
opcionalmente margin. Para incluir margin usar .outerHeitght(true).
Esse mtodo no se aplica aos objetos window e document. Para tais, usar o mtodo
height().
34
Introduo ao jQuery
4.1.11 .outerWidth()
Obtm o valor da largura do primeiro elemento selecionado, incluindo o padding, border e
opcionalmente a margin. dado em pixels. Para incluir a margin na medida total usar
.outerWidth(true).
Para os objetos document e window usar .width().
4.1.12 .position()
Retorna um objeto contendo as propriedades top e left contendo a as coordenadas do
primeiro objeto da seleo efetuada.
A coordenada retornada relativa ao objeto pai. Diferente de .offset() que retorna a
coordenada relativa ao documento.
4.1.13 .offset()
Retorna as coordenadas relativas ao documento, muito til quando queremos posicionar
um item em relao a janela. Retorna um objeto contendo as propriedades top e left.
Para setar as coordenadas de um elemento devemos usar o formato .offset( {top: x, left: y }
) onde x e y so as coordenadas no documento.
No suporta elementos do tipo hidden.
4.1.14 .scrollTop()
Obtm ou seta o valor da posio da barra vertical de scroll do primeiro elemento em um
conjunto de elementos.
Para setar o valor da posio da barra de scroll usar .scrollTop(n).
4.1.15 .scrollLeft()
Obtm o valor da posio da barra de scrollHorizontal do primeiro elemento do conjunto
selecionado.
Para setar o valor usar .scrollLeft(n).
4.2 Exemplos
Exibe a cor das divs criadas ao clicar sobre elas:
35
Introduo ao jQuery
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("Esta div <span style='color:" +
color + ";'>" + color + "</span>.");
});
</script>
Exibe a coordenada das divs ao clicarmos sobre elas:
<style>
p {
margin-left: 10px;
color: blue;
width: 200px;
cursor: pointer;
}
span {
color: red;
cursor: pointer;
}
div.abs {
width: 50px;
height: 50px;
position: absolute;
left: 220px;
top: 35px;
background-color: green;
cursor: pointer;
36
Introduo ao jQuery
}
</style>
<div id="result">Clique em um elemento.</div>
<p>Este a melhor maneira de <span>descobrir</span> o offset.</p>
<div class="abs"></div>
<script>
$("*", document.body).click(function (e) {
var offset = $(this).offset();
e.stopPropagation();
$("#result").text(this.tagName + " coords ( " + offset.left + ", " +
offset.top + " )");
});
</script>
Exibe a altura de um elemento, documento e janela:
<style>
body {
background: yellow;
}
button {
font-size: 12px;
margin: 2px;
}
p {
width: 150px;
border: 1px red solid;
}
div {
color: red;
font-weight: bold;
}
</style>
<button id="getp">Obter altura do pargrafo</button>
<button id="getd">Obter altura do documento</button>
<button id="getw">Obter altura da janela</button>
<div> </div>
<p>Pargrafo teste para testar a altura.</p>
<script>
37
Introduo ao jQuery
function showHeight(ele, h) {
$("div").text("A altura de " + ele +
" " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
</script>
38
Introduo ao jQuery
Unidade 5
Trabalhando com Plugins
A jQuery uma biblioteca que pode ser extensvel, e como ela de software livre
existem diversos autores que acabam desenvolvendo plugins para adicionar ou retirar
elementos que existam na jQuery.
Como j podemos notar, existe uma imensa quantidade de plugins, assim sendo,
para que possamos visualizar existe o site http://plugins.jquery.com e durante esta unidade
veremos apenas alguns plugins como sliders, menus, galeria de imagens, entre outros.
Para que o plugin funcione necessrio fazermos o seguinte processo:
1 baixar o plugin a ser usado
2 fazer o link do arquivo a ser carregado
3 escrever o cdigo com os parmetros a serem usados se necessrio
De uma forma geral, os autores de plugins criam uma listagem de utilidades que
podem ser executadas com o plugin.
5.1 Sliders e Banners

Um bom exemplo de Slider com Banner o Simple Page Peel Effect.
Ao passar o mouse no smbolo de Feed de notcias, o banner desliza e amplia.
39
Introduo ao jQuery
Para que isso ocorra necessrio observar o pacote desse plugin. A aplicao do
jQuery est no prprio arquivo html, j o CSS est no ambiente interno e externo.
possvel notar ao final do cdigo html o link do autor.
Arquivo index.html
<head>
<title>Simple Page Peel Effect</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>

$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
40
Introduo ao jQuery
}
#pageflip .msg_block {
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;
}
</style>
</head>
<body id="home">
<div id="pageflip">
<a href="http://feeds.feedburner.com/sohtanaka"><img
src="page_flip.png" alt="" /></a>
<div class="msg_block"></div>
</div>
<div class="banner">
<div>
<a href="#" ><img src="/logo.gif" alt="Pixel Design Studios - Website
Design" title="Website Design Torrance"/></a>
</div>
</div>
<div class="topnav">
<ul>
<li class="btn_home"><a href="#">Home</a></li>
<li class="btn_about"><a href="#">About</a></li>
<li class="btn_service"><a href="#">Website Services</a></li>
<li class="btn_portfolio"><a href="#"> Portfolio </a></li>
<li class="btn_articles"><a href="#"> Articles </a></li>
<li class="btn_contact"><a href="#"> Contact </a></li>
</ul>
</div>
<div style=" text-align:center;"><a href="http://www.sohtanaka.com/web-
design/simple-page-peel-effect-with-jquery-css/">Page Peel Effect</a> by Soh
Tanaka. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web
Design Blog</a> for more tutorials!</div>
</body>
</html>
Arquivo style.css
/* CSS Document */
body {
color: #555;
font-size: 10px;
padding: 0;
margin: 0;
font-size: 11px;
font-family: verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0;
line-height: 1.6em;
41
Introduo ao jQuery
word-spacing: normal;
background: url(background.jpg) repeat-x;
}
* {
margin: 0;
padding: 0;
}
.hide {
display: none;
}
#container {
margin: 0 auto;
width: 920px;
}
/*Top Navigation*/
.topnav {
width: 100%;
margin: 0;
float: left;
padding: 0;
background: #000 url(topnav_stretch.jpg) repeat-x;
}
.topnav ul{
width: 870px;
margin: 0 auto;
padding: 0 25px;
height: 46px;
background: url(bg_topnav.jpg) no-repeat left top;
}
.topnav li{
margin: 0;
float: left;
list-style: none;
text-align:center;
font-size: 1.0em;
}
.topnav a{
color: #fff;
text-decoration: none;
display:block;
padding: 10px 16px 12px;
text-transform: uppercase;
}
.topnav a:hover{
color: #ccc;
display:block;
border-top: 3px solid #777;
}
#home li.btn_home a , #about .btn_about a , #service .btn_service a , #portfolio
.btn_portfolio a , #articles .btn_articles a , #contact .btn_contact a {
border-top: 3px solid #aed243;
42
Introduo ao jQuery

}
.banner {
float: left;
width: 100%;
height: 273px;
}
.banner div {
margin: 0 auto;
background:url(HP_banner.jpg) no-repeat left 0;
width: 920px;
height: 273px;
display:block;
}
.banner img {
padding: 40px 20px;
display: block;
}
.banner a , .banner a:hover{
border: 0;
color: #fff;
font-size: 1.1em;
}
a {
color: #1d68af;
}
/*----------------------------------Global------------------------------*/
.left {
float: left;
clear: both;
}
img.left {
margin: 3px 4px 3px 0;
}
.right {
float: right;
clear: both;
}
.center {
text-align: center;
margin: 0 auto;
}
small{
font-size: 9px;
}
.crumb {
margin-left: 20px;
}
img {
border: 0;
}
ol {
43
Introduo ao jQuery
margin-left: 30px;
}
hr {
border: 1px solid #f0f0f0;
height: 1px;
}
.alert {
color: #cd2525;
padding: 5px;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
h1 {
font-size: 1.6em;
color: #3f3f3f;
padding: 5px;
}
h2 {
font-size: 1.3em;
color: #3f3f3f;
padding: 5px 2%;
margin:0;
width: 96%;
}
#service .col70 h2 {
background: #f0f0f0;
margin: 10px 0;
float: left;
}
h2.handler {
font-size: 1.2em;
background: url(h2_handler.jpg) no-repeat;
color: #fff;
padding: 5px 5px 5px 30px;
cursor: pointer;
text-transform: none;
margin-bottom: 4px;
text-align: left;
border: 0;
}
.vert_nav h2 {
padding: 5px;
margin-top: 20px;
}
h3 {
font-size: 1.2em;
color: #444;
padding: 0;
}
p{
font-size: 1.1em;
44
Introduo ao jQuery
padding: 5px 0;
margin: 10px 0;
}
ul.listnone {
margin: 0;
padding: 0;
}
ul.listnone li {
padding: 2px;
list-style: none;
font-size: 1.1em;
}
ul.listnone li.bullet {
padding: 2px;
list-style: none;
padding-left: 20px;
}
.clear {
clear: both;
}
.ghost {
display: none;
}
.frame {
background: url(frame.jpg) no-repeat top left;
width: 251px;
height: 195px;
margin: 0 auto;
margin-top: -8px;
}
.frame img {
border: 0;
padding: 25px 10px 0 10px;
margin-bottom: 10px;
}
.corner {
float: left;
display: block;
background: #fdfdfd;
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
width: 96%;
margin-right: -2px;
padding: 0 2%;
}
.cornertop {
background: #fdfdfd url(corner_rt.gif) no-repeat right top;
width: 100%;
float: left;
display: block;
}
.cornertop img {
45
Introduo ao jQuery
float: left;
}
.cornerbtm {
background: #fdfdfd url(corner_rb.gif) no-repeat right top;
width: 100%;
float: left;
display: block;
margin-bottom: 10px;
}
.cornerbtm img {
float: left;
}
.breadcrumb {
float: left;
width: 100%;
font-size: 1em;
margin: 0 0 10px 0;
}
.col60 {
width: 57%;
float: left;
padding: 5px 7px;
}
.col40 {
width: 38%;
float: left;
padding: 5px 7px;
}
.col30 {
width: 30%;
float: left;
padding: 5px 10px;
}
.col30 p {
text-align: left;
color: #666;
}
.col70 {
width: 65%;
float: left;
padding: 5px 10px;
}
.col50 {
width: 45%;
float: left;
padding: 5px 7px;
}
.col3 {
width: 30.5%;
float: left;
padding: 5px 7px;
}
46
Introduo ao jQuery
.colspan2 ul {
float:left;
list-style:none;
width:49%;
margin:5px 0;
padding:0;
}
.colspan2 li {
border-bottom:1px dashed #f0f0f0;
padding:5px;
}
li.bullet {
background:url(green_bullet.gif) no-repeat 0 6px;
padding:3px 0 3px 20px;
}
.vert_nav {
border-right: 1px solid #f0f0f0;
}
#maincontent .vert_nav li a{
background: url(green_arrow.gif) no-repeat 5px 8px;
color: #116a92;
display:block;
border-bottom: 1px solid #f0f0f0;
}
#maincontent .vert_nav li a:hover{
background: #f0f0f0 url(green_arrow_f0.gif) no-repeat 5px 8px;
display:block;
color: #116a92;
}
/*-----------------------------------CONTENT------------------------------*/
#maincontent {
width: 850px;
margin: 0;
font-size: 1.0em;
line-height: 1.7em;
color: #444;
float: left;
}
#maincontent a{
color: #116a92;
}
#maincontent a:hover{
color: #116a92;
47
Introduo ao jQuery
text-decoration: underline;
}
a.linknone {
}
/*------------------------------Contact Form------------------------------*/
ul.contactform {
padding: 7px;
width: 100%;
}
ul.contactform li{
padding: 5px;
}
ul.contactform li em {
float: left;
text-align: right;
margin-right: 10px;
width: 15%;
font-weight: 700;
font-style: normal;
}
ul.contactform li textarea {
width: 75%;
}
ul.contactform li input {
width: 35%;
}
ul.contactform li input.btn {
width: 59px;
}
li.required input, li.required textarea{
border: 1px solid #e00000;
}
li.required{
color: #e00000;
}
/*----------------------------------Footer---------------------------------*/
.footer {
float: left;
clear:both;
color: #444;
width: 800px;
text-align:center;
display:block;
border-top: 1px solid #f0f0f0;
background: url(footer_stretch.gif) repeat-y;
}
.footer a{
color: #3783bc;
}
48
Introduo ao jQuery
.footer a:hover{
color: #999;
text-decoration:underline;
}
.footer h2 {
font-size: 1.3em;
background: none;
border: 0;
color: #fff;
padding: 5px;
text-transform: none;
text-align: left;
}
/*---------------------SIFR-----------------------*/
.sIFR-flash {
visibility: visible !important;
margin: 0;
}
.sIFR-replaced {
visibility: visible !important;
}
span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-flash + div[adblocktab=true] {
display: none !important;
}
.sIFR-hasFlash h1 {
visibility: hidden;
}
/*---------------------Slider-----------------------*/
div.scroller {
width: 251px;
overflow: hidden;
}
div.scroller div.section {
width:251px;
overflow:hidden;
float:left;
}
div.scroller div.content {
width: 10000px;
}
.next_arrow a{
height: 29px;
float: left;
49
Introduo ao jQuery
background: url(next_arrow.jpg) no-repeat;

width: 28px;
}
.next_arrow a:hover{
height: 29px;
float: left;
background: url(next_arrow.jpg) no-repeat right top;
width: 28px;
}
.back_arrow a{
height: 29px;
float: left;
background: url(back_arrow.jpg) no-repeat;
width: 28px;
}
.back_arrow a:hover{
height: 29px;
float: left;
background: url(back_arrow.jpg) no-repeat right top;
width: 28px;
}
#my-glider .center {
width: 60px;
margin: 0 auto 0;
position: relative;
}
.construction{
text-indent: -9999px;
float: left;
}
Ao longo dos arquivos possvel notar arquivos de jpg, png e gif.
5.2 Menus
Um bom exemplo de Menu para ser usado em site o Chili.
Ao passar o mouse nos menus, saem submenus e sub-submenus. Servindo tanto

para menu vertical quanto para menu horizontal.
50
Introduo ao jQuery
Arquivo index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>jQuery Menu - Exemplos/Examples</title>
<meta name="content-type" content="text/html; utf-8"/>
<meta name="robots" content="all" />
<link href="chili/javascript.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>


<script type="text/javascript" src="chili/chili.pack.js"></script>
<script id="setup" type="text/javascript">
ChiliBook.recipeFolder = "chili/";
ChiliBook.stylesheetFolder = "chili/";
</script>
<script>
$(function(){
$("a:first", ".menuv li.submenu", ".menuh
li.submenu").addClass("seta");
$(".menuv li.submenu, .menuh li.subv").each(function(){

var el = $('#' + $(this).attr('id') + ' ul:eq(0)');
$(this).hover(function(){
el.show();
}, function(){
el.hide();
});
});
});
</script>
<style>
* {
margin: 0; padding: 0;
}
body {
font-family: Tahoma; margin-bottom:20px; font-size: 11px; line-
height:18px;
}
51
Introduo ao jQuery
.explain {
text-align:center; font-weight:bold;
}
h2 {
font-size: 14px;
}
p {
padding: 5px 20px;
}
pre {
font-size: 11px; border: solid 1px #ccc; background: #f1f1f1;
margin: auto;
}
.demo, #menu {
width: 90%; margin:auto;
}
/* menu styles */
ul.menuh {
margin: 0; padding: 0; border: 1px solid #000000; height: 28px;
}
ul.menuh li.subv {
margin: 0px; padding: 0px; width: 148px; float: left; list-
style: none;
border-right: 1px solid #000000;
}
ul.menuh ul.menuv {
display: none; position: absolute; margin-left: -1px;
}
ul.menuh ul.menuv ul {
left: 150px;
}
ul.menuh a {
padding: 5px; display: block; text-decoration: none; color:
#000000;
}
ul.menuh li a:hover {
color: #fff; background-color: #009;
}
ul.menuh a.seta {
background: transparent url(indicador-submenu-1.gif) right
center no-repeat;
}
ul.menuv, ul.menuv ul {
margin: 0; padding: 0; border: 0px; width: 150px; background-
color: #fff;
z-index: 10000; border-top: 1px solid #000000;
}
ul.menuv li {
position: relative; list-style: none; border: 0px;
}
ul.menuv li a {
display: block; text-decoration: none; border: 1px solid
#000000; border-top: none;
52
Introduo ao jQuery
color: #000; padding: 5px 10px 5px 5px;

}
/* Fix IE. Hide from IE Mac \*/
* html ul.menuv li {
float: left; height: 1%;
}
* ul.menuv li a {
height: 1%;
}
/* End */
ul.menuv ul {
position: absolute; z-index: 10000; display: none; left: 149px;
top: -1px;
}
ul.menuv li.submenu ul {
display: none;
}
ul.menuv a.seta {
background: transparent url(indicador-submenu-2.gif) right
center no-repeat;
}
ul.menuv li a:hover {
color: #fff; background-color: #009;
}
</style>
</head>
<body>
<div class="demo">
<h2>jQuery Menu Constructor - <a
href="http://www.profissionaisti.com.br/wp-content/plugins/download-
monitor/download.php?id=3">Download files here</a></h2>
<pre><code class="javascript">
$(function(){
$("a:first", ".menuv li.submenu", ".menuh
li.submenu").addClass("seta");
$(".menuv li.submenu, .menuh li.subv").each(function(){

var el = $('#' + $(this).attr('id') + ' ul:eq(0)');
$(this).hover(function(){
el.show();
}, function(){
el.hide();
});
});
});
</code></pre>
</div>
<br />
<div id="menu">

<div id="menu-h">
<h2>Menu Horizontal</h2>
<ul class="menuh">
53
Introduo ao jQuery
<li class="subv">
<a href="#" onclick="location.href='?'">Menu 0</a>
</li>
<li id="submenu-1" class="subv">
<a href="#" class="seta">Menu 1</a>
<ul class="menuv">
<li>
<a href="#">Menu 1.1</a>
</li>
</ul>
</li>
<ul class="menuv">
<li id="submenu-3" class="submenu">
<ul class="menuv">
<a href="#">Menu 2.1.1</a>
<ul class="menuv">
<li id="submenu-5">
<a href="#">Menu 2.1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>
<a href="#">Menu 3</a>
<ul class="menuv">
<li id="submenu-7">
</li>
<a href="#">Menu 3.1.1</a>
<ul class="menuv">
<a href="#">Menu 3.1.1.1</a>
<ul class="menuv">
<li id="submenu-10">
<a href="#">Menu
3.1.1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
54
Introduo ao jQuery
<ul class="menuv">
</li>
</ul>
</li>
<ul class="menuv">
<ul class="menuv">
<a href="#">Menu 5.1.1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<br/>

<div id="menu-v">
<h2>Menu Vertical</h2>
<ul class="menuv">
<li id="submenuv-1">
<a href="#" onclick="location.href='?'">Menu 0</a>
</li>
</li>
<li id="submenuv-3" class="submenu">
<a href="#" title="twetewtwe">Menu 1.1</a>
<ul class="menuv">
<a href="#">Menu 1.1.1</a>
<ul class="menuv">
<a href="#">Menu 1.1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>
<a href="#1">Menu 2</a>
<ul class="menuv">
</li>
55
Introduo ao jQuery
</ul>
</li>
</li>
</ul>
</div>
</div>

</body>
</html>
Arquivo chili.pack.js
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a
)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){whil
e(c--)r[e(c)]=k[c]||e(c);k=[function(e){return
r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new
RegExp('\\b'+e(c)+'\\b','g'),k[c]);return
p}('(4($){a={2g:"1.2h",1s:J,14:"2i",15:4(8){3 k=$(8).1t("16");6
k?k:\'\'},17:"18.L",1u:J,S:"",1v:J,T:"",1w:\'<1x
16="$0">$$</1x>\',M:"&#F;",19:"&#F;&#F;&#F;&#F;",1a:"&#F;<1y/>",1b:{},A:{},1c:B.
1d&&B.1d.1z,N:"",U:1A};$.1B=4(l){l=$.V({1e:B,1C:J,1f:\'18.2j\'},l);4
1g(y){2k(\'y = \'+y+";");6 y}6 $(l.1f,l.1e).O(4(){3 s={1D:f.2l};$(\'>
1E[@P=1F]\',f).O(4(){$.V(s,1g(f.y))});$(\'> 1E\',f).1G(\'[@P=1F]\').O(4(){3
P=f.P,y=1g(f.y);$(s.1D).O(4(){f[P]=y})});5(l.1C){$(f).2m()}})};$.2n.L=4(l){3
7=$.V({},a,l||{});4 1H(x,9){4 1I(C,p){3 o=(1J
p.o=="2o")?p.o:p.o.1h;z.1i({C:C,o:"("+o+")",u:1+(o.c(/\\\\./g,"%").c(/\\[.*?\\]/
g,"%").2p(/\\((?!\\?)/g)||[]).u,D:(p.D)?p.D:7.1w})}4 1K(){3 1j=0;3 1k=G 1L;W(3
i=0;i<z.u;i++){3
o=z[i].o;o=o.c(/\\\\\\\\|\\\\(\\d+)/g,4(m,1l){6!1l?m:"\\\\"+(1j+1+1M(1l,10))});1
k.1i(o);1j+=z[i].u}3 1h=1k.2q("|");6 G 1m(1h,(9.2r)?"1N":"g")}4 1O(v){6
v.c(/&/g,"&2s;").c(/</g,"&2t;")}4 1P(v){6 v.c(/ +/g,4(1Q){6 1Q.c(/ /g,M)})}4
H(v){v=1O(v);5(M){v=1P(v)}6 v}4 1R(1S){3 i=0;3 j=1;3 p;1T(p=z[i++]){3
X=Q;5(X[j]){3 1U=/(\\\\\\$)|(?:\\$\\$)|(?:\\$(\\d+))/g;3 D=p.D.c(1U,4(m,1V,K){3
2u=\'\';5(1V){6"$"}E 5(!K){6 H(X[j])}E 5(K=="0"){6 p.C}E{6 H(X[j+1M(K,10)])}});3
1n=Q[Q.u-2];3 1W=Q[Q.u-1];3 1X=1W.1Y(Y,1n);Y=1n+1S.u;Z+=H(1X)+D;6 D}E{j+=p.u}}}3
M=7.M;3 z=G 1L;W(3 C 1Z 9.z){1I(C,9.z[C])}3 Z="";3 Y=0;x.c(1K(),1R);3
20=x.1Y(Y,x.u);Z+=H(20);6 Z}4 21(11){5(!7.A[11]){3
e=B.22("2v");e.2w="1o";e.2x="w/23";e.2y=11;B.2z("2A")[0].2B(e);7.A[11]=J}}4
12(8,24){3 9=7.1b[24];5(!9){6}$8=$(8);3
x=$8.w();5(!x){6}x=x.c(/\\r\\n?/g,"\\n");3
I=1H(x,9);5(7.19){I=I.c(/\\t/g,7.19)}5(7.1a){I=I.c(/\\n/g,7.1a)}$8.2C(I);5(a.1c)
{$8.2D().H("25").R("26",4(){a.U=f}).R("27",4(){5(a.U==f){a.N=B.1d.1z().2E}})}}4
28(k,l){3 1p={S:7.S,29:k+".2F",T:7.T,2a:k+".23"};3 s;5(l&&1J
l=="18"){s=$.V(1p,l)}E{s=1p}6{9:s.S+s.29,1o:s.T+s.2a}}5(7.17){$.1B({1e:f,1f:7.17
})}f.O(4(){3 8=f;3 k=7.15(8);5(\'\'!=k){3
h=28(k,8.L);5(7.1u||8.L){5(!7.A[h.9]){2G{7.A[h.9]=[8];$.2H(h.9,4(1q){1q.h=h.9;7.
1b[h.9]=1q;5(7.1v){21(h.1o)}3 q=7.A[h.9];W(3
i=0,2b=q.u;i<2b;i++){12(q[i],h.9)}})}2I(2J){2K("2L 9 W \'"+k+"\' 2M 1G 2N 1Z
\'"+h.9+"\'")}}E{7.A[h.9].1i(8)}12(8,h.9)}E{12(8,h.9)}}});6
f};$(4(){5(a.1s){5(a.2c){a.14=a.2c;5(a.2d){a.15=4(8){3 2e=G
1m("\\\\b"+a.2d+"\\\\b","1N");3 1r=$(8).1t("16");5(!1r){6\'\'}3
k=$.2O(1r.c(2e,""));6 k}}}$(a.14).L()}5(a.1c){4 2f(w){5(\'\'==w){6""}2P{3 13=(G
2Q()).2R()}1T(w.2S(13)>-1);w=w.c(/\\<1y[^>]*?\\>/2T,13);3
8=B.22(\'<25>\');8.2U=w;w=8.2V.c(G 1m(13,"g"),\'\\r\\n\');6
w}$("2W").R("2X",4(){5(\'\'!=a.N){2Y.2Z.30(\'31\',2f(a.N));32.33=34}}).R("26",4(
){a.N=""}).R("27",4(){a.U=1A})}})})(35);',62,192,'|||var|function|if|return|book
|el|recipe|ChiliBook||replace|||this||path|||recipeName|options|||exp|step|||set
tings||length|str|text|ingredients|value|steps|queue|document|stepName|replaceme
nt|else|160|new|filter|dish|true||chili|replaceSpace|preContent|each|name|argume
nts|bind|recipeFolder|stylesheetFolder|preElement|extend|for|aux|lastIndex|perfe
ct||stylesheetPath|makeDish|newline_flag|automaticSelector|codeLanguage|class|me
tadataSelector|object|replaceTab|replaceNewLine|recipes|preFixCopy|selection|con
text|selector|jsValue|source|push|prevLength|exps|aNum|RegExp|offset|stylesheet|
settingsDef|recipeLoaded|elClass|automatic|attr|recipeLoading|stylesheetLoading|
56
Introduo ao jQuery
defaultReplacement|span|br|createRange|null|metaobjects|clean|target|param|metap
aram|not|cook|prepareStep|typeof|knowHow|Array|parseInt|gi|escapeHTML|replaceSpa
ces|spaces|chef|matched|while|pattern|escaped|input|unmatched|substring|in|lastU
nmatched|checkCSS|createElement|css|recipePath|pre|mousedown|mouseup|getPath|rec
ipeFile|stylesheetFile|iTop|elementPath|elementClass|selectClass|preformatted|ve
rsion|8c|code|metaobject|eval|parentNode|remove|fn|string|match|join|ignoreCase|
amp|lt|bit|link|rel|type|href|getElementsByTagName|head|appendChild|html|parents
|htmlText|js|try|getJSON|catch|recipeNotAvailable|alert|the|was|found|trim|do|Da
te|valueOf|indexOf|ig|innerHTML|innerText|body|copy|window|clipboardData|setData
|Text|event|returnValue|false|jQuery'.split('|'),0,{}))
Arquivo javascript.css
/*
===============================================================================
Chili is the jQuery code highlighter plugin
...............................................................................
Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/chili/
===============================================================================
*/
.javascript .mlcom { color: #4040c2; }

.javascript .com { color: green; }
.javascript .regexp { color: maroon; }
.javascript .string { color: teal; }
.javascript .keywords { color: navy; font-weight: bold; }
.javascript .global { color: blue; }
.javascript .numbers { color: red; }
5.3 Galeria de imagem, vdeo e contedo

Para galerias com contedo interno, seja imagem, vdeo ou texto Image Rotator
with Preview. Este plugin muito para notcias de capa de site.
possvel fazer desaparecer com o contedo do site a partir de hide.
57
Introduo ao jQuery
Alm disso, os contedos vo passando ou podem ser acessados pelo menu

lateral.
Arquivo index.html

<head>
<title>Image Rotator w/ Teaser - CSS & jQuery Tutorial</title>
body {
background: #1d1d1d;
font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
font: 3em normal Georgia, "Times New Roman", Times, serif;
color: #fff;
text-align: center;
background: url(h1_bg.gif) no-repeat;
margin: 100px 0 10px;
}
.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
#main {
padding: 10px;
border: 1px solid #ccc;
}
a {color: #fff;}
/*--Main Image Preview--*/

.main_image {
float: left;
background: #333;
position: relative;
58
Introduo ao jQuery
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px; width: 93px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}
.image_thumb {
float: left;
width: 299px;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
59
Introduo ao jQuery
}
.image_thumb ul {
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}
</style>

//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list

$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
60
Introduo ao jQuery
var imgDesc = $(this).find('.block').html(); //Get HTML of

block
var imgDescHeight = $(".main_image").find('.block').height();
//Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...

return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -
imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({
opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt:
imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of

'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list
only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
});//Close Function
</script>
</head>
<body>
<div class="container">
<h1>Image Gallery w/ Teaser - CSS & jQuery Tutorial<small>by Soh
Tanaka</small></h1>
</div>
<div id="main" class="container">
<div class="main_image">
<img src="banner1.jpg" alt="- banner1" />
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
61
Introduo ao jQuery
<p>Autem conventio nimis quis ad, nisl secundum sed,

facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus
eum quadrum, volutpat et.<br /><a
href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn
Jones</a> </p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li>
<a href="banner1.jpg"><img src="banner1_thumb.jpg"
alt="Slowing Dow" /></a>
<div class="block">
<h2>Slowing Down</h2>
<p>Autem conventio nimis quis ad, nisl secundum

sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.<br /><a
href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn
Jones</a> </p>
</div>
</li>
<li>
alt="Organized Food Fight" /></a>
<div class="block">
<h2>Organized Food Fight</h2>
validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum
validus eum quadrum, volutpat et.</p>
href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn
Jones</a></p>
</div>
</li>
<li>
alt="Endangered Species" /></a>
<div class="block">
<h2>Endangered Species</h2>
href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn
Jones</a></p>
</div>
</li>
<li>
alt="Evolution" /></a>
62
Introduo ao jQuery
<div class="block">
<h2>Evolution</h2>
validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum
href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn
Jones</a></p>
</div>
</li>
<li>
alt="Puzzled Putter" /></a>
<div class="block">
<h2>Puzzled Putter</h2>
validus eum quadrum, volutpat et. <br /><a
href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By
Glenn Jones</a></p>
</div>
</li>
<li>
alt="Secret Habit" /></a>
<div class="block">
<h2>Secret Habit</h2>
sed, facilisi, vicis augue regula, ratis, autem.<br /><a
href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By
Glenn Jones</a></p>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<p style="color: #fff; font-size: 1.2em; padding: 10px 0; float:
right;">Tutorial by <a href="http://www.SohTanaka.com" target="_blank"
style="color: #fff;">Soh Tanaka</a> - <a href="http://www.SohTanaka.com"
target="_blank" style="color: #fff;">www.SohTanaka.com</a></p>
</div>
</body>
</html>
5.4 Modais
63
Introduo ao jQuery
Existem vrios tipos de modais, a Lightbox talvez seja uma das mais conhecidas,
contudo aqui nesse captulo veremos um modal simples de usar e que pode ser manuseado
das mais variadas formas, inserindo texto, imagem, entre outros. Na sua estrutura, esse
plugin cria um fade ao fundo e faz com que um contedo aparea frente a outros. O CSS e
o JS esto no prprio arquivo.
Arquivo index.html
<head>
<title>Simple JQuery Modal Window from Queness</title>

<script>
//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag

var id = $(this).attr('href');
//Get the screen height and width

var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen

$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width

var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
64
Introduo ao jQuery
});
//if close button is clicked

$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked

$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
body {
font-family:verdana;
font-size:15px;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px;
height:203px;
65
Introduo ao jQuery
padding:10px;
background-color:#ffffff;
}
#boxes #dialog1 {
width:375px;
height:203px;
}
#dialog1 .d-header {
background:url(login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}
#dialog1 .d-header input {

position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}
#dialog1 .d-blank {
float:left;
background:url(login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}
#dialog1 .d-login {
float:left;
width:108px;
height:53px;
}
#boxes #dialog2 {
background:url(notice.png) no-repeat 0 0 transparent;
width:326px;
height:229px;
padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from
Queness WebBlog</a></h2>
<ul>
66
Introduo ao jQuery
<li><a href="http://www.queness.com">Normal Link</a></li>

<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>
</div>
<div id="boxes">
<div id="dialog" class="window">

Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>


<div id="dialog1" class="window">
<div class="d-header">
<input type="text" value="username" onclick="this.value=''"/><br/>
<input type="password" value="Password" onclick="this.value=''"/>
</div>
<div class="d-blank"></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="login-
button.png"/></div>
</div>



<div id="dialog2" class="window">
So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you
want! Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>



<div id="mask"></div>
</div>

</body>
</html>
67
Introduo ao jQuery
Unidade 6
jQuery UI
6.1 Os segredos ao inserir jQuery UI na pgina
A jQuery UI (User Interface) uma biblioteca mais direcionada ao usurio. De

certa forma as programaes finais j esto prontas, para que o programador apenas utilize
os movimentos e demais construes apenas alterando seu cdigo. Um bom exemplo disso
a autocomplementao de campo, quando no Google, por exemplo comeamos a digitar
uma palavra e logo abaixo aparecem palavras relacionadas ou muito parecidas com a que
desejamos e por muitas das vezes realmente . Pois, o Google, tem seu banco de palavras
mais procuradas e coloca em primeiro as mais buscadas para facilitar a navegao do
usurio.
Assim como o jQuery, o jQuery UI tambm de uso livre e o site para podermos
acompanhar novas programaes http://jqueryui.com.
6.2 Criando e importando temas do jQuery UI com o

ThemeRoller
Existem diversos temas prontos, para baixar o aquivo acesse
http://jqueryui.com/themeroller/, altere o seu tema como preferir, alterando, bordas, fontes,
zonas de contedo, entre outros e depois baixe o arquivo j com as suas alteraes.
Um bom exemplo do que alterar seria o estgio ativo de rea clicvel.
68
Introduo ao jQuery
Ao realizar todas as alteraes que desejamos basta clicar em Download theme.
Ir abrir uma pgina na qual poderemos escolher quais componentes que sero
necessrios para utilizarmos. Entre eles vrios de UI Core, de Interactions, de Widgets e
de Effects. Ao lado direito aparecer a opo de baixar o tema j customizado.
Basta baixar e utilizar como j visto anteriormente com o jQuery.
69
Introduo ao jQuery
70
Introduo ao jQuery
Unidade 7
Elementos do jQuery UI
Veremos ao longo desse captulo alguns elementos do jQuery UI. Nos exemplos
abaixo alm dos .js que j usamos anteriormente, tambm faremos uso de arquivos
externos ao site, como apis do Google, por exemplo. O problema pode ser considerar
arquivo externo, pois no teremos qualquer acesso caso queiramos alterar ou caso haja
problema de conexo.
7.1 Accordion
Arquivo accordion.html utilizando de diversos arquivos externos para simular
um efeito de sanfona.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery UI - Accordion Demos & Documentation</title>
<meta name="keywords" content="jquery,user

interface,ui,widgets,interaction,javascript" />
<meta name="description" content="jQuery UI is the official jQuery user
interface library. It provides interactions, widgets, effects, and theming for
creating Rich Internet Applications." />
<meta name="author" content="The jQuery Project" />
<link rel="shortcut icon" href="/images/favicon.ico" />

<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/base.css" type="text/css"
media="all" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-
ui.css" type="text/css" media="all" />
href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"
type="text/css" media="all" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"
71
Introduo ao jQuery
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-
i18n.min.js" type="text/javascript"></script>
<script src="/js/demos.js" type="text/javascript"></script>
<script src="/themeroller/themeswitchertool/"
#jq-books{width:200px;float:right;margin-right:0}
#jq-books li{line-height:1.25em;margin:1em 0 1.8em;clear:left}
#home-content-wrapper #jq-books a.jq-bookImg{float:left;margin-
right:10px;width:55px;height:70px}
#jq-books h3{margin:0 0 .2em 0}
#home-content-wrapper #jq-books h3 a{font-size:1em;color:black;}
#home-content-wrapper #jq-books a.jq-buyNow{font-
size:1em;color:white;display:block;background:url(http://static.jquery.com/files
/rocker/images/btn_blueSheen.gif) 50% repeat-x;text-
decoration:none;color:#fff;font-weight:bold;padding:.2em .8em;float:left;margin-
top:.2em;}
</style>
</head>
<body id="demos">

<div id="wrapper">
<div id="banner">
<div id="navigation"></div>
</div>
<div id="content-wrapper">
<div id="content">
<div class="content-top"></div> <div class="content">
var section = "demos/accordion";
</script>
<div id="demo-header">
<h2>Accordion</h2>
</div>
<div style="position: absolute; right: 27px"
id="switcher"></div>
<div id="demo-config">
<div id="demo-frame-wrapper">
<p id="demo-link"><a
href="/demos/accordion/default.html" target="_blank"><span class="ui-icon ui-
icon-newwin"></span>New window</a></p>
<div id="demo-frame">
<!DOCTYPE html>
<script>
$(function() {
$( "#accordion" ).accordion();
});
72
Introduo ao jQuery
</script>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum
sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra
leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque
vulputate.
</p>
</div>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac
libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus
venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat
lectus.
73
Introduo ao jQuery
Class aptent taciti sociosqu ad litora torquent per conubia nostra,

per
inceptos himenaeos.
</p>
</div>
</div>
</div>
<div class="demo-description">
<p> </p>
</div>


</body>
</html>
7.2 Tabs
Os tabs funcionam como se fossem pequenas marcaes de fichrios, quando
clicamos em um o contedo altera assim como sua marcao. O arquivo tabs.html est
descrito assim:
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI - Tabs Demos & Documentation</title>


media="all" />
<script
74
Introduo ao jQuery
<script
<script
top:.2em;}
</style>
</head>
<body id="demos">
<div id="wrapper">
<div id="banner">
<h1 class="logo"> </h1>
<div id="navigation">
<div class="right"></div>
</div>
</div>
<div id="content">
var section = "demos/tabs";
</script>
<div class="content-body">
<table cellspacing="0" cellpadding="0" class="layout-grid">
<tr>
<td>
<!DOCTYPE html>
<table class="layout-grid" cellspacing="0" cellpadding="0">
<tr>
<td class="left-nav">
<dl class="demos-nav">
<dt> </dt>
</dl>
75
Introduo ao jQuery
</td>
<td class="normal">
<h2>Tabs</h2>
</div>
<div style="position: absolute; right:
27px" id="switcher"></div>
<p id="demo-link"><!DOCTYPE
html>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</p>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,
risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum
quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor
risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend
adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor
nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.
Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula
in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing
adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus.
Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis.
Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.
Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue
orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit
ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a,
lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae
neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis,
pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor
eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut
76
Introduo ao jQuery
sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede.
Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque
nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<div class="demo-description"></div>
</div>
</div>
<div id="demo-config-menu">
<!DOCTYPE html>
<div class="demos-nav">
<h4> </h4>
</div>
</div>
</div>
<div class="UIAPIPlugin" id="widget-docs">
<div id="theming"> </div>
</div>
</p>

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="bg"></div>
<div class="inner"></div>
</div>
</div>
</body>
</html>
7.3 Dialog
A caixa de dilogo aparece em frente aos demais contedos. Muitas vezes
utilizado como pop-up. O arquivo dialog.html est descrito desta forma:
77
Introduo ao jQuery
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI - Dialog Demos & Documentation</title>


media="all" />
<script
<script
<script
top:.2em;}
</style>
</head>
<body id="demos">
<div id="wrapper">
78
Introduo ao jQuery
<div id="banner">
</div>
</div>
<div id="content">
var section = "demos/dialog";
</script>
<tr>
<td>
<!DOCTYPE html>
<tr>
<dt> </dt>
</dl>
</td>
<td class="normal">
<h2>Dialog</h2>
</div>
<p id="demo-
link"> </p>
<!DOCTYPE html>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>.
Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum,
enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit
eros a lectus.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
79
Introduo ao jQuery
<input type="radio" />radio<br />

<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</p>
and timestamp 20110617185055 -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="inner">
<p> </p>
</div>
</div>
</div>
</body>
</html>
7.4 Buttons
80
Introduo ao jQuery
Alguns pequenos efeitos podem ser atribudos a botes e conferidos no arquivo

button.html:
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI - Button Demos & Documentation</title>
media="all" />
<script
<script
<script
top:.2em;}
</style>
</head>
<body id="demos">
81
Introduo ao jQuery

<div id="wrapper">
<div id="banner">
<h1 class="logo"> </h1>
</div>
</div>
<div id="content">
var section = "demos/button";
</script>
<tr>
<td>
<!DOCTYPE html>
<tr>
<td class="left-nav"> </td>
<td class="normal">
<h2>Button</h2>
</div>
<!DOCTYPE html>
<script>
$(function() {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button"/>
a href="#">An anchor</a>
<p> </p>
</div>
</div>
82
Introduo ao jQuery
<!DOCTYPE html>
<h4> </h4>
</div>
</div>
</div>
</div>
</p>
and timestamp 20110617203227 -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="inner">
<p> </p>
</div>
</div>
</div>
</body>
</html>
7.5 Datepicker
O Datepicker um selecionador de data, e a data atual normalmente a origem
dessa seleo onde pode ser conferida no arquivo datepicker.html:
<!DOCTYPE html>
<html>
<head>
83
Introduo ao jQuery
<title>jQuery UI - Datepicker Demos & Documentation</title>

media="all" />
<script
<script
<script
top:.2em;}
</style>
</head>
<body id="demos">
<div id="wrapper">
<div id="banner">
</div>
</div>
<div id="content">
84
Introduo ao jQuery

var section = "demos/datepicker";
</script>
<tr>
<td>
<!DOCTYPE html>
<tr>
<dt> </dt>
</dl>
</td>
<td class="normal">
<h2>Datepicker</h2>
</div>
<p id="demo-link"> </p>
<!DOCTYPE html>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<p>The datepicker is tied to a standard form input field. Focus on the input
(click, or use the tab key) to open an interactive calendar in a small overlay.
Choose a date, click elsewhere on the page (blur the input), or hit the Esc key
to close. If a date is chosen, feedback is shown as the input's value.</p>
</div>
</div>
<!DOCTYPE html>
<h4>
85
Introduo ao jQuery

and timestamp 20110617203228 --> </h4>
</div>
</div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="inner"></div>
</div>
</div>
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1076265-1']);
_gaq.push(['_trackPageview']); _gaq.push(['_setDomainName', '.jqueryui.com']);
(function() {var ga = document.createElement('script'); ga.type =
'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(ga);})();
</script>
$('a').click(function(){
this.blur();
});
});
</script>
</body>
</html>
86

Introducao Jquery

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introducao Jquery

Enviado por

Direitos autorais:

Formatos disponíveis

Introduo ao jQuery

Todos os direitos reservados para Alfamdia Prow.

As informaes contidas neste material de treinamento so distribudas NO ESTADO EM

07/2011 Verso 1.0

Alfamdia d Boas Vindas aos seus clientes e deseja um

- Acesso a extranet www.l3tool.com para verificao de agenda e baixar os materiais.

- Avaliaes de acompanhamento e final de curso (em cada mdulo) durante todo o

- Qualquer necessidade de alterao na agenda ou cursos contratados inicialmente,

- Contatos com a Alfamdia podem ser feitos atravs dos e-mails:

matricula@alfamidia.com.br dvidas aps contratao

info@alfamidia.com.br novas contrataes

UNIDADE 1 INTRODUO AO JQUERY ............................................................................................................... 6

A jQuery uma biblioteca JavaScript, cross-browser, desenvolvida por John

A biblioteca disponibilizada como software livre e disponibilizada sobre as

Foi criada tendo como foco a simplicidade e com o objetivo de facilitar a

A jQuery leve (em torno de 30kb), extensvel, oferece suporte a plugins e

1.2 Para que serve?

1.4 Obtendo e instalando a jQuery

PRODUCTION : a verso voltada para ambiente de produo. uma verso

DEVELOPMENT: a verso de desenvolvimento. a verso no compactada

Basta escolher a verso que voc deseja baixar e clicar em Download. A

Usualmente guardamos a biblioteca com o nome jquery-1.5.1.min.js quando for a

1.5 Inserindo a jQuery na pgina

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

Tambm muito comum encontrarmos na internet pginas que fazem referncia a

2.1 O construtor jQuery

denominado dessa forma para ser simples e fcil de decorar. E o fato de se

Nos exemplos acima, estamos instruindo a jQuery a encontrar os elementos H1, P,

2.2 Pronto para comear?

window.onload = function() { alert("pgina carregada");}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

No se preocupe se o cdigo parecer complicado. Logo vamos ver todos os

2.4 Manipulando o CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Poderamos tornar nosso cdigo mais simples, trocando as funes esconde e

3.1.1 Seletor $(id)

<p id="paragrafo" style="display: none;">

No exemplo acima foi utilizado um boto para disparar o evento de exibio do

3.1.2 Seletor $(classe)

3.1.3 Seletor $(elemento)

O seletor $(elemento) utilizado para referenciar uma tag ou conjunto de tags de

3.1.4 Agrupamento de seletores

No exemplo acima, ao ser carregada a pgina a fonte dos elementos referenciados

3.1.5 Ancestral descendente

<input type="button" id="botao" value="adiciona cor vermelha" />

No exemplo acima adicionado um evento click ao boto que adiciona a cor

3.1.6 Pai > filho

<input type="button" id="botao" value="adiciona cor vermelha" />

Foi utilizado o mesmo exemplo do seletor anterior, mas como no h elemento

3.1.7 Anterior + prximo

<input type="button" id="botao" value="adiciona cor vermelha" />

3.1.8 Anterior ~ irmos

<input type="button" id="botao" value="adiciona cor vermelha" />

<p>Paragrafo 1 irmo da div.</p>

<input type="button" id="botao" value="adiciona cor vermelha" />

<p>Paragrafo 1 irmo da div.</p>

O exemplo acima marca o primeiro dos pargrafos com o fundo vermelho.

<input type="button" id="botao" value="adiciona cor vermelha" />

<p>Paragrafo 1 irmo da div.</p>

O exemplo acima marca o ltimo dos pargrafos com o fundo vermelho.

<input type="button" id="botao" value="adiciona cor vermelha" />

<p>Paragrafo 1 irmo da div.</p>

<p>Paragrafo 2 irmo da div.</p>

/--Main Image Preview--/