SlideShare uma empresa Scribd logo
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Hibernate efetivo (COALTI-2014 / ALJUG)
Hibernate efetivo (COALTI-2014 / ALJUG)Hibernate efetivo (COALTI-2014 / ALJUG)
Hibernate efetivo (COALTI-2014 / ALJUG)
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
 
Introducao ao Spring Web MVC
Introducao ao Spring Web MVCIntroducao ao Spring Web MVC
Introducao ao Spring Web MVC
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
Os 10 maus habitos dos desenvolvedores jsf (JustJava e CCT)
Os 10 maus habitos dos desenvolvedores jsf (JustJava e CCT)Os 10 maus habitos dos desenvolvedores jsf (JustJava e CCT)
Os 10 maus habitos dos desenvolvedores jsf (JustJava e CCT)
 
modernizando a arquitertura de sua aplicação
modernizando a arquitertura  de sua aplicaçãomodernizando a arquitertura  de sua aplicação
modernizando a arquitertura de sua aplicação
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 

Destaque

Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
Ivo Calado
 
Programação para Kernel Linux - Parte 2
Programação para Kernel Linux - Parte 2Programação para Kernel Linux - Parte 2
Programação para Kernel Linux - Parte 2
Ivo Calado
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
Exercicios Php
Exercicios PhpExercicios Php
Exercicios Php
softeam
 
Introdução ao Excel 2010
Introdução ao Excel 2010Introdução ao Excel 2010
Introdução ao Excel 2010
José Calado
 

Destaque (20)

XHTML: eXtensible Hypertext Markup Language
XHTML: eXtensible Hypertext Markup LanguageXHTML: eXtensible Hypertext Markup Language
XHTML: eXtensible Hypertext Markup Language
 
Javascript
JavascriptJavascript
Javascript
 
CSS
CSSCSS
CSS
 
Introdução a eXtensible Markup Language (XML)
Introdução a eXtensible Markup Language (XML)Introdução a eXtensible Markup Language (XML)
Introdução a eXtensible Markup Language (XML)
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
HTML
HTMLHTML
HTML
 
Programação para Kernel Linux - Parte 2
Programação para Kernel Linux - Parte 2Programação para Kernel Linux - Parte 2
Programação para Kernel Linux - Parte 2
 
Programação para Kernel Linux - Parte 1
Programação para Kernel Linux - Parte 1Programação para Kernel Linux - Parte 1
Programação para Kernel Linux - Parte 1
 
HTML
HTMLHTML
HTML
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
PHP Day - PHP para iniciantes
PHP Day - PHP para iniciantesPHP Day - PHP para iniciantes
PHP Day - PHP para iniciantes
 
Exercicios Php
Exercicios PhpExercicios Php
Exercicios Php
 
Introdução ao Excel 2010
Introdução ao Excel 2010Introdução ao Excel 2010
Introdução ao Excel 2010
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Php e mysql aplicacao completa a partir do zero
Php e mysql   aplicacao completa a partir do zeroPhp e mysql   aplicacao completa a partir do zero
Php e mysql aplicacao completa a partir do zero
 
Funções e Fórmulas em Excel 2010
Funções e Fórmulas em Excel 2010Funções e Fórmulas em Excel 2010
Funções e Fórmulas em Excel 2010
 
Curso Linguagem de Programação I - PHP Básico
Curso Linguagem de Programação I - PHP BásicoCurso Linguagem de Programação I - PHP Básico
Curso Linguagem de Programação I - PHP Básico
 

Semelhante a Tutorial sobre Jquery

Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
Yuri Costa
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
Bruno Abrantes
 

Semelhante a Tutorial sobre Jquery (20)

Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
jQuery básico (parte 2)
jQuery básico (parte 2)jQuery básico (parte 2)
jQuery básico (parte 2)
 
Google apps script - Parte 2
Google apps script - Parte 2Google apps script - Parte 2
Google apps script - Parte 2
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
 
Criando plugins jQuery
Criando plugins jQueryCriando plugins jQuery
Criando plugins jQuery
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
Mini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/GlobalcodeMini Curso de jQuery Lambda3/Globalcode
Mini Curso de jQuery Lambda3/Globalcode
 
A vida além do jQuery
A vida além do jQueryA vida além do jQuery
A vida além do jQuery
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 

Tutorial sobre Jquery

  • 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