J Query

jQuery
write less, do more.

Agenda
> 1. Introduo;
> 2. Instalao;
> 3. Sintaxe;
> 4. Seletores;
> 5. Eventos;
> 6. Efeitos;
> 7. HTML;
> 8. Elementos
Relacionados;
> 9. Ajax;
> 10. Diversos;
> 11. Exemplos;
1 - Introduo
> uma biblioteca JavaScript;
> fcil de aprender;
> Simplifica muito a programao JavaScript.

1.1 O que ?
> O objetivo tornar o uso do JavaScript mais fcil no
seu site;
> Caractersticas do jQuery:
> HTML / manipulao DOM;
> Manipulao CSS;
> Mtodos de evento HTML;
> Efeitos e animaes;
> AJAX;
> Utilidades;
1.2 Por que?
> Mais popular e extensvel;
> Simplifica chamadas AJAX;
> Muitas das maiores empresas na WEB usa o jQuery
(Google, Microsoft, IBM, Netflix);
> Funciona nos principais navegadores (inclusive no
Internet Explorer 6);
2 Instalao
> Baixar a biblioteca de jQuery.com;
> Incluir a partir de uma CDN (Content Delivery
Network) ;
> Incluir via tag <script src=path> </script>
2.1 Download
> Existe duas verses disponveis para download
> Verso de produo a biblioteca foi minimizada e
comprimida (minified and compressed);
> Verso de desenvolvimento para teste e desenvolvimento,
pois a biblioteca no foi minimizada e comprimida;
> Ambas verses podem ser baixadas do jQuery.com;
> um arquivo nico.
2.1 Notas
> Minified and compressed - Diminuir tamanho do
arquivo para melhorar desempenho
> Remove espaos em brancos desnecessrios;
> Remove comentrios;
> Encurta nome de variveis e mais;
2.2 Alternativas de
Download
> No necessrio realizar o download e hospedar no
seu site;
> Podemos utiliz-lo via CDN (Content Delevery
Network);
> Ele disponibilizado pelo o Google e Microsoft;
> Google -
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js;
> Microsoft - http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.10.2.min.js;
> Pode estar no cache, caso a pessoa entrou em outro
site que utilizou-o via CDN;

3 Sintaxe
> Com o jQuery selecionamos elementos HTML e
executamos aes com eles.

