m






 

   
 


  

  



 

m   
  
 





 a
  

V O que é o jQuery?
V Como Surgiu o jQuery?;
V Conceitos básicos de jQuery;

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 2

 ë
 
 
V jQuery é uma biblioteca Java Script criada
por John Resig e disponibilizada como
software livre e aberto, ou seja, de emprego
e uso regido segundo licença conforme as
regras estabelecidas pelo MIT
(Massachusetts Institute of Tecnology) e pelo
GPL (GNU General Public Licence).

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 3

  
 
V `e acordo com John Resig, ³o foco
principal da biblioteca jQuery é a
simplicidade.
V Por que submeter os desenvolvedores
ao martírio de escrever longos e
complexos códigos para criar simples
efeitos?´, e vemos que isto realmente é
real no desenvolvimento hoje em dia.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 4

   
 
V `estina-se a adicionar interatividade e
dinamismo às páginas web,
proporcionando ao desenvolvedor
funcionalidades necessárias à criação
de scripts que visem a incrementar de
forma progressiva e não obstrutiva a
usabilidade, a acessibilidade e o design.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 5

 D
    
    ! " #$
V Aocê não pode manipular a página com segurança
até o documento estar "pronto" (ready).

V O jQuery detecta o estado de prontidão para você; o

código incluído dentro de $(document).ready()
somente irá rodar depois que a página estiver pronta
executar o código Java Script.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 6

D ë% &'      

. $(document).ready( function() {
alert(µPágina carregada!¶);

. });

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 7

D ( % ) '* +      ! " #

. $(function() {
alert(µPágina carregada!¶);

. });

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 8

 D D      !,-     .
  /
> lxemplo:
. function readyFn() {
Aar texto = ³Mensagem´;
Alert (texto);

. }
3. $(document).ready(readyFn);

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 9

 D 0  '   ' 
V O conceito mais básico do jQuery é "selecionar
alguns elementos e fazer alguma coisa com eles.³

V O jQuery suporta a maioria dos seletores CSS3,

assim como alguns seletores não-padrão.

V Para uma referência completa de seletores, visite

http:

api.jquery.com
category
selectors
.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 10

 D 0 '   ' 
