jQuery

jQuerywrite less, do more.

Agenda> 1. Introdução;> 2. Instalação;> 3. Sintaxe;> 4. Seletores;> 5. Eventos;> 6. Efeitos;> 7. HTML;> 8. Elementos

Relacionados;

> 9. Ajax;> 10. Diversos;> 11. Exemplos;

1 - Introdução> É uma biblioteca JavaScript;

> É fácil de aprender;

> Simplifica muito a programação JavaScript.

1.1 – O que é?> O objetivo é tornar o uso do JavaScript mais

fácil no seu site;

> Características do jQuery:> HTML / manipulação DOM;> Manipulação CSS;> Métodos de evento HTML;> Efeitos e animações;> AJAX;> Utilidades;

Introdução

1.2 – Por que?> Mais popular e extensível;

> 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); Introdução

2 – Instalação> 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 versões disponíveis para download

> Versão de produção – a biblioteca foi “minimizada” e “comprimida” (minified and compressed);

> Versão de desenvolvimento – é para teste e desenvolvimento, pois a biblioteca não foi minimizada e comprimida;

> Ambas versões podem ser baixadas do

jQuery.com;

> É um arquivo único.Instalação

http://www.jquery.com/

2.1 – Notas> Minified and compressed - Diminuir tamanho

do arquivo para melhorar desempenho> Remove espaços em brancos desnecessários;> Remove comentários;> Encurta nome de variáveis e mais;

Instalação\Download

2.2 – Alternativas de Download

> Não é necessário 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;

Instalação

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js

3 – Sintaxe> Com o jQuery selecionamos elementos HTML e

executamos ações com eles.

3.1 – Sintaxe jQuery> Sintaxe básica: $(seletor).acao();

> Um $ acessa o jQuery;> (seletor) para selecionar elementos HTML;> acao() para executar algo com os elementos encontrados

através 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”;Sintaxe

3.2 – Document Ready> A página não pode ser manipulada com

segurança até que o documento está “pronto”;> É uma boa prática aguardar o documento ser

completamente carregado e estar pronto antes de trabalhar com ele;

> Isso permite que você tenha o código

JavaScript antes do corpo do documento na

seção <head>;

> Ações que podem falhar se forem executadas

antes do documento estiver pronto:> Tentar esconder um elemento que ainda não está criado

no documento;> Tentar obter o tamanho de uma imagem que não está

carregada ainda;> Exemplo 3.2

Sintaxe