3.1 Sintaxe jQuery
> Sintaxe bsica: $(seletor).acao();
> Um $ acessa o jQuery;
> (seletor) para selecionar elementos HTML;
> acao() para executar algo com os elementos encontrados atravs
do seletor informado.
> Exemplos:
> $(this).hide() esconde o elemento atual;
> $(p).hide() esconde todos os elementos <p>;
> $(.teste).hide() esconde todos os elementos com classe =
teste;
> $(#teste).hide() esconde o elemento com id = teste;

3.2 Document Ready
> A pgina no pode ser manipulada com segurana
at que o documento est pronto;
> uma boa prtica aguardar o documento ser
completamente carregado e estar pronto antes de
trabalhar com ele;
> Isso permite que voc tenha o cdigo JavaScript
antes do corpo do documento na seo <head>;
> Aes que podem falhar se forem executadas antes
do documento estiver pronto:
> Tentar esconder um elemento que ainda no est criado no
documento;
> Tentar obter o tamanho de uma imagem que no est carregada
ainda;
> Exemplo 3.2
3.2 Document Ready
$(document).ready(function(){
// Colocar os mtodos de jQuery aqui.
});

$(function(){
// Colocar os mtodos de jQuery aqui.
});
4 Seletores
> uma das partes mais importantes da biblioteca
jQuery;
> baseado nos seletores CSS;
> Encontra (ou seleciona) elementos HTML, com base
em sua ID, classes, tipos, atributos, valores de
atributos;
> Todos os seletores no jQuery comea com $ e
parnteses: $();
4.1 Seletor de elemento
> Seleciona baseado no nome do elemento:
> Ex.: Selecionar todos elementos <p> da pgina:
$(p);
> Exemplo 4.1
4.2 Seletor #id
> Encontra o elemento atravs do atributo id de uma
tag HTML - $(#teste);
> Um id deve ser nico dentro de uma pgina, ento
usamos o seletor #id quando quisermos encontrar um
elemento especfico na pgina;
> Exemplo 4.2
4.3 Seletor .classe
> Encontra elementos atravs de uma classe
especfica: $(.teste);
> Exemplo 4.3
4.4 Outros Exemplos de
Seletores
> $(*) Todos os elementos; (exemplo)
> $(this) O elemento HTML atual;
> $(p.intro) Todos elementos <p> com classe intro;
> $(p:first) Primeiro elemento <p>;
> $(ul li:first) Primeiro elemento <li> do primeiro
elemento <ul>;
> $(ul li:firs-child) Primeiro elemento <li> de todos
elementos <ul>;
> $([href]) Todos elementos com atributo href;
> $(a[target=vazio]) Todos elementos <a> com o
valor do atributo target igual a vazio;
5 Eventos
> Eventos so todas as aes dos usurios, que uma
pgina web pode responder;
> jQuery foi feito sob medida para responder a eventos
em uma pgina HTML;

5.1 Sintaxe
> $(p).click();
> Para atribuir um evento de clique em todos os
pargrafos de uma pgina.

> $(p).click(function()
{
// O que deve acontecer quando o evento
disparado.
}) ;

5.2 Eventos comuns
> click(); - Quando o usurio clica no elemento HTML;
> dblclick(); - Quando o usurio da um clique duplo no
elemento HTML;
> mouseenter(); - Quando o ponteiro do mouse passa
por cima de um elemento HTML;
> mouseleave(); - Quando o ponteiro do mouse sai de
cima de um elemento HTML;
> mousedown(); - Quando o usurio clica com o boto
esquerdo do mouse, enquanto o mouse est sobre o
elemento HTML;

5.2 Eventos comuns
> mouseup(); - Quando o boto esquerdo do mouse
liberado, enquanto o mouse est sobre o elemento
HTML;
> hover(); - Combinao das funes mouseenter() e
mouseleave();
> focus(); - Quando um elemento HTML recebe o foco;
> blur(); - Quando o ponteiro do mouse sai de cima de
um elemento HTML;
6 Efeitos
> jQuery torna trivial incluir efeitos simples para a sua
pgina;
> Os efeitos podem usar as configuraes internas, ou
fornecer uma durao personalizada;
> Podemos criar animaes personalizadas de
propriedades CSS arbitrrias;
6.1 Hide e Show
> Com jQuery podemos esconder e mostrar elementos
HTML;
> Sintaxe:
> $(seletor).hide(speed, callback);
> $(seletor).show(speed, callback);
> O parmetro opcional speed especifica a velocidade
com que ser escondido/mostrado, e pode ser
informado slow, fast, ou um valor em
milissegundos;
> O parmetro opcional callback uma funo a ser
executada depois que o mtodo hide() ou show()
completa;
> Exemplo 6.1.1
6.1 Hide e Show
> Podemos alternar entre os mtodo hide() e show()
com o mtodo toggle();
> Ele mostra os elementos que esto escondidos e
esconde os que esto sendo mostrados;
> Sintaxe:
> $(seletor).toggle(speed, callback);
> Exemplo 6.1.2
6.2 Fading
> Com esse efeito fazemos elementos desaparecer ou
aparecer gradualmente;
> Mtodos:
> fadeIn();
> fadeOut();
> fadeToggle();
> fadeTo();
6.2 Mtodo fadeIn()
> O mtodo fadeIn() usado para fazer aparecer
gradualmente um elemento escondido;
> Sintaxe:
> $(seletor).fadeIn(speed, callback);

> Exemplo 6.2.1
6.2 Mtodo fadeOut()
> O mtodo fadeOut() usado para fazer desaparecer
gradualmente um elemento visvel;
> Sintaxe:
> $(seletor).fadeOut(speed, callback);

> Exemplo 6.2.2
6.2 Mtodo fadeToggle()
> O mtodo fadeToggle() alterna entre os mtodos
fadeIn() e fadeOut();
> Se o elemento est desaparecido, ento o mtodo
faz o elemento aparecer gradualmente;
> Se o elemento est visvel, ento o mtodo
desaparece gradualmente;
> Sintaxe:
> $(seletor).fadeToggle(speed, callback);
> Exemplo 6.2.3
6.2 Mtodo fadeTo()
> O mtodo fadeTo() faz o elemento
aparecer/desaparecer at uma dada opacidade;
> Valores permitidos entre 0 e 1;
> Sintaxe:
> $(seletor).fadeToggle(speed, opacity, callback);
> Exemplo 6.2.4
6.3 Sliding
> Faz os elementos HTML deslizar para cima ou para
baixo;
> Mtodo:
> slideDown();
> slideUp();
> slideToggle();
6.3 Mtodo slideDown()
> O mtodo slideDown() usado para fazer um
elemento deslizar para baixo;
> Sintaxe:
> $(seletor).slideDown(speed, callback);

> Exemplo 6.3.1
6.3 Mtodo slideUp()
> O mtodo slideUp() usado para fazer um elemento
deslizar para cima;
> Sintaxe:
> $(seletor).slideUp(speed, callback);

> Exemplo 6.3.2
6.3 Mtodo slideToggle()
> O mtodo slideToggle() alterna entre os mtodos
slideDown() e slideUp();
> Se o elemento est para cima, ento o mtodo
desliza o elemento para baixo;
> Se o elemento est baixo, ento o mtodo desliza o
elemento para cima;
> Sintaxe:
> $(seletor).slideToggle(speed, callback);
> Exemplo 6.3.3
6.4 Animation
> O mtodo animate() permite criar animaes
personalizadas;
> Sintaxe:
> $(seletor).animate({param}, speed, callback);
> O parmetro obrigatrio param define as
propriedades CSS para ser animadas;
> Exemplo 6.4.1
6.4 Manipular Mltiplas
Propriedades
> possvel passar vrios propriedades CSS para o
mtodo animate();
> A maioria das propriedades CSS possvel
manipular com o mtodo;
> Toda propriedade dever ser camel-cased na
utilizao do mtodo;
> Ex. marginRight, paddingTop
> Exemplo 6.4.2
> possvel utilizar os valores relativo ao elemento
atual, utilizando os += ou -= antes do valor;
> Exemplo 6.4.3
6.4 Manipular Mltiplas
Propriedades
> Podemos at especificar o valor de uma propriedade
de animao como toggle, show, hide;
> Exemplo 6.4.4

> Podemos enfileirar vrias mtodos.
> Exemplo 6.4.5

6.5 Parar Animaes
> Usa-se o mtodo stop() para parar as animaes ou
efeitos antes deles acabarem;
> Sintaxe:
> $(seletor).stop(stopAll, goToEnd);
> O parmetro opcional stopAll especifica se a fila de
animaes deve ser limpa ou no. O padro falso,
que significa que s a animao ativa ser
interrompida;
> O parmetro opcional goToEnd especifica se para
completar a atual imediatamente. O padro falso;
> Exemplo 6.5.1 / Exemplo 6.5.2

6.6 Callback
> Uma funo callback executada depois que o
efeito atual 100% finalizado;
> usada para evitar o erro que pode ocorrer vindo de
linhas de comandos executadas antes do efeito
terminar completamente;
> Exemplo sem Callback: Exemplo 6.6.1
> Exemplo com Callback: Exemplo 6.6.2

6.7 Chaining
> Podemos atrelar aes / mtodos;
> Encadeamento nos permite executar vrios mtodos
(sobre o mesmo elemento) dentro de uma nica
instruo.
> Exemplo:
$("#p1").css("color","red").slideUp(2000).slideDown(2
000);
Exerccio 1
> Exerccio 1
7 HTML
> jQuery possui mtodos para a alterar e manipular
elementos HTML e seus atributos;
> Uma parte muito importante do jQuery a
possibilidade de manipular o DOM;
> DOM Document Object Model Define um padro
para o acesso e atualizao dinmicas de contedos
de documentos HTML e XML;

7.1 Obter Contedo
> Trs simples, mas til, mtodos jQuery para
manipulao DOM so:
> text(); - Atribui ou retorna o texto do elemento
selecionado;
> html(); - Atribui ou retorna o contedo do elemento
selecionado (incluindo as tags HTML);
> Val(); - Atribui ou retorna o valor de um campo de
formulrio;
> Exemplo 7.1.1 / Exemplo 7.1.2

7.1 Obter Atributos
> O mtodo attr() usado para obter valores de
atributos;
> Exemplo 7.1.3
7.2 Atribuindo Contedo
> Com os mesmos mtodos conseguimos definir um
valor:;
> text();
> html();
> val();
> Exemplo 7.2.1

J Query

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

J Query

Enviado por

Direitos autorais:

Formatos disponíveis

jQuery

write less, do more.

Você também pode gostar