> Selecionando pelo I`:
? $(µ#meuId¶);
? Lembrando que os id¶s devem ser únicos.

> Selecionando pela Classe CSS:

? $(µdiv.classeCss¶);
? há um aumento de performance se você especificar o
tipo de elemento.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 11

 D 0 '   ' 
> Selecionando pelo atriburo:
? $( † input [ type = ³text´ ] );
ß Cuidado: lsse tipo de seleção pode ser muito lento!

> Pseudo-seletores:
? $(µ div.lista:first ');
?

retorna o primeiro elemento contido na div que tem a classe lista.

? $(µ #myForm :input ');

?

selecione todos os elementos input num formulário

? $(µ div:visible ');

?

seleciona todos os div¶s visíveis

? $(µ div:gt(
) ');
?

todos exceto as três primeiras divs

? $(µ div:animated ');

?

Seleciona todos os div¶s animados

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 12

 D 01-    !  
V Ê



 



? If ( $(µ div.lista ¶) ){ ... }

V lsta forma não funcionará!

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 13

 D 0 1-    !  
If ( $(µ div.lista ¶).lenght ){ ... }
> Agora sim funciona!

V ) . 2. 3+   + + 

'*  ',- 24 . 3  
' !  '    
V  +  ! 
2 + + '* 
+    ! '       
. '  ' 

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 14

D 5  6789:+      ,- 789:
  

V jQuery(µ<hlste é o Cabeçalho que será

inserido na página web<
h¶)

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 15

 D 5 %  '.   ',;
V Toda vez que você faz uma seleção, um monte de código é
executado, e o jQuery não faz caching de seleções para você.
Se você fez uma seleção que você talvez precise fazer
novamente, você deve salvar a seleção numa variável ao
invés de fazer a seleção várias vezes.
> var divs = $('div');

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 16

D <  =!  >'  ',;
V Algumas vezes você tem uma seleção que contém mais do que você quer; neste caso,
você talvez queira refinar sua seleção.
V O jQuery oferece vários métodos para você obter exatamente o que precisa.

> ·
 




— O elemento div.foo que contém <p's

> ·

 
 


— llementos h que não têm a classe bar

> ·
 



 

— Itens de listas não-ordenadas com a classe current

> ·
 

 

— Somente o primeiro item da lista não ordenada

> ·
 
! 

— O sexto item da lista

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 17

D ?  ' '    @! ' 
V O jQuery oferece vários pseudo-seletores que
lhe ajudam a encontrar elementos nos seus
formulários;
V lstes são especialmente úteis porque pode ser
difícil distinguir entre elementos form baseados
no seu estado ou tipo usando seletores CSS
padrão.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 18

D ?  ' '    @
! ' 
V :button - Seleciona elementos do tipo <button e elementos com
type="button³;
V :checkbox - Seleciona inputs com type="checkbox³;
V :checked - Seleciona inputs selecionados;
V :disabled - Seleciona elementos de formulário desabilitados;
V :enabled - Seleciona elementos de formulário habilitados;
V :file - Seleciona inputs com type="file³;
V :image - Seleciona inputs com type="image³;
V :input - Seleciona <input, <textarea, e elementos <select
V :password - Selecionam inputs com type="password"
V :radio - Selecionam inputs com type="radio"
V :reset - Selecionam inputs com type="reset"
V :selected - Seleciona inputs que estão selecionados
V :submit - Seleciona inputs com type="submit"
V :text - Seleciona inputs com type="text"

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 19

 D A  1  
V Se você chamar um método numa seleção e este
método retornar um objeto jQuery, você pode
continuar a chamar métodos do jQuery sem precisar
pausar com um ponto-e-vírgula.

? $(µ #content ').find(µ h3 ').eq(

).html(µ o novo texto do terceiro h3! ');

? Formatando:
. $(µ #content ')

. .find(µ h3 ')
3. .eq(
)
4. .html(µ o novo texto do terceiro h3! ');

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 20

D A ë % =    ',-   '   ! 
V $(µ #cont µ) - Seleciona o elemento que contem o id = cont;
V .find(µ h3 ¶) - procura todos os cabeçalhos de nível 3;
V .eq(
) - seleciona a terceira ocorrencia de cabeçalhos;
V .html(µ novo texto do terceiro h3! ¶) - Modifica o texto do terceiro cabeçalho;
V .end() - restaura sua seleção original;
V .eq() - seleciona a primeira ocorrencia de cabeçalhos;
V .html('Novo texto do primeiro parágrafo!'); - Modifica o texto do primeiro cabeçalho;

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 21

D B % C 
V O jQuery ³sobrecarrega´ seus métodos, então o
método usado para ³setar´ um valor geralmente
tem o mesmo nome do método usado para obter
um valor.
V `efinições:
? Quando um método é usado para modificar um
valor, ele é chamado de 6


? Quando um método é usado para ³pegar´ um valor, ele é
chamado de ›



29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 22

 D B ë % 9       
V $html()
? $(µdiv.lista¶).html(³<strong lsse é o novo valor da div <
strong´);
ż lsse comando modifica todo o conteúdo da div que tenha a classe lista

