Este documento fornece uma introdução aos conceitos fundamentais do jQuery, incluindo:
1) O que é jQuery e suas principais características como biblioteca JavaScript.
2) Exemplos básicos de sintaxe jQuery, incluindo seletores e eventos como click.
3) Uma explicação de diferentes tipos de eventos no jQuery como mouseenter e focus.
4) Demonstrações de como usar métodos jQuery como hide, show e addClass.
1. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Programa¸c˜ao para Web
jQuery
Ivo Calado
Instituto Federal de Educa¸c˜ao, Ciˆencia e Tecnologia de Alagoas
22 de Fevereiro de 2016
1 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
2. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Roteiro
1 Defini¸c˜oes
2 Efeitos jQuery
3 jQuery e HTML
2 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
3. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Caracter´ısticas b´asicas
O que ´e jQuery?
´E uma biblioteca JavaScript para constru¸c˜ao de p´aginas Web
Tem como objetivo tornar facilitar a utiliza¸c˜ao de JavaScript
nas p´aginas
Reduz o esfor¸co para realiza¸c˜ao de a¸c˜oes comuns do
JavaScript
O que ´e necess´ario conhecer para utilizar jQuery?
HTML
CSS
JavaScript
3 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
4. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Caracter´ısticas b´asicas
O que jQuery possibilita?
O jQuery possue suporte a manipula¸c˜ao dos seguintes recursos:
Manipula¸c˜ao HTML/DOM
Manipula¸c˜ao de CSS
Tratamento de eventos HTML
Efeitos e anima¸c˜oes
AJAX
Al´em disso, ´e poss´ıvel encontrar plugins para diversas outras tarefas
4 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
5. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Caracter´ısticas b´asicas
Por que utilizar jQuery?
´E considerado o framework JavaScript mais popular
Google
Microsoft
IBM
Netflix
´E compat´ıvel com praticamente todos os navegadores
modernos
Com exce¸c˜ao do IE 6!
5 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
6. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Caracter´ısticas b´asicas
Como adicionar jQuery?
Via Download de jquery.com
<head>
<s c r i p t src="jquery -1.11.3.min.js"></ s c r i p t>
</head>
Utiliza¸c˜ao de CDNs
<s c r i p t src="https://ajax.googleapis.com/ajax/
libs/jquery /1.11.3/ jquery.min.js"></ s c r i p t>
ou
<s c r i p t src="http://ajax.aspnetcdn.com/ajax/
jQuery/jquery -1.11.3.min.js"></ s c r i p t>
6 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
7. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Caracter´ısticas b´asicas
Observa¸c˜ao
Qual a importˆancia de se utilizar CDNs?
7 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
8. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Caracter´ısticas b´asicas
Observa¸c˜ao
Qual a importˆancia de se utilizar CDNs?
Reaproveitamento do cache
CDNs servem o arquivo atrav´es de servidores mais pr´oximos
fisicamente do cliente
7 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
9. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
Princ´ıpios b´asicos da Sintaxe jQuery (ex-01)
A sintaxe b´asica do jQuery ´e $(seletor).acao() ou
jquery(seletor).acao()
$ ou jquery, especificam o acesso ao jQuery
seletor especifica o elemento(s) que ser˜ao afetados
action() especifica a a¸c˜ao a ser tomada
$ ( t h i s ) . hide () − o c u l t a o elemento a t u a l
$ ( "p" ) . hide () − o c u l t a todos os elementos p
$ ( ".test" ) . hide () − o c u l t a todos os elementos com a
c l a s s e ’ test ’
$ ( "#test" ) . hide () − o c u l t a o elemento com o i d ’ test ’
8 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
10. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
Hello World (ex-01)
<body>
<h2>This i s a heading</h2>
<p>This i s a paragraph .</p>
<button>C l i c k me</button>
<p>This i s another paragraph .</p>
<s c r i p t>
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . hide () ;
}) ;
</ s c r i p t>
</body>
9 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
11. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
Seletores
jQuery fornece uma ampla gama de possibilidades de busca de
seletores. Exemplo:
$(“p”): seleciona todos elementos “p”
$(“.c1”): seleciona todos os elementos com a classe “c1”
$(“#id1”): seleciona o elemento com o id “id1”
$(“p,h1”): seleciona todos elementos “p” e “h1”
Uma lista completa pode ser visualizada em:
http://www.w3schools.com/jquery/trysel.asp
10 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
12. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
O evento “Ready Event” (ex-02)
O que acontece se o c´odigo que faz sele¸c˜ao a elementos aparece
antes dos elementos propriamente ditos?
11 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
13. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
O evento “Ready Event” (ex-02)
O que acontece se o c´odigo que faz sele¸c˜ao a elementos aparece
antes dos elementos propriamente ditos?
Os eventos n˜ao ser˜ao disparados pois os elementos n˜ao s˜ao
encontrados
Causas:
Problemas no carregamento da p´aginas
Defini¸c˜ao do c´odigo antes do elemento
Solu¸c˜ao: utilizar o evento ready event!
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . hide () ;
}) ;
}) ;
11 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
14. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
Exerc´ıcios
Baixar arquivo de https://goo.gl/gq5CBS. Para cada quest˜ao,
utilizar exemplo correspondente.
1 Ocultar todos os elementos “p”
2 Ocultar o seletor com o id “test”
3 Ocultar todos os elementos com a classe “test”
4 Ocultar todos os elementos do documento
5 Ocultar todos os elementos com o atributo href
6 Ocultar as linhas ´ımpares da tabela
12 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
15. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Sintaxe
Atividade para casa
Estudar as demais formas de se selecionar elementos a partir de
http:
//www.w3schools.com/jquery/jquery_ref_selectors.asp
13 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
16. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
O que s˜ao eventos? I
S˜ao a¸c˜oes disparadas pela p´agina Web em resposta as a¸c˜oes do
usu´ario n˜ao p´agina. Exemplos:
Eventos do mouse:
click
dblclick
mouseenter
mouseleave
Eventos do teclado:
keypress
keydown
14 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
17. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
O que s˜ao eventos? II
keyup
Eventos de formul´ario:
submit
change
focus
blur
Eventos do documento:
load
resize
scroll
unload
15 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
18. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Evento click
Atribui tratador de evento a a¸c˜ao de clique de usu´ario
Pode ser atribu´ıdo a qualquer elemento (bot˜ao ou n˜ao)
$ ( "p" ) . c l i c k ( f u n c t i o n () {
$ ( t h i s ) . hide () ;
}) ;
16 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
19. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Evento dblclick
Efeito semelhante ao evento click por´em requer o clique duplo
do usu´ario
$ ( document ) . ready ( f u n c t i o n () {
$ ( "p" ) . d b l c l i c k ( f u n c t i o n () {
$ ( t h i s ) . hide () ;
}) ;
}) ;
17 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
20. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Eventos mouseenter e mouseleave
O evento mouseenter ´e disparado quando o usu´ario passa o
mouse sobre o elemento
$ ( "#p1" ) . mouseenter ( f u n c t i o n () {
a l e r t ( "You entered p1!" ) ;
}) ;
O evento mouseleave ´e disparado quando o usu´ario move o
mouse para fora do elemento
$ ( "#p1" ) . mouseleave ( f u n c t i o n () {
a l e r t ( "Bye! You now leave p1!" ) ;
}) ;
Testar eventos mousedown e mouseup
18 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
21. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Evento hover
Combina os eventos mouseenter e mouseleave
Utiliza duas fun¸c˜oes, onde a primeira ´e disparada quando o
mouse ´e colocada sobre o elemento (mouseenter) e a segunda
fun¸c˜ao ´e chamada quando o mouse ´e retirado do elemento
$ ( "#p1" ) . hover ( f u n c t i o n () {
a l e r t ( "Entrou em p1!" ) ;
} ,
f u n c t i o n () {
a l e r t ( "Saiu de p1!" ) ;
}) ;
19 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
22. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Como ´e poss´ıvel atribuir uma classe css a um dado
elemento?
<s t y l e>. c1 { c o l o r : red ; font −s i z e : 30px ; }</ s t y l e>
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "#p1" ) . hover ( f u n c t i o n () {
$ ( "p" ) . addClass ( "c1" )
} ,
f u n c t i o n () {
$ ( "p" ) . removeClass ( "c1" )
}) ;
}) ;
</ s c r i p t></head><body>
<span id="p1">This i s a paragraph .</span><br>
<p>t e s t e !</p>
</body>
20 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
23. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Evento focus e blur
Evento focus
$ ( "input" ) . focus ( f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "#cccccc" ) ;
}) ;
Evento blur
$ ( "input" ) . b l u r ( f u n c t i o n () {
$ ( t h i s ) . c s s ({ "background -color" , "#ffffff" , "color"
: "blue" }) ;
}) ;
21 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
24. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
O m´etodo on
Com o m´etodo on ´e poss´ıvel atrelar mais de um tratador de
eventos a um elemento por vez
$ ( "p" ) . on ({
mouseenter : f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "lightgray" ) ;
} ,
mouseleave : f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "lightblue" ) ;
} ,
c l i c k : f u n c t i o n () {
$ ( t h i s ) . c s s ( "background -color" , "yellow" ) ;
}
}) ;
22 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
25. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Exerc´ıcios
Baixar arquivo de https://goo.gl/KewJiz. Para cada quest˜ao,
utilizar exemplo correspondente.
1 Alterar o c´odigo para que os elementos “p” sejam ocultados
ao clique
2 Alterar o c´odigo para que os elementos “p” sejam ocultados
ao clique duplo
3 Alterar o c´odigo para que quando o mouse passar sobre o
elemento “span” ele seja ocultado
4 Alterar o c´odigo para que o “input” seja ocultado quando o
usu´ario digitar algum caracter
5 Utilizar o m´etodo “on” para atribuir um tratador ao evento do
clique do mouse a todos os elementos “p”
23 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
26. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Eventos jQuery
Atividade para casa
Estudar os demais eventos do jQuery a partir de
http://www.w3schools.com/jquery/jquery_ref_events.asp
24 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
27. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
Eventos hide e show
O efeito hide tem como objetivo ocultar o elemento
$ ( "#hide" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . hide () ;
}) ;
O efeito show tem como objetivo tornar vis´ıvel um elemento
previamente ocultado
$ ( "#show" ) . c l i c k ( f u n c t i o n () {
$ ( "p" ) . show () ;
}) ;
25 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
28. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
Velocidade para eventos hide e show
´E poss´ıvel definir a velocidade para o desaparecimento ou
exibi¸c˜ao dos elemento
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "p#1" ) . hide (1000) ;
$ ( "p#2" ) . hide ( "slow" ) ;
$ ( "p#3" ) . hide ( "fast" ) ;
}) ;
Poss´ıveis valores:
“slow”
“fast”
tempo em milissegundos
26 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
29. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
Efeito toggle
Com o evento toggle ´e poss´ıvel implementar a troca cont´ınua
entre os efeitos hide e show
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "p#id1" ) . t o g g l e (1000) ;
$ ( "p#id2" ) . t o g g l e ( "fast" ) ;
$ ( "p#id3" ) . t o g g l e ( "slow" ) ;
$ ( "p#id4" ) . t o g g l e () ;
}) ;
}) ;
27 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
30. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
Efeitos fade
jQuery fornece a possibilidade de adi¸c˜ao de efeitos de fade
(desvanecimento) aos elementos
Efeito de fade ´e o efeito em que o elemento ´e removido ou
adicionado ao mesmo tempo em que sua transparˆencia ´e
modificada
S˜ao definidos 4 m´etodos diferentes de fade
fadeIn
fadeOut
fadeToggle
fadeTo
28 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
31. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
fadeIn
Utilizado para adicionar elementos da p´agina
Sintaxe:
$ ( s e l e c t o r ) . f a d e I n ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "#div1" ) . f a d e I n () ;
$ ( "#div2" ) . f a d e I n ( "slow" ) ; // slow ou f a s t
$ ( "#div3" ) . f a d e I n (3000) ;
}) ;
29 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
32. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
fadeOut
Utilizado para tornar vis´ıvel elementos da p´agina
Sintaxe:
$ ( s e l e c t o r ) . fadeOut ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "#div1" ) . fadeOut () ;
$ ( "#div2" ) . fadeOut ( "slow" ) ;
$ ( "#div3" ) . fadeOut (3000) ;
}) ;
30 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
33. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
fadeToggle
Equivalente ao toggle: chaveamento entre os efeitos de fadeIn
e fadeOut
Sintaxe:
$ ( s e l e c t o r ) . fadeToggle ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "#div1" ) . fadeToggle () ;
$ ( "#div2" ) . fadeToggle ( "slow" ) ;
$ ( "#div3" ) . fadeToggle (3000) ;
}) ;
31 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
34. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
fadeTo
Semelhante aos demais m´etodos de fadding, por´em ao inv´es
de tornar os elementos vis´ıveis/invis´ıveis modifica o n´ıvel de
opacidade/transparˆencia dos elementos
Sintaxe:
$ ( s e l e c t o r ) . fadeTo ( speed , opacity , c a l l b a c k ) ;
Exemplo:
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "#div1" ) . fadeTo ( "slow" , 0.15) ;
$ ( "#div2" ) . fadeTo ( "slow" , 0 .4 ) ;
$ ( "#div3" ) . fadeTo ( "slow" , 0 .7 ) ;
}) ;
32 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
35. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
Exerc´ıcios
Baixar arquivo de https://goo.gl/nSpQh8. Para cada quest˜ao,
utilizar exemplo correspondente.
1 A partir do jQuery, remova o elemento div utilizando
desvanecimento
2 Repita o processo do exerc´ıcio anterior por´em utilizando a
velocidade “slow”
3 Adicione o elemento div utilizando desvanecimento (a
velocidade da a¸c˜ao deve ser de 2000 milissegundos)
4 Modifique a opacidade do elemento div para 0.2 (utilize a
velocidade “slow” para realiza¸c˜ao da a¸c˜ao)
5 Adicione o efeito de chaveamento para adi¸c˜ao e remo¸c˜ao do
elemento div com desvanecimento (a velocidade da a¸c˜ao deve
ser de 1000 milissegundos)
33 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
36. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Hide, Show, Toggle, Fade e Slide
M´etodos de sliding
jQuery fornece trˆes m´etodos para realiza¸c˜ao de slide de
elementos (adi¸c˜ao e remo¸c˜ao de elementos via deslizamento)
slideDown: exibe o elemento
slideUp: esconde o elemento
slideToggle: chaveamento entre exibi¸c˜ao e oculta¸c˜ao
Sintaxe:
$ ( s e l e c t o r ) . slideDown ( speed , c a l l b a c k ) ;
Exemplo:
$ ( "#flip" ) . c l i c k ( f u n c t i o n () {
$ ( "#panel" ) . s l i d e Up () ;
}) ;
34 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
37. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
O m´etodo animate
A partir da utiliza¸c˜ao do m´etodo animate ´e poss´ıvel criar
anima¸c˜oes personalizadas
35 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
38. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
O m´etodo animate
A partir da utiliza¸c˜ao do m´etodo animate ´e poss´ıvel criar
anima¸c˜oes personalizadas
. . .
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "div" ) . animate ({ l e f t : ’250 px ’ } ) ;
}) ;
}) ;
</ s c r i p t>
. . .
<button> I n i c i a r anima¸c˜ao</button>
<div s t y l e="background:blue;height :100px;width:100px;
position:absolute;"></ div>
35 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
39. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Anima¸c˜oes: sintaxe
Sintaxe:
$ ( s e l e c t o r ) . animate ({ params } , speed , c a l l b a c k ) ;
Os parˆametros definem propriedades CSS a serem animadas
O segundo parˆametro (opcional) define a velocidade com o
efeito ser´a ajustado. Valores poss´ıveis: “slow”, “fast” e o
tempo em milissegundos
O terceiro parˆametro (opcional) define uma callback a ser
chamada ao final do processo de anima¸c˜ao
36 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
40. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Anima¸c˜oes: sintaxe
Sintaxe:
$ ( s e l e c t o r ) . animate ({ params } , speed , c a l l b a c k ) ;
Os parˆametros definem propriedades CSS a serem animadas
O segundo parˆametro (opcional) define a velocidade com o
efeito ser´a ajustado. Valores poss´ıveis: “slow”, “fast” e o
tempo em milissegundos
O terceiro parˆametro (opcional) define uma callback a ser
chamada ao final do processo de anima¸c˜ao
Importante!
Por padr˜ao, todos os elementos HTML tem a posi¸c˜ao static e n˜ao
podem ser movidos. Para manipular a posi¸c˜ao, deve-se primeiro
definir a propriedade position para relative, fixed ou absolute36 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
41. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Manipulando m´ultiplas propriedades
´E poss´ıvel manipular m´ultiplas propriedades CSS em uma
´unica chamada
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "div" ) . animate ({
l e f t : ’250 px ’ ,
o p a c i t y : ’ 0 . 5 ’ ,
heig ht : ’150 px ’ ,
width : ’150 px ’
}) ;
}) ;
37 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
42. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
D´uvida?!
´E poss´ıvel manipular todas as propriedades CSS via o m´etodo
animate?
Sim, por´em as propriedades devem ser escritas no formato
camel-cased. Ou seja, a propriedades padding-left deve ser
escrita como paddingLeft
Para que as propriedades ligadas a cores tenham efeito
deve-se importar o plugin jQuery UI
<l i n k r e l="stylesheet" href="http://code.jquery.com/
ui/1.11.4/ themes/smoothness/jquery -ui.css">
<s c r i p t src="http://code.jquery.com/ui/1.11.4/ jquery -
ui.js"></ s c r i p t>
Ver mais op¸c˜oes do plugin em https://jqueryui.com/
38 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
43. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Utilizando valores relativos
Ao realizar anima¸c˜oes ´e poss´ıvel definir valores relativos aos
atuais
Para tal, basta ao definir as propriedades utilizar os
operadores += ou -=
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "div" ) . animate ({
l e f t : ’250 px ’ ,
heig ht : ’+=150px ’ ,
width : ’+=150px ’
}) ;
}) ;
39 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
44. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Utilizando valores predefinidos
jQuery especifica trˆes valores predefinidos para as
propriedades: show, hide e toggle
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "div" ) . animate ({
heig ht : ’ toggle ’
}) ;
}) ;
40 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
45. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Chamadas consecutivas ao m´etodo animate
Se m´ultiplas chamadas ao m´etodo animate s˜ao realizadas
elas s˜ao enfileiradas
Isto significa que uma chamada ser´a executada ap´os o t´ermino
da anterior
41 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
46. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Anima¸c˜oes
Exemplo
( "button" ) . c l i c k ( f u n c t i o n () {
var div = $ ( "div" ) ;
div . animate ({ heigh t : ’300 px ’ , o p a c i t y : ’0.4 ’} , "
slow" ) ;
div . animate ({ width : ’300 px ’ , o p a c i t y : ’0.8 ’} , "slow
" ) ;
div . animate ({ heig ht : ’100 px ’ , o p a c i t y : ’0.4 ’} , "
slow" ) ;
div . animate ({ width : ’100 px ’ , o p a c i t y : ’0.8 ’} , "slow
" ) ;
}) ;
. . .
<div s t y l e="background :#98bf21;height :100px;width:100px
;position:absolute;"></ div>
42 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
47. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Introdu¸c˜ao
Defini¸c˜ao
jQuery possibilita a manipula¸c˜ao de maneira simples dos
elementos de DOM
O que ´e mesmo DOM?
43 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
48. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Introdu¸c˜ao
Defini¸c˜ao
jQuery possibilita a manipula¸c˜ao de maneira simples dos
elementos de DOM
O que ´e mesmo DOM?
”The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of
a document.”
43 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
49. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
M´etodos text(), html() e val()
S˜ao fornecidos trˆes m´etodos para recupera¸c˜ao e modifica¸c˜ao de
conte´udo via jQuery
text() - Ajusta ou recupera o texto do elemento selecionado
html() - Ajusta ou recupera o conte´udo do elemento
selecionado (incluindo marca¸c˜oes HTML)
val() - Ajusta ou recupera o conte´udo de campos de
formul´arios
$ ( "#btn1" ) . c l i c k ( f u n c t i o n () {
a l e r t ( "Text: " + $ ( "#test" ) . t e x t () ) ;
}) ;
$ ( "#btn2" ) . c l i c k ( f u n c t i o n () {
a l e r t ( "HTML: " + $ ( "#test" ) . html () ) ;
}) ;
44 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
50. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
Uso do val()
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
a l e r t ( "Value: " + $ ( "#test" ) . v a l () ) ;
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<p>Name : <input type="text" id="test" value="Mickey
Mouse"></p>
<button>Show Value</button>
45 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
51. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
Recuperando valores de atributos
Para recuperarmos valores de atributos basta utilizar o
m´etodo attr()
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
a l e r t ( $ ( "#w3s" ) . a t t r ( "href" ) ) ;
}) ;
}) ;
</ s c r i p t>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">
W3Schools . com</a></p>
46 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
52. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
Modificando conte´udo de elementos
$ ( "#btn1" ) . c l i c k ( f u n c t i o n () {
$ ( "#test1" ) . t e x t ( "Hello world!" ) ;
}) ;
$ ( "#btn2" ) . c l i c k ( f u n c t i o n () {
$ ( "#test2" ) . html ( "<b>Hello world!</b>" ) ;
}) ;
$ ( "#btn3" ) . c l i c k ( f u n c t i o n () {
$ ( "#test3" ) . v a l ( "Dolly Duck" ) ;
}) ;
47 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
53. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
Modificando atributos
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "#w3s" ) . a t t r ( "href" , "http://www.w3schools.
com/jquery" ) ;
}) ;
}) ;
</ s c r i p t>
48 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
54. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
Fun¸c˜oes de callbacks para os m´etodos text(), html() e val()
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "#btn2" ) . c l i c k ( f u n c t i o n () {
$ ( "#test2" ) . html ( f u n c t i o n ( i , origText ) {
r e t u r n "Old html: " + origText + " New html
: Hello <b>world!</b> (index: " + i + "
)" ;
}) ;
}) ;
}) ;
</ s c r i p t>
49 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
55. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Recuperando conte´udo de elementos
Fun¸c˜ao de callback para m´etodo attr
<s c r i p t>
$ ( document ) . ready ( f u n c t i o n () {
$ ( "button" ) . c l i c k ( f u n c t i o n () {
$ ( "#w3s" ) . a t t r ( "href" , f u n c t i o n ( i , o r i g V a l u e ) {
r e t u r n o r i g V a l u e + "/jquery" ;
}) ;
}) ;
}) ;
</ s c r i p t>
50 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
56. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Adicionando novos elementos ao HTML
Adicionando novos elementos ao HTML
S˜ao fornecidos 4 m´etodos para inser¸c˜ao de novos elementos na
p´agina
append(): o novo elemento ´e inserido como ´ultimo elemento
filho do elemento selecionado
prepend(): o novo elemento ´e inserido como primeiro
elemento filho do elemento selecionado
after(): insere o elemento AP´OS o elemento selecionado
before(): insere o elemento ANTES do elemento selecionado
51 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
57. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Adicionando novos elementos ao HTML
Exemplos
$ ( "p" ) . append ( "Some appended text." ) ;
$ ( "p" ) . prepend ( "Some prepended text." ) ;
var txt1 = "<p>Text.</p>" ;
var txt2 = $ ( "<p></p>" ) . t e x t ( "Text." ) ;
var txt3 = document . createElement ( "p" ) ;
txt3 . innerHTML = "Text." ;
$ ( "p" ) . append ( txt1 , txt2 , txt3 ) ;
$ ( "img" ) . a f t e r ( "Some text after" ) ;
$ ( "img" ) . b e f o r e ( "Some text before" ) ;
52 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
58. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Adicionando novos elementos ao HTML
Um pouco mais de exemplos...
$ ( document ) . ready ( f u n c t i o n () {
$ ( "#b1" ) . c l i c k ( f u n c t i o n () {
var $a = $ ( "<a>" , { i d : "foo" , h r e f : "http://www
.google.com" , t a r g e t : "blank" , t e x t : "
Clique" }) ;
$ ( "div" ) . append ( $a ) ;
}) ;
$ ( "#b2" ) . c l i c k ( f u n c t i o n () {
a = document . createElement ( "a" )
a . i d="foo"
a . h r e f="http://www.google.com"
a . t a r g e t="blank"
a . innerHTML = "Clique"
$ ( "div" ) . append ( a ) ;
}) ;
}) ;
53 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web
59. Defini¸c˜oes Efeitos jQuery jQuery e HTML
Removendo elementos do HTML
Defini¸c˜ao
S˜ao fornecidos dos m´etodos para remo¸c˜ao de elementos do HTML
remove(): Remove os elementos selecionados (e seus
elementos filhos)
empty(): Remove os elementos filhos do elementos
selecionado
$ ( "#div1" ) . remove () ;
$ ( "#div1" ) . empty () ;
$ ( "p" ) . remove ( ".test" ) ;
$ ( "p" ) . remove ( ".test , .demo" ) ;
54 / 54 Ivo Calado IFAL
Programa¸c˜ao para Web