3.2 – Document Ready$(document).ready(function(){

// Colocar os métodos de jQuery aqui.});

$(function(){// Colocar os métodos de jQuery aqui.

});

Sintaxe

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 começa com “$”

e parênteses: $();

4.1 – Seletor de elemento

> Seleciona baseado no nome do elemento:

> Ex.: Selecionar todos elementos <p> da

página: $(“p”);> Exemplo 4.1

Seletores

4.2 – Seletor #id> Encontra o elemento através do atributo “id”

de uma tag HTML - $(“#teste”);> Um “id” deve ser único dentro de uma página,

então usamos o seletor #id quando quisermos encontrar um elemento específico na página;

> Exemplo 4.2

Seletores

4.3 – Seletor .classe> Encontra elementos através de uma classe

específica: $(“.teste”);> Exemplo 4.3

Seletores

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

Seletores

5 – Eventos> Eventos são todas as ações dos usuários, que

uma página web pode responder;

> jQuery foi feito sob medida para responder a

eventos em uma página HTML;

5.1 – Sintaxe> $(“p”).click();

> Para atribuir um evento de clique em todos os parágrafos de uma página.

> $(“p”).click(function(){

// O que deve acontecer quando o evento é disparado. }) ; Eventos

5.2 – Eventos comuns> click(); - Quando o usuário clica no elemento

HTML;

> dblclick(); - Quando o usuário 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 usuário clica com o

botão esquerdo do mouse, enquanto o mouse está sobre o elemento HTML;

Eventos

5.2 – Eventos comuns> mouseup(); - Quando o botão esquerdo do

mouse é liberado, enquanto o mouse está sobre o elemento HTML;

> hover(); - Combinação das funções

mouseenter() e mouseleave();

> focus(); - Quando um elemento HTML recebe o

foco;

> blur(); - Quando o ponteiro do mouse sai de

cima de um elemento HTML;

Eventos

6 – Efeitos> jQuery torna trivial incluir efeitos simples para

a sua página;

> Os efeitos podem usar as configurações

internas, ou fornecer uma duração

personalizada;

> Podemos criar animações personalizadas de

propriedades CSS arbitrárias;

6.1 – Hide e Show> Com jQuery podemos esconder e mostrar

elementos HTML;> Sintaxe:

> $(seletor).hide(speed, callback);

> $(seletor).show(speed, callback);> O parâmetro opcional “speed” especifica a

velocidade com que será escondido/mostrado, e pode ser informado “slow”, “fast”, ou um valor em milissegundos;

> O parâmetro opcional “callback” é uma função a ser executada depois que o método hide() ou show() completa;

> Exemplo 6.1.1

Efeitos

6.1 – Hide e Show> Podemos alternar entre os método hide() e

show() com o método toggle();

> Ele mostra os elementos que estão escondidos

e esconde os que estão sendo mostrados;

> Sintaxe: > $(seletor).toggle(speed, callback);

> Exemplo 6.1.2Efeitos

6.2 – Fading> Com esse efeito fazemos elementos

desaparecer ou aparecer gradualmente;

> Métodos:> fadeIn(); > fadeOut(); > fadeToggle(); > fadeTo();

Efeitos

6.2 – Método fadeIn()> O método fadeIn() é usado para fazer aparecer

gradualmente um elemento escondido;

> Sintaxe:> $(seletor).fadeIn(speed, callback);

> Exemplo 6.2.1

Efeitos\Fading

6.2 – Método fadeOut()> O método fadeOut() é usado para fazer

desaparecer gradualmente um elemento

visível;

> Sintaxe:> $(seletor).fadeOut(speed, callback);

> Exemplo 6.2.2 Efeitos\Fading

6.2 – Método fadeToggle()

> O método fadeToggle() alterna entre os

métodos fadeIn() e fadeOut();

> Se o elemento está desaparecido, então o

método faz o elemento aparecer

gradualmente;

> Se o elemento está visível, então o método

desaparece gradualmente;

> Sintaxe:> $(seletor).fadeToggle(speed, callback);

> Exemplo 6.2.3

Efeitos\Fading

6.2 – Método fadeTo()> O método 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.4Efeitos\Fading

6.3 – Sliding> Faz os elementos HTML deslizar para cima ou

para baixo;

> Método:> slideDown();> slideUp();> slideToggle();

Efeitos

6.3 – Método slideDown()

> O método slideDown() é usado para fazer um

elemento deslizar para baixo;

> Sintaxe:> $(seletor).slideDown(speed, callback);

> Exemplo 6.3.1

Efeitos\Sliding

6.3 – Método slideUp()> O método slideUp() é usado para fazer um

elemento deslizar para cima;

> Sintaxe:> $(seletor).slideUp(speed, callback);

> Exemplo 6.3.2

Efeitos\Sliding

6.3 – Método slideToggle()

> O método slideToggle() alterna entre os

métodos slideDown() e slideUp();

> Se o elemento está para cima, então o método

desliza o elemento para baixo;

> Se o elemento está baixo, então o método

desliza o elemento para cima;

> Sintaxe:> $(seletor).slideToggle(speed, callback);

> Exemplo 6.3.3

Efeitos\Sliding

6.4 –Animation> O método animate() permite criar animações

personalizadas;

> Sintaxe: > $(seletor).animate({param}, speed, callback);

> O parâmetro obrigatório “param” define as

propriedades CSS para ser animadas;

> Exemplo 6.4.1Efeitos

6.4 –Manipular Múltiplas Propriedades

> É possível passar vários propriedades CSS para

o método animate();

> A maioria das propriedades CSS é possível

manipular com o método;> Toda propriedade dever ser “camel-cased” na

utilização do método; > Ex. marginRight, paddingTop

> Exemplo 6.4.2

> É possível utilizar os valores relativo ao

elemento atual, utilizando os += ou -= antes

do valor;

> Exemplo 6.4.3

Efeitos\Animation

6.4 –Manipular Múltiplas Propriedades

> Podemos até especificar o valor de uma

propriedade de animação como “toggle”,

“show”, “hide”;> Exemplo 6.4.4

> Podemos enfileirar várias métodos.> Exemplo 6.4.5 Efeitos\Animation

6.5 – Parar Animações> Usa-se o método stop() para parar as

animações ou efeitos antes deles acabarem;

> Sintaxe:> $(seletor).stop(stopAll, goToEnd);

> O parâmetro opcional “stopAll” especifica se a fila de animações deve ser limpa ou não. O padrão é falso, que significa que só a animação ativa será interrompida;

> O parâmetro opcional “goToEnd” especifica se é para completar a atual imediatamente. O padrão é falso;

> Exemplo 6.5.1 / Exemplo 6.5.2

Efeitos

6.6 – Callback> Uma função “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 Efeitos

6.7 – Chaining> Podemos atrelar ações / métodos;> Encadeamento nos permite executar vários

métodos (sobre o mesmo elemento) dentro de uma única instrução.

> Exemplo: $

("#p1").css("color","red").slideUp(2000).slideD

own(2000); Efeitos

Exercício 1> Exercício 1

7 – HTML> jQuery possui métodos 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

padrão para o acesso e atualização dinâmicas

de conteúdos de documentos HTML e XML;

7.1 – Obter Conteúdo> Três simples, mas útil, métodos jQuery para

manipulação DOM são:

> text(); - Atribui ou retorna o texto do

elemento selecionado;

> html(); - Atribui ou retorna o conteúdo do

elemento selecionado (incluindo as tags

HTML);

> Val(); - Atribui ou retorna o valor de um

campo de formulário;

> Exemplo 7.1.1 / Exemplo 7.1.2

HTML

7.1 – Obter Atributos> O método attr() é usado para obter valores de

atributos;

> Exemplo 7.1.3

HTML

7.2 – Atribuindo Conteúdo

> Com os mesmos métodos conseguimos definir

um valor:;> text();> html();> val();

> Exemplo 7.2.1

HTML

Documents

jQuery