V $append()
? $(µdiv.lista¶).append(³<h3Mais um cabeçalho!<
h3´);
ż lsse comando adicionará mais um cabeçalho no final do div que tenha a
classe lista.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 23

 D B (% 9       C
V $html()
? alert($(µdiv.lista¶).html());
ż lsse comando mostra uma mensagem com o conteúdo da div

V $width()
? $(µdiv.caixa¶).width($(µdiv.lista¶).width());
ż lsse comando ³seta´ o tamanho da div com a classe caixa com o mesmo
tamanho da div com a classe lista

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 24

D ë
 2 '2>D;
V Propriedades CSS que normalmente incluem um
hífen, precisam ser acessadas no estilo |

| 6
  |

V   

       
6

 66  |
fontSize em JavaScript.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 25

 D ë
ë %   + + 
V lxemplo:
? $(µ h3 ¶).css(µ fontSize ¶);
ż lle retorna uma string, como ³
px´

? $(µ h3 ¶).css(µ backgroundColor¶);

ż lle retorna uma string, como ³#
34´

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 26

D ë
ë %   + + 
V $(µ h3 ').css('fontSize', 'px');
ż Setando uma propriedade individual

V $(µ h3 ').css(
? {
ż µ fontSize ¶ : 'px',
ż µ color ¶ : 'red'
ż }

? );
ż Setando múltiplas propriedades

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 27

 D ëë  &  '  +  ' 
V Como um getter, o método $.fn.css é útil;
V lntretanto, ele geralmente deve ser evitado como
um setter em código de produção, pois você não
quer informação de apresentação no seu
JavaScript.
V Ao invés disso, escreva regras CSS para classes
que descrevam os vários estados visuais, e então
mude a classe no elemento que você quer afetar.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 28

D ëë ë% 1E+'   +   ' 

V var h = $(µ h ¶);

ż Salvamos na variável ³h´ todos os cabeçalhos de nível .

V h.addClass(µ big ¶);

ż Adiciona a classe ³big´ à variável ³h´.

V h.removeClass(µ big ¶);

ż Remove a classe ³big´ à variável ³h´.

V h.toggleClass(µ big ¶);

ż Se estiver ³setado´ com a classe ³big´ ele remove, senão adiciona.

V if (h.hasClass(µ big ¶)) { ... }

ż Aerifica se a variável ³h´ está ³setado´ com a classe ³big´

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 29

D ë(  D;
V O código do lxemplo 3.
., ³Métodos básicos
de dimensões´ é somente uma introdução
muito curta sobre as funcionalidades de
dimensões do jQuery;
V para detalhes completos sobre os métodos de
dimensão do jQuery, visite
http:

api.jquery.com
category
dimensions
.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 30

D ë( ë  9   ;
V $(µ h ¶).width(µ px ¶);
? Seta a largura de todos os elementos h

V $(µ h ¶).width();
? Obtém a largura do primeiro h

V $(µ h ¶).height(µ += px ¶);

? Seta a altura de todos os elementos h

V $(µ h ¶).height();
? Obtém a altura do primeiro h

V $(µ h ¶).position();
? Retorna um objeto contendo informações sobre a posição do primeiro h relativo
a seu pai

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 31

 D ëD  ) 
V O método $.fn.attr atua como getter e setter .

V Assim como os métodos $.fn.css , $.fn.attr

atuando como um setter, podem aceitar tanto uma
chave e um valor ou um objeto contendo um ou
mais pares chave
valor.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 32

 D ëD ë   
V $(µ a ¶).attr(µ href ¶,
µtodosMeusHrefsSaoOMesmoAgora.html¶);

. $(µ a ¶).attr({
I. µ title ¶ : µ todos os títulos são os mesmos também! ¶,
II. µ href ¶ : µ algoNovo.html ¶

. });

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 33

 D ëD ( % C 
V $(µ a ¶).attr(µ href ¶);
ż Retorna o href do primeiro elemento <a do documento.

V $(µ div.lista img ¶).attr(µ src ¶);

ż Retorna o caminho do primeiro <img do primeiro <div que tem a
classe ³lista´.

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 34

D ë0  8 .
V Uma vez que você tem uma seleção do jQuery,
você pode encontrar outros elementos usando
sua seleção como ponto de início.
V Para documentação completa dos métodos de
travessia do jQuery, visite
http:

api.jquery.com
category
traversing

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 35

D ë0 ë  9 . +' D9  
   .
V $(µ h ¶).next(µ p ¶);
ż Seleciona o próximo <p depois do elemento <h

V $( µ p ¶).parent(³ .lista ´).css(³ background ´,´ #c ´);

ż Seleciona o ³Pai´ do parágrafo que tenha a classe ³lista´ e mude a cor de
fundo para vermelho

V $(µ div ¶).children(µ .selected ¶).css(µ color ¶,¶ blue¶);

ż Seleciona todos os ³ filhos ´ da <div, que tenham a classe ³selected´, e
altera a cor do texto para azul

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 36

 D ë0 (  !  *
V lste método itera sobre todos os elementos numa
seleção e executar uma função para cada um

V $(µ #Lista li ¶).each(function( idx, el ) {

? $(µ div.lista ¶).html( ³O elemento ´ + idx + ³ tem o seguinte html: ´ + $(el).html() );
V });

29/5/2011 Instrutor Marcos Wênyo Rodrigues Barros e Castro 37

 Instrutor Marcos Wênyo Rodrigues Barros e



 Castro 38