Post on 08-Jul-2015
description
JQUERY EM AÇÃO
Thiago Miranda dos SantosBacharel em Sistemas de Informação
Pós Graduado em Engenharia de Sistemas
O que é Jquery?
O que é Jquery?
É um Framework Javascript
Criado em 2006, e já bem robusto
Veio para simplificar a interatividade e a
criação de efeitos visuais em Websites
Quem usa Jquery
E muitos
Mais...
Características do Jquery
É Leve (Menos de 100 kb)
É Cross-Browser
É Simples e Rápido
É extensivel com Plugins
Tem uma comunidade enorme de
Desenvolvedores
Filosofia: Escreva menos, Faça mais!
Escrever menos, fazer mais
"O foco principal da biblioteca jQuery é a
simplicidade. Por que submeter os
desenvolvedores ao martírio de escrever
longos e complexos códigos para criar
simples efeitos?"
(John Resig - criador do jQuery)
Escrever menos, fazer mais
divs = document.getElementByTagName(„div‟);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = „none‟;}
Esconder todas as Divs de uma página em Javascript
Esconder todas as Divs de uma página utilizando Jquery
$(“div”).hide();
Para desenvolver bem
WTF??????
?
Código Não Obstrusivo
Separar Programação, Marcação e Estilo
Programação BackEnd (PHP, ASP, JSP, Ruby,
Python...) Marcação (Html)
Estilo (Css)
Programação Front End (Javascript)
Como não fazer
<p style="padding-left:10;Color:#000"
onClick=“alert(„Teste‟);“ />Clique aqui</p>
Código Obstrusivo
Como Fazer
<p class=“teste” >Clique aqui</p>
No HTML
No CSS
.teste{ padding-letf:10px; color:#000; }
No Javascript (Com Jquery)
$(„.teste‟).onclick(function( ){
alert(„teste‟);
});
Vamos ComeçarSites Importantes
jquery.com - Download
api.jquery.com - Documentação
forum.jquery.com - Comunidade
plugins.jquery.com - Extensão
Vamos ComeçarDownload
Production – Código Compactado, tamanho do arquivo menor,
são retirados os comentários, os espaçamentos e as quebras
de linha. Ideal para ser utilizado na sua produção.
Development – Código Legível, identado, tamanho do arquivo
maior. Ideal para quem vai desenvolver Plugins ou conhecer a
fundo a biblioteca.
Vamos ComeçarInstalação
<html><head> <title>A instalação</title> <script type='text/javascript' src='jquery-1.6.4.min.js'></script></head> ...
ConstrutorTudo começa por aqui
$( )
Função de seleção, substitui
Jquery( )
Como Funciona
1- Encontre algo no HTML
2- Faça alguma coisa com ele.
$( “.teste”)Encontre
.css(“color:”,”blue”);
Faça alguma coisa com ele
Vamos ComeçarHello World
$(document).ready(function(){
alert(“Hello World”);
});
Não se esqueça do $(document).ready
Vamos utilizá-lo muito!!!!
Método Ready
$(document).ready
• Equivalente ao window.onload do Javascript
• Aguarda o carregamento da árvore do
documento para executar os scripts
• Serve de Container para os Scripts
• Diferente do onload ele não espera tudo
estar carregado e sim só a árvore do
documento.
Árvore do Documento
Seletores
• Seletores Simples
• Seletores Compostos
• Seletores de Filtros
• Seletores de Conteúdo
• Seletores de Atributos
• Seletores de Formulários
Para a Prática
$(„seletor‟).css(„atributo‟,‟valor‟);
Método CSS
background color
$(„seletor‟).css(„background‟,‟red‟);
$(„seletor‟).css(„color‟,‟green‟);
$(„seletor‟).css(„color‟,‟#FF00EE‟);
Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„#teste‟)
<div id=“teste”></div>
acessa
Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„.teste‟)
<div class=“teste”></div>
acessa
Seletores Simples
•Você acessa diretamente os elementos com
o Ids, Classes e tipos especificados.
$(„div‟)
<div></div>
<div></div>
Acessa todas as divs do documento
Seletores Compostos
•É a combinação de dois ou mais seletores
simples
$(„div p‟)
<div><p>Teste</p></div>
<p></p>
Acessa o parágrafo apenas dentro da div
Seletores Compostos
$(„div > p‟)
Acessa os parágrafo que tenham um
elemento div como pai
$(„pai > filho‟)
<div>
<p>Teste</p>
<p>Teste</p>
</div>
Seletores Compostos
$(„div + p‟)
Acessa o parágrafo posterior a div
$(anterior + posterior)
<div>
<p>Teste</p>
</div>
<p>Teste</p> - Acessa apenas este
Seletores Compostos
$(„h2 ~ p‟)
Acessa os parágrafos irmãos posteriores a
h2
$(anterior ~ irmãos)
<h2>Teste</h2>
<p>Teste</p> - Acessa este
<p>Teste</p> - Acessa este
<div><p>teste</p></div> - Não Acessa este
Seletores Filtros
$(„li:first‟)
Acessa o primeiro item de uma lista
$(seletor:first) $(seletor:last)
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li>
</ul>
Seletores Filtros
$(„li:last‟)
Acessa o último item de uma lista
$(seletor:first) $(seletor:last)
<ul>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li> - Acessa este
</ul>
Seletores Filtros
$(„li:not(li:first)‟)
Apenas não acessa o primeiro
item de uma lista
$(seletor:not(seletor2))
<ul>
<li>Teste</li> - Não acessa este
<li>Teste</li> - Acessa este
<li>Teste</li> - Acessa este
</ul>
Seletores Filtros
$(„li:eq(1)‟)Acessa o índice 1 de uma lista, começando de 0
$(seletor:eq(índice))
<ul>
<li>Teste</li>
<li>Teste</li> - Acessa este
<li>Teste</li>
</ul>
Seletores Filtros
$(„li:even‟)Acessa os índices pares
$(seletor:even)
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li> - Acessa este
</ul>
Seletores Filtros
$(„li:odd‟)Acessa os índices ímpares
$(seletor:odd)
<ul>
<li>Teste</li>
<li>Teste</li> - Acessa este
<li>Teste</li>
</ul>
Seletores Filtros
$(„li:gt(1)‟)Acessa os índices maiores que o indicado
$(seletor:gt(índice))
<ul>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li> - Acessa este
</ul>
Seletores Filtros
$(„li:lt(1)‟)Acessa os índices menores que o indicado
$(seletor:lt(índice))
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li>
</ul>
Seletores Filtros
$(„li:lt(1)‟)Acessa os índices menores que o indicado
$(seletor:lt(índice))
<ul>
<li>Teste</li> - Acessa este
<li>Teste</li>
<li>Teste</li>
</ul>
Seletores de Conteúdo
$(„p:contains(„dentro‟)‟)Acessa um parágrafo que contém a palavra dentro
$(seletor:contains(‘texto’))
<p>Teste dentro</p> - Acessa este
<p>Teste</p>
<p>Teste</p>
Seletores de Conteúdo
$(„div:has(p)‟)Acessa uma div que contenha um parágrafo
$(seletor:has(seletor2))
<div><p>Teste dentro</p></div> - Acessa este
<div>Teste</div>
<div></div>
Seletores de Conteúdo
$(„div:hidden‟)Acessa uma div que esteja em modo de visibilidade oculto.
Outros
$(„div:parent‟)Acessa uma div que contenham elementos.
$(„div:visible‟)Acessa uma div que esteja visível.
Seletores de Atributos
$(„div[id=teste]‟)Acessa uma div que tenha o id igual a teste
$(seletor[atributo]) ou
$(seletor[atributo=valor])
<div><p>Teste dentro</p></div>
<div id=“teste”>Teste</div> - Acessa este
<div></div>
Seletores de Atributos
$(„div[id!=teste]‟)
$(seletor[atributo!=valor])
<div><p>Teste dentro</p></div> - Acessa este
<div id=“teste”>Teste</div>
<div></div> - Acessa este
Acessa uma div que tenha o id diferente a teste
Seletores de Atributos
$(„div[id^=teste]‟)
$(seletor[atributo^=valor])
<div><p>Teste dentro</p></div>
<div id=“teste”>Teste</div> - Acessa este
<div id=“teste2”></div> - Acessa este
Acessa uma div que tenha o id iniciado por teste
Seletores de Atributos
$(„div[id *= teste]‟)Acessa uma div que tenha teste dentro do valor do atributo
Outros
$(„div[id $= este]‟)Acessa uma div que o valor do id termina com este.
$(„div[id = teste][class = bola]‟)Acessa uma div que satisfaz os atributos selecionados, pode
se adicionar quantos atributos forem necessários.
Seletores de Formulários
$(„:text‟)
$(:seletor)
<label><input type=“text”></label> - Acessa este
<label><input type=“password”></label>
Acessa os inputs do tipo texto em um formulário
Seletores de Formulários
$(„:text‟)
$(„:password‟)
$(„:radio‟)
$(„:checkbox‟)$(„:enabled‟)
$(„:disabled‟)
$(„:checked‟)
$(„:select‟)
Prática
5 Minutos
Prática
-Colorir o Background de verde da 1º e do
3º Itens de uma lista no documento com
apenas uma linha.
- Selecionar uma div que vem após a div
com id teste2 e pintá-la de azul.
- Selecionar os campos select no
formulário e pintá-los de vermelho.
- Selecionar todas as divs que contenham
o nome teste e pintá-las de preto.
Eventos
• Evento = Gatilho
• Uma ação realizada pelo usuário que
faz com que o Script seja rodado.
• Sem Eventos não teria motivo da
existência do javascript, muito menos do
Jquery.
Eventos
.click( )Executa uma ação no momento em que o seletor é clicado
$(„#botao1‟).click(function( )
{
Ações
});
Eventos
.dblclick( )Executa uma ação no momento em que o seletor é clicado
duas vezes seguidas (duplo clique)
$(„#botao1‟).dblclick(function( )
{
Ações
});
Eventos
.blur( )Quando o seletor não está mais com o foco sobre ele, muito
utilizado em formulários.
$(„:text‟).blur(function( )
{
Ações
});
Eventos
.change( )Quando o valor do seletor for alterado ele realiza uma ação.
$(„:checkbox‟).change(function( )
{
Ações
});
Eventos
.focus( )Quando o seletor entrar em foco uma ação é executada.
Muito utilizada também em formulários
$(„:text‟).focus(function( )
{
Ações
});
Eventos
.keydown( )Quando uma tecla é digitada no seletor uma ação é
executada.
$(„:text‟).keydown(function( )
{
Ações
});
Eventos
.keyup( ) e .keypress( ) Keyup é quando uma tecla pressionada é solta no seletor
Keyup é quando uma tecla é pressionada e solta no seletor
$(„:text‟).keyup(function( )
{
Ações
});
Eventos
.mousedown( ) Quando o ponteiro do mouse é clicado sobre o seletor
$(„h1‟).mousedown(function( )
{
Ações
});
Eventos
.mouseup( ) Quando o clique no mouse é solto sobre o seletor
$(„h1‟).mouseup(function( )
{
Ações
});
Eventos
.mouseover( ) Quando o ponteiro do mouse passa sobre o seletor
$(„h1‟).mouseover(function( )
{
Ações
});
Eventos
Muitos Outros
.load
.submit
.unload
.select
.scroll
.resize
.error
Prática
10 Minutos
Prática
- Faça com que o botão 1 ao ser clicada
pinte todas as Divs de Azul
- Faça com que o botão 2 ao ser Clicado
Duplamente pinte apenas a 1ª Div de azul
- Faça com que o campo texto ao sair de
foco pinte os pinte a última div de verde
- Ao mudar o valor do select pinte os itens
pares da lista presente no arquivo
Eventos
Muitos Outros
.load
.submit
.unload
.select
.scroll
.resize
.error
Métodos
Estilização
.css( )Utiliza as regras do css para estilizar
os seletores.
Ex.: Background, Color, width,
height, border, display ...
Prática
5 Minutos
Prática
- Teste novamente o método de estilização
utilizando os outros atributos do css, como
cor da letra, largura, altura, visibilidade.
- Faça este teste utilizando os eventos nos
botões 1, 2 e 3.
Métodos
Manipulação
.attr( )Manipula os atributos dos elementos
selecionados
$(„:text‟).attr(„value‟,‟10‟);
Os atributos podem ser tanto acessados quanto manipulados, e vários
atributos podem ser trabalhados
Métodos
Manipulação
.html( )Manipula conteúdo html dentro de
um seletor.
$(„.teste1‟).html(„teste<br>teste2‟);
Métodos
Manipulação
.text( )Manipula conteúdo textual dentro de
um seletor.
$(„.teste1‟).text(„teste‟);
Métodos
Manipulação
.val( )Manipula o atributo value de um
seletor.
$(„:text‟).val(„teste‟);
Prática
10 Minutos
Prática
- Ao clicar em um botão recupere o texto
do parágrafo abaixo da div com id teste 2 e
adicione em forma de html na div de classe
teste 1.
- Faça com que ao ser digitado um valor
num campo texto o mesmo seja
adicionado na div com id vazia.
Twitter: @mirandathiago84
Email: mirandathiago@gmail.com
Site: www.thiagomiranda.net