" N i e u t r u d n i a j s o b i e |y c i a s k o r z y s t a j z b i b l i o t e k i j Q u e r y !
" A b e c a d Bo , c z y l i j a k k o r z y s t a z d o b r o d z i e j s t w b i b l i o t e k i j Q u e r y
" I n t e r f e j s A P I b i b l i o t e k i j Q u e r y , c z y l i g d z i e s z u k a z a a w a n s o w a n y c h r o z w i z a D
" W t y c z k i , c z y l i o c o j e s z c z e w a r t o r o z s z e r z y d o s t p n e m o |l i w o [c i
J Q u e r y . P o r a d n i k
p r o g r a m i s t y
A u t o r : W o d z i m i e r z G a j d a
I S B N : 9 7 8 - 8 3 - 2 4 6 - 2 5 1 8 - 5
F o r m a t : 1 5 8 2 3 5 , s t r o n : 2 8 8
N i e u t r u d n i a j s o b i e y c i a s k o r z y s t a j z b i b l i o t e k i j Q u e r y !
" A b e c a d o , c z y l i j a k k o r z y s t a z d o b r o d z i e j s t w b i b l i o t e k i j Q u e r y
" I n t e r f e j s A P I b i b l i o t e k i j Q u e r y , c z y l i g d z i e s z u k a z a a w a n s o w a n y c h r o z w i z a
" W t y c z k i , c z y l i o c o j e s z c z e w a r t o r o z s z e r z y d o s t p n e m o l i w o Sc i
B i b l i o t e k a j Q u e r y , z a r w n o w w e r s j i p e n e j , j a k i z m i n i m a l i z o w a n e j , p o z w a l a p r o g r a m i Sc i e
z n a c z c o u p r o Sc i p r a c i s t o p i e s k o m p l i k o w a n i a k o d u t w o r z o n e g o w j z y k u
J a v a S c r i p t . K o r z y s t a j c z j e j m o l i w o Sc i , p r o g r a m i s t a m o e z m i e n i a a t r y b u t y ,
m o d y f i k o w a w y g l d p o s z c z e g l n y c h e l e m e n t w s t r o n y , d o d a w a l u b u s u w a e l e m e n t y
d r z e w a D O M . M o e t e w y k o n a z a p y t a n i a A j a x , s t o s o w a e f e k t y s p e c j a l n e , o b s u y
t y p o w e i n i e t y p o w e z d a r z e n i a , a t a k e p o s u y s i r n y m i w t y c z k a m i , c z s t o
z n a c z c o r o z s z e r z a j c y m i f u n k c j o n a l n o S k o d u .
K s i k a j Q u e r y . P o r a d n i k p r o g r a m i s t y t o d o s k o n a e k o m p e n d i u m w i e d z y n a t e m a t t e j
b i b l i o t e k i . D o w i e s z s i s t d , j a k r o z p o c z p r a c z j Q u e r y , j a k o b c h o d z i s i z s e l e k t o r a m i
i a t r y b u t a m i , m a n i p u l o w a m o d e l e m D O M c z y p r z y p i s y w a w y b r a n y s t y l d o o k r e Sl o n y c h
e l e m e n t w s t r o n y . N a u c z y s z s i s t o s o w a f u n k c j j Q u e r y , f i l t r y i o p e r a c j e n a z b i o r a c h
e l e m e n t w . P o z n a s z t a k e r o d z a j e i s p o s b d z i a a n i a w t y c z e k , s a m z a c z n i e s z j e t w o r z y ,
m i n i m a l i z o w a i k o m p r e s o w a . J e Sl i i n t e r e s u j e C i p r o g r a m o w a n i e z w y k o r z y s t a n i e m
m o l i w o Sc i o f e r o w a n y c h p r z e z J a v a S c r i p t , a n i e c h c e s z s p d z a w i e l u g o d z i n n a
b e z p o Sr e d n i m w p i s y w a n i u s k o m p l i k o w a n e g o k o d u , b i b l i o t e k a j Q u e r y j e s t w a Sn i e
d l a C i e b i e !
" K o r z y s t a n i e z b i b l i o t e k i j Q u e r y
" T r z y w a r s t w y d o k u m e n t u X H T M L : s t r u k t u r a , w y g l d i z a c h o w a n i e
" S e l e k t o r y C S S i z d a r z e n i a X H T M L
" M o d y f i k a c j a w y g l d u , o d c z y t i m o d y f i k a c j a t r e Sc i e l e m e n t w
" O d c z y t i m o d y f i k a c j a a t r y b u t w
" D o d a w a n i e i u s u w a n i e w z w d r z e w a D O M , w d r w k a p o d r z e w i e D O M
" Z b i o r y w z w , t w o r z e n i e i u s u w a n i e w z w w d r z e w i e D O M
" E f e k t y s p e c j a l n e
" F u n k c j a j Q u e r y ( ) w s k r c i e $ ( )
" O d c z y t i m o d y f i k a c j a w z w d r z e w a D O M
" O p e r a c j e p r z e k s z t a c a j c e z b i r e l e m e n t w
" P a r a m e t r y w t y c z e k , i c h t w o r z e n i e , m i n i m a l i z a c j a i k o m p r e s j a
W y k o r z y s t a j s z a n s e , j a k i e d a j e C i b i b l i o t e k a j Q u e r y !
S p i s t r e c i
C z I A b e c a d o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
R o z d z i a 1 . K o r z y s t a n i e z b i b l i o t e k i j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
P o p r a w n o o s a d z a n i a k o d u J a v a S c r i p t w d o k u m e n t a c h H T M L i X H T M L . . . . . . . . . . . . . . . . . . 1 3
R o z d z i a 2 . T r z y w a r s t w y d o k u m e n t u X H T M L : s t r u k t u r a , w y g l d i z a c h o w a n i e . . . . 1 5
R o z d z i a 3 . S e l e k t o r y C S S i z d a r z e n i a X H T M L . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1
R o z d z i a 4 . M o d y f i k a c j a w y g l d u e l e m e n t w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 9
R o z d z i a 5 . O d c z y t i m o d y f i k a c j a t r e c i e l e m e n t w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 9
R o z d z i a 6 . O d c z y t i m o d y f i k a c j a a t r y b u t w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 7
R o z d z i a 7 . D o d a w a n i e i u s u w a n i e w z w d r z e w a D O M . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 9
R o z d z i a 8 . W d r w k a p o d r z e w i e D O M . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 9
R o z d z i a 9 . Z b i o r y w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 5
R o z d z i a 1 0 . A j a x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 0 9
R o z d z i a 1 1 . E f e k t y s p e c j a l n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 9
R o z d z i a 1 2 . C o p o w i n i e n e z a p a m i t a z p i e r w s z e j c z c i ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 9
C z I I I n t e r f e j s A P I b i b l i o t e k i j Q u e r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 3
R o z d z i a 1 3 . F u n k c j a j Q u e r y ( ) w s k r c i e $ ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 5
W y w o a n i e $ ( f u n k c j a ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 5
W y w o a n i e $ ( k o d X H T M L ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 4 6
W y w o a n i e $ ( s e l e k t o r ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 0
W y w o a n i e $ ( e l e m e n t D O M ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 4
W y n i k f u n k c j i $ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 6
T w o r z e n i e w z w t e k s t o w y c h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 9
F u n k c j e i m e t o d y s t a t y c z n e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 9
R o z d z i a 1 4 . S e l e k t o r y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 3
Z e s t a w i e n i e s e l e k t o r w f i l t r u j c y c h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 4
U y c i e s e l e k t o r w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 7
W y s t p o w a n i e s e l e k t o r w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 6 9
4 j Q u e r y . P o r a d n i k p r o g r a m i s t y
R o z d z i a 1 5 . O d c z y t i m o d y f i k a c j a w z w d r z e w a D O M . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 3
R o z s z e r z o n a s k a d n i a m e t o d d o s t p u d o w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 6
P e n e z e s t a w i e n i e m e t o d d o s t p u d o w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7 8
R o z d z i a 1 6 . T w o r z e n i e i u s u w a n i e w z w w d r z e w i e D O M . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 8 5
K l o n o w a n i e w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 8 9
U s u w a n i e w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 0
W y m i a n a w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 1
Z a w i j a n i e w z w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 4
R o z d z i a 1 7 . O p e r a c j e p r z e k s z t a c a j c e z b i r e l e m e n t w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 7
D o d a w a n i e w z w d o z b i o r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 9 7
O p e r a c j a c o f n i j . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 1
F i l t r o w a n i e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 3
Z l i c z a n i e e l e m e n t w z b i o r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 4
P r z o d k o w i e , p o t o m k o w i e i r o d z e s t w o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 5
P r z e t w a r z a n i e w z w t e k s t o w y c h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 0 8
R o z d z i a 1 8 . C o p o w i n i e n e z a p a m i t a z d r u g i e j c z c i ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 5
C z I I I W t y c z k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 7
R o z d z i a 1 9 . P i e r w s z a w t y c z k a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 9
W y w o a n i e w t y c z k i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 1
c z e n i e b i b l i o t e k i j Q u e r y z i n n y m i b i b l i o t e k a m i J a v a S c r i p t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 4
D e f i n i o w a n i e k i l k u w t y c z e k w j e d n y m p l i k u . j s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 6
R o z d z i a 2 0 . P a r a m e t r y w t y c z e k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 1
B a d a n i e o b e c n o c i p a r a m e t r u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 2
O b i e k t y w r o l i p a r a m e t r w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 3
B a d a n i e t y p u p a r a m e t r w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 5
Z m i e n n a l i c z b a p a r a m e t r w f u n k c j i . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 8
R o z d z i a 2 1 . T w o r z e n i e w t y c z e k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 4 1
R o z d z i a 2 2 . M i n i m a l i z a c j a i k o m p r e s j a w t y c z e k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6 5
K o m p r e s j a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6 6
R o z d z i a 2 3 . C o p o w i n i e n e z a p a m i t a z t r z e c i e j c z c i ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 1
S k o r o w i d z . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 3
R o z d z i a 1 1 .
E f e k t y s p e c j a l n e
B i b l i o t e k a j Q u e r y z a w i e r a k i l k a m e t o d s u c y c h d o w y k o n y w a n i a p r o s t y c h a n i m a c j i .
N a l e d o n i c h : s l i d e D o w n ( ) i s l i d e U p ( ) , f a d e I n ( ) i f a d e O u t ( ) o r a z a n i m a t e ( ) .
M e t o d y s l i d e D o w n ( ) i s l i d e U p ( ) p o z w a l a j n a p y n n e r o z w i j a n i e i z w i j a n i e e l e m e n t u .
E f e k t g r a f i c z n y p o l e g a n a a n i m a c j i e l e m e n t u p o p r z e z z w i k s z e n i e l u b z m n i e j s z e n i e j e g o
w y s o k o c i . J e l i n a u k r y t y m a k a p i c i e :
$ ( ' p # i n f o ' ) . h i d e ( ) ;
w y w o a m y m e t o d s l i d e D o w n ( ) :
$ ( ' p # i n f o ' ) . s l i d e D o w n ( ) ;
t o a k a p i t t e n p o j a w i s i n a s t r o n i e w s p o s b a n i m o w a n y . J e g o w y s o k o b d z i e p y n n i e
z w i k s z a n a o d 0 d o o d p o w i e d n i e j w a r t o c i . W y w o a n i e m e t o d y s l i d e U p ( ) s p o w o d u j e
p o n o w n e u k r y c i e a k a p i t u :
$ ( ' p # i n f o ' ) . s l i d e U p ( ) ;
T y m r a z e m j e g o w y s o k o b d z i e z m n i e j s z a n a d o 0 . D o m y l n i e a n i m a c j a t r w a 4 0 0 m i l i -
s e k u n d , l e c z m o e m y t o z m i e n i , p r z e k a z u j c d o m e t o d s l i d e D o w n ( ) o r a z s l i d e U p ( )
p a r a m e t r o k r e l a j c y c z a s t r w a n i a a n i m a c j i . P a r a m e t r e m t y m m o e b y l i c z b a o k r e l a -
j c a , i l e m i l i s e k u n d m a t r w a a n i m a c j a , n p . :
$ ( ' p # i n f o ' ) . s l i d e U p ( 1 2 0 0 ) ;
$ ( ' p # i n f o ' ) . s l i d e D o w n ( 2 5 0 0 ) ;
b d j e d e n z n a p i s w : s l o w l u b f a s t . N a p i s s l o w u s t a l a c z a s t r w a n i a a n i m a c j i n a 2 0 0 m i l i -
s e k u n d , a f a s t n a 6 0 0 . D r u g i m , r w n i e o p c j o n a l n y m , p a r a m e t r e m f u n k c j i s l i d e U p ( )
i s l i d e D o w n ( ) j e s t f u n k c j a a n o n i m o w a , w y w o y w a n a p o z a k o c z e n i u a n i m a c j i . J e l i
c h c e s z , b y p o z a k o c z e n i u r o z w i j a n i a a k a p i t u k o l o r j e g o t a s t a s i c z e r w o n y , u y j k o d u :
$ ( ' p # i n f o ' ) . s l i d e D o w n ( 2 5 0 0 , f u n c t i o n ( ) {
$ ( ' p # i n f o ' ) . c s s ( ' b a c k g r o u n d ' , ' r e d ' ) ;
} ) ;
1 3 0 C z I A b e c a d o
Z w r u w a g , e r o z w i z a n i e n i e w y k o r z y s t u j c e f u n k c j i a n o n i m o w e j :
$ ( ' p # i n f o ' ) . s l i d e D o w n ( 2 5 0 0 ) ;
$ ( ' p # i n f o ' ) . c s s ( ' b a c k g r o u n d ' , ' r e d ' ) ;
j e s t b d n e . W y w o a n i e f u n k c j i s l i d e D o w n ( ) n i e p o w o d u j e w s t r z y m a n i a w y k o n y w a n i a
s k r y p t u . M e t o d a c s s ( ) w p o w y s z y m k o d z i e b d z i e w y w o a n a n a t y c h m i a s t p o u r u c h o -
m i e n i u a n i m a c j i , a n i e p o j e j z a k o c z e n i u .
K o l e j n e d w i e f u n k c j e d o t y c z c e e f e k t w , c z y l i f a d e I n ( ) o r a z f a d e O u t ( ) , p o w o d u j
p o k a z a n i e i u k r y c i e e l e m e n t u p r z e z z w i k s z a n i e i z m n i e j s z a n i e j e g o p r z e z r o c z y s t o c i .
M a j o n e i d e n t y c z n e p a r a m e t r y j a k s l i d e D o w n ( ) i s l i d e U p ( ) . P o w y w o a n i u :
$ ( ' p # i n f o ' ) . f a d e I n ( ) ;
a k a p i t p # i n f o p o j a w i s i n a s t r o n i e , z a i n s t r u k c j a :
$ ( ' p # i n f o ' ) . f a d e O u t ( ) ;
s p o w o d u j e u k r y c i e g o . T e m p o p o j a w i a n i a s i i z n i k a n i a u s t a l a m y , p r z e k a z u j c l i c z b l u b
n a p i s y s l o w a l b o f a s t :
$ ( ' p # i n f o ' ) . f a d e I n ( 1 5 0 0 ) ;
$ ( ' p # i n f o ' ) . f a d e I n ( ' f a s t ' ) ;
$ ( ' p # i n f o ' ) . f a d e I n ( ' s l o w ' ) ;
F u n k c j a a u t o m a t y c z n a p r z e k a z a n a j a k o d r u g i p a r a m e t r b d z i e w y w o a n a p o z a k o c z e -
n i u e f e k t u :
$ ( ' p # i n f o ' ) . f a d e I n ( 1 0 0 0 , f u n c t i o n ( ) {
/ / f u n k c j a w y w o y w a n a p o z a k o c z e n i u a n i m a c j i
} ) ;
O s t a t n i a z w y m i e n i o n y c h n a w s t p i e f u n k c j i , a n i m a t e ( ) , p o z w a l a n a p y n n e m o d y f i k o -
w a n i e d o w o l n e j w a c i w o c i C S S . I n s t r u k c j a :
$ ( ' p # i n f o ' ) . a n i m a t e ( {
f o n t - s i z e : ' 2 0 0 % ' ,
l e f t : ' 2 0 0 p x ' ,
b o r d e r W i d t h : ' 1 0 p x '
} ) ;
s p o w o d u j e p y n n z m i a n r o z m i a r u c z c i o n k i d o 2 0 0 % . J e l i c z c i o n k a b y a w i k s z a , t o
b d z i e z m n i e j s z o n a , a j e l i b y a m n i e j s z a t o b d z i e z w i k s z o n a . W a c i w o l e f t
b d z i e p y n n i e d y a d o w a r t o c i 2 0 0 p x , z a g r u b o o b r a m o w a n i a d o 1 0 p x . P i e r w -
s z y m p a r a m e t r e m m e t o d y a n i m a t e ( ) j e s t t a b l i c a a s o c j a c y j n a w a c i w o c i C S S , d o
k t r y c h a n i m a c j a m a p y n n i e d y . Z w r u w a g , e a t r y b u t y p i s a n e w k o d z i e C S S
z d y w i z e m , n p . b o r d e r - w i d t h , s w j Q u e r y z a p i s y w a n e w n o t a c j i b o r d e r W i d t h . D w a
o p c j o n a l n e p a r a m e t r y m e t o d y a n i m a t e ( ) u s t a l a j c z a s t r w a n i a a n i m a c j i o r a z p o z w a l a j
n a w y k o n a n i e d o w o l n y c h a k c j i p o j e j z a k o c z e n i u :
$ ( ' p # i n f o ' ) . a n i m a t e (
{
f o n t - s i z e : ' 2 0 0 % ' ,
l e f t : ' 2 0 0 p x ' ,
b o r d e r W i d t h : ' 1 0 p x '
} ,
5 0 0 0 ,
R o z d z i a 1 1 . E f e k t y s p e c j a l n e 1 3 1
f u n c t i o n ( ) {
/ / f u n k c j a w y w o y w a n a p o z a k o c z e n i u a n i m a c j i
}
) ;
w i c z e n i e 1 1 . 1 . _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Z m o d y f i k u j k o d k o n t r o l k i + / - w y k o n a n e j w w i c z e n i u 8 . 1 w t a k i s p o s b , b y p o k a z y w a n i e
i u k r y w a n i e t r e c i o d b y w a o s i w s p o s b p y n n y z w y k o r z y s t a n i e m m e t o d s l i d e
D o w n ( ) o r a z s l i d e U p ( ) . K o d X H T M L k o n t r o l k i z a w i e r a h i p e r c z e a , w k t r y m
u m i e s z c z a m y z n a k + b d , o r a z a k a p i t p z t r e c i . A k a p i t n a l e y u k r y l u b p o k a z a .
Z a r y s k o d u X H T M L z w i c z e n i a j e s t p r z e d s t a w i o n y n a l i s t i n g u 1 1 . 1 . R o z w i z a n i e m
w i c z e n i a j e s t s k r y p t j Q u e r y p r z e d s t a w i o n y n a l i s t i n g u 1 1 . 2 .
L i s t i n g 1 1 . 1 . Z a r y s k o d u X H T M L k o n t r o l k i + /
< d i v c l a s s = " e l e m e n t " >
< h 3 > < a h r e f = " # " > + < / a > L o r e m i p s u m < / h 3 >
< p >
L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u e r a d i p i s c i n g e l i t .
< / p >
< d i v c l a s s = " c l e a r i n g " > < / d i v >
< / d i v >
L i s t i n g 1 1 . 2 . R o z w i z a n i e w i c z e n i a 1 1 . 1
$ ( f u n c t i o n ( ) {
$ ( ' . e l e m e n t p ' ) . h i d e ( ) ;
$ ( ' . e l e m e n t a ' ) . c l i c k ( f u n c t i o n ( ) {
i f ( $ ( t h i s ) . h t m l ( ) = = ' + ' ) {
$ ( t h i s ) . h t m l ( ' - ' ) ;
$ ( t h i s ) . p a r e n t ( ) . n e x t ( ) . s l i d e D o w n ( ) ;
} e l s e {
$ ( t h i s ) . h t m l ( ' + ' ) ;
$ ( t h i s ) . p a r e n t ( ) . n e x t ( ) . s l i d e U p ( ) ;
}
} ) ;
} ) ;
W s k r y p c i e j Q u e r y p o s t p u j e m y i d e n t y c z n i e j a k w w i c z e n i u 8 . 1 . W o d p o w i e d z i n a
k l i k n i c i e h i p e r c z a a , w z a l e n o c i o d t e g o , c z y z a w i e r a o n o z n a k , + c z y , r o z w i j a m y
b d z w i j a m y a k a p i t . D o a k a p i t u d o c i e r a m y o d k l i k n i t e g o h i p e r c z a ( t j . o d $ ( t h i s ) ) ,
w y w o u j c m e t o d y p a r e n t ( ) o r a z n e x t ( ) . W c e l u p o k a z a n i a a k a p i t u w y w o u j e m y
z a m i a s t m e t o d y s h o w ( ) m e t o d s l i d e D o w n ( ) :
$ ( t h i s ) . p a r e n t ( ) . n e x t ( ) . s l i d e D o w n ( ) ;
N a t o m i a s t u k r y c i e a k a p i t u w y m a g a w y w o a n i a z a m i a s t m e t o d y h i d e ( ) m e t o d y
s l i d e U p ( ) :
$ ( t h i s ) . p a r e n t ( ) . n e x t ( ) . s l i d e U p ( ) ;
1 3 2 C z I A b e c a d o
w i c z e n i e 1 1 . 2 . _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
D a n y j e s t p l i k m e n u . h t m l o r a z k i l k a p l i k w , k t r y c h n a z w a r o z p o c z y n a s i o d s o w a
f r a g m e n t , n p . f r a g m e n t - u l i c a - b r a m o w a . h t m l . W p l i k u m e n u . h t m l z n a j d u j e s i m e n u
g w n e o r a z e l e m e n t d i v # t r e s c . Z a r y s p l i k u m e n u . h t m l j e s t p r z e d s t a w i o n y n a l i s t i n g u 1 1 . 3 .
N a p i s z s k r y p t , k t r y z m o d y f i k u j e d z i a a n i e m e n u w t a k i s p o s b , b y k l i k n i c i e o p c j i
m e n u p o w o d o w a o p r z e a d o w a n i e e l e m e n t u d i v # t r e s c . D o e l e m e n t u t e g o n a l e y z a a -
d o w a z a w a r t o p l i k u , k t r e g o n a z w a j e s t z a w a r t a w k l i k n i t y m h i p e r c z u . Z a d a n i e
r o z w i w t a k i s p o s b , b y p r z e a d o w a n i e b y o p y n n e z w y k o r z y s t a n i e m e f e k t w
f a d e I n ( ) o r a z f a d e O u t ( ) . S k r y p t p o w i n i e n d z i a a w t a k i s p o s b , b y p o d c z a s a n i m a c j i
o p c j e m e n u b y y n i e c z y n n e . R o z w i z a n i e m z a d a n i a j e s t s k r y p t z l i s t i n g u 1 1 . 4 .
L i s t i n g 1 1 . 3 . P l i k m e n u . h t m l z w i c z e n i a 1 1 . 2
< d i v i d = " p o j e m n i k " >
< u l i d = " m e n u " >
< l i > < a h r e f = " f r a g m e n t - u l i c a - b r a m o w a . h t m l " > u l i c a b r a m o w a < / a > < / l i >
< l i > < a h r e f = " f r a g m e n t - p l a c - p o - f a r z e . h t m l " > p l a c p o f a r z e < / a > < / l i >
. . .
< / u l >
< d i v i d = " t r e s c " > < / d i v >
< / d i v >
L i s t i n g 1 1 . 4 . R o z w i z a n i e w i c z e n i a 1 1 . 2
< s c r i p t t y p e = " t e x t / j a v a s c r i p t " >
t r w a = 0 ;
f u n c t i o n w y l a c z _ h i p e r l a c z a ( )
{
t r w a = 1 ;
$ ( ' a ' ) .
c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) .
h o v e r (
f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
} ,
f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
}
) ;
}
f u n c t i o n w l a c z _ h i p e r l a c z a ( )
{
t r w a = 0 ;
$ ( ' a ' ) .
c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) .
h o v e r (
f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' u n d e r l i n e ' ) ;
} ,
f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
}
R o z d z i a 1 1 . E f e k t y s p e c j a l n e 1 3 3
) ;
}
$ ( f u n c t i o n ( ) {
w y l a c z _ h i p e r l a c z a ( ) ;
$ ( ' # t r e s c ' ) . h i d e ( ) ;
$ ( ' # t r e s c ' ) . l o a d ( ' f r a g m e n t - u l i c a - d o m i n i k a n s k a . h t m l ' ) ;
$ ( ' # t r e s c ' ) . f a d e I n ( 2 0 0 0 , f u n c t i o n ( ) {
w l a c z _ h i p e r l a c z a ( ) ;
} ) ;
$ ( ' a ' ) . c l i c k ( f u n c t i o n ( ) {
i f ( t r w a = = 0 ) {
w y l a c z _ h i p e r l a c z a ( ) ;
v a r u r l = $ ( t h i s ) . a t t r ( ' h r e f ' ) ;
$ ( ' # t r e s c ' ) . f a d e O u t ( 2 0 0 0 , f u n c t i o n ( ) {
$ ( ' # t r e s c ' ) . l o a d ( u r l ) ;
$ ( ' # t r e s c ' ) . f a d e I n ( 2 0 0 0 , f u n c t i o n ( ) {
w l a c z _ h i p e r l a c z a ( ) ;
} ) ;
} ) ;
}
r e t u r n f a l s e ;
} ) ;
} ) ;
< / s c r i p t >
W s k r y p c i e z l i s t i n g u 1 1 . 4 n a j p i e r w d e f i n i u j e m y z m i e n n t r w a . Z m i e n n a t a b d z i e
f l a g , i n f o r m u j c o t y m , e a n i m a c j a j e s t w t r a k c i e w y k o n y w a n i a . J e l i w a r t o z m i e n -
n e j t r w a w y n o s i 1 , t o a n i m a c j a w a n i e j e s t w y k o n y w a n a i h i p e r c z a n i e p o w i n n y
d z i a a . W p r z e c i w n y m r a z i e , c z y l i g d y w a r t o z m i e n n e j t r w a w y n o s i 0 , a n i m a c j a n i e
j e s t w y k o n y w a n a i h i p e r c z a p o w i n n y d z i a a .
Z a w c z a n i e i w y c z a n i e d z i a a n i a h i p e r c z y o d p o w i a d a j f u n k c j e w l a c z _ h i p e r l a c z a ( )
o r a z w y l a c z _ h i p e r l a c z a ( ) . U s t a l a j o n e w a r t o z m i e n n e j t r w a o r a z m o d y f i k u j s t y l e
C S S h i p e r c z y . W e w n t r z t y c h f u n k c j i w y b i e r a m y w s z y s t k i e h i p e r c z a :
$ ( ' a ' ) .
u s t a l a m y i c h s t y l e C S S :
c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) .
i m o d y f i k u j e m y e f e k t r o l l o v e r :
h o v e r (
f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
} ,
f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
}
) ;
1 3 4 C z I A b e c a d o
M e t o d a h o v e r ( ) p r z y p i s u j e o b s u g d w c h z d a r z e : o n m o u s e e n t e r o r a z o n m o u s e l e a v e 1 .
P o w y s z a i n s t r u k c j a j e s t r w n o w a n a d w m i n s t r u k c j o m :
m o u s e e n t e r ( f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
} ) . m o u s e l e a v e ( f u n c t i o n ( ) {
$ ( t h i s ) . c s s ( ' t e x t - d e c o r a t i o n ' , ' n o n e ' ) ;
} ) ;
D z i a a n i e s k r y p t u z l i s t i n g u 1 1 . 4 r o z p o c z y n a m y o d w y c z e n i a h i p e r c z y , u k r y c i a
e l e m e n t u # t r e s c , z a a d o w a n i a d o e l e m e n t u # t r e s c p l i k u f r a g m e n t - u l i c a - d o m i n i k a n s k a .
h t m l o r a z a n i m o w a n e g o w y w i e t l e n i a e l e m e n t u # t r e s c :
w y l a c z _ h i p e r l a c z a ( ) ;
$ ( ' # t r e s c ' ) . h i d e ( ) ;
$ ( ' # t r e s c ' ) . l o a d ( ' f r a g m e n t - u l i c a - d o m i n i k a n s k a . h t m l ' ) ;
$ ( ' # t r e s c ' ) . f a d e I n ( 2 0 0 0 , f u n c t i o n ( ) {
w l a c z _ h i p e r l a c z a ( ) ;
} ) ;
A n i m a c j a b d z i e t r w a a 2 s e k u n d y ( t j . 2 0 0 0 m i l i s e k u n d ) . P o z a k o c z e n i u a n i m a c j i h i p e r -
c z a z o s t a n w c z o n e , z a c o o d p o w i a d a w y w o a n i e f u n k c j i w l a c z _ h i p e r l a c z a ( ) .
Z a s a d n i c z c z c i s k r y p t u j e s t p r z y p i s a n i e o b s u g i z d a r z e n i a o n c l i c k d o h i p e r c z y .
H i p e r c z a b d d z i a a y w y c z n i e w t e d y , g d y w a r t o z m i e n n e j t r w a w y n o s i 0 :
$ ( ' a ' ) . c l i c k ( f u n c t i o n ( ) {
i f ( t r w a = = 0 ) {
. . .
}
r e t u r n f a l s e ;
} ) ;
W t e n s p o s b w y c z a m y d z i a a n i e h i p e r c z y w t r a k c i e t r w a n i a a n i m a c j i . Z d a r z e n i e
o n c l i c k b d z i e g e n e r o w a n e , j e d n a k d z i k i p o w y s z e j i n s t r u k c j i i f n i e s p o w o d u j e o n o
w y k o n a n i a a d n y c h a k c j i .
J e l i a n i m a c j a n i e j e s t w y k o n y w a n a , w w c z a s o b s u g a k l i k n i c i a p r z e b i e g a n a s t p u j c o :
n a j p i e r w w y c z a m y d z i a a n i e h i p e r c z y :
w y l a c z _ h i p e r l a c z a ( ) ;
N a s t p n i e z a t r y b u t u h r e f k l i k n i t e g o h i p e r c z a d o z m i e n n e j u r l p o b i e r a m y n a z w p l i k u :
v a r u r l = $ ( t h i s ) . a t t r ( ' h r e f ' ) ;
1
Z d a r z e n i a m o u s e e n e t e r o r a z m o u s e l e a v e n i e w y s t p u j w d r z e w i e D O M . S o n e e m u l o w a n e p r z e z
b i b l i o t e k j Q u e r y . P i e r w o t n i e z d a r z e n i a t e p o j a w i y s i w p r z e g l d a r c e I n t e r n e t E x p l o r e r . Z d a r z e n i a
m o u s e e n e t e r i m o u s e l e a v e r n i s i o d z d a r z e m o u s e o v e r i m o u s e o u t t y m , e s g e n e r o w a n e d o k a d n i e
j e d e n r a z , d o p k i k u r s o r m y s z k i n i e o p u c i w y b r a n e g o e l e m e n t u . P o d c z a s j e d n o k r o t n e g o w s k a z a n i a
e l e m e n t u w s k a n i k i e m m y s z k i z d a r z e n i a t e z o s t a n w y g e n e r o w a n e d o k a d n i e j e d e n r a z . Z d a r z e n i a
m o u s e o v e r o r a z m o u s e o u t m o g b y w y g e n e r o w a n e k i l k u k r o t n i e .
R o z d z i a 1 1 . E f e k t y s p e c j a l n e 1 3 5
T e r a z w y c z a m y w i d o c z n o e l e m e n t u # t r e s c . E l e m e n t t e n s t o p n i o w o z n i k n i e z e k r a n u :
$ ( ' # t r e s c ' ) . f a d e O u t ( 2 0 0 0 , f u n c t i o n ( ) {
/ / k o d w y k o n y w a n y , g d y e l e m e n t # t r e s c j e s t j u n i e w i d o c z n y
} ) ;
G d y e l e m e n t # t r e s c j e s t n i e w i d o c z n y , a d u j e m y d o n i e g o z a w a r t o p l i k u , k t r e g o n a z w a
z n a j d u j e s i w z m i e n n e j u r l :
$ ( ' # t r e s c ' ) . l o a d ( u r l ) ;
p o c z y m w c z a m y w i d o c z n o e l e m e n t u # t r e s c :
$ ( ' # t r e s c ' ) . f a d e I n ( 2 0 0 0 , f u n c t i o n ( ) {
/ / k o d w y k o n y w a n y , g d y e l e m e n t # t r e s c j e s t j u w i d o c z n y
} ) ;
E l e m e n t t e n p o j a w i s i s t o p n i o w o n a e k r a n i e . G d y e l e m e n t # t r e s c j e s t j u w i d o c z n y ,
p o n o w n i e w c z a m y d z i a a n i e h i p e r c z y :
w l a c z _ h i p e r l a c z a ( ) ;
w i c z e n i e 1 1 . 3 . _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
D o k u m e n t i n d e x . h t m l z a w i e r a z n a c z n i k i m g , k t r y u m i e s z c z a n a s t r o n i e W W W z d j -
c i e z a w a r t e w p l i k u f o t k a . j p g . P o n i e j z d j c i a z n a j d u j s i t r z y h i p e r c z a . J e d n o j a k o
e t y k i e t m a s t r z a k w l e w o , d r u g i e n a p i s r e s e t , a t r z e c i e s t r z a k w p r a w o . Z a r y s
k o d u X H T M L j e s t p r z e d s t a w i o n y n a l i s t i n g u 1 1 . 5 . N a p i s z s k r y p t j Q u e r y , k t r y z m o d y -
f i k u j e d z i a a n i e h i p e r c z y . S t r z a k a w l e w o m a p o w o d o w a , e o b r a z p y n n y m r u c h e m
w y j e d z i e p o z a l e w k r a w d n a d r z d n e g o e l e m e n t u d i v , s t r z a k a w p r a w o m a p o w o -
d o w a p y n n e w y j e c h a n i e z d j c i a p o z a p r a w k r a w d e l e m e n t u d i v , z a n a p i s r e s e t
m a p o w o d o w a p o w r t z d j c i a d o r o d k a e l e m e n t u d i v . R o z w i z a n i e m z a d a n i a j e s t
s k r y p t p r z e d s t a w i o n y n a l i s t i n g u 1 1 . 6 .
L i s t i n g 1 1 . 5 . P l i k i n d e x . h t m l z w i c z e n i a 1 1 . 3
< b o d y >
< d i v i d = " e l e m e n t " >
< i m g s r c = " f o t k a . j p g " a l t = " " / >
< / d i v >
< d i v >
< a i d = " l e w o " h r e f = " # " > & l t ; & l t ; < / a >
< a i d = " r e s e t " h r e f = " # " > r e s e t < / a >
< a i d = " p r a w o " h r e f = " # " > & g t ; & g t ; < / a >
< / d i v >
< / b o d y >
1 3 6 C z I A b e c a d o
L i s t i n g 1 1 . 6 . S k r y p t z w i c z e n i a 1 1 . 3
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " # l e w o " ) . c l i c k ( f u n c t i o n ( ) {
$ ( ' # e l e m e n t i m g ' ) . a n i m a t e ( {
' l e f t ' : " - 1 0 0 p x "
} ) ;
r e t u r n f a l s e ;
} ) ;
$ ( " # p r a w o " ) . c l i c k ( f u n c t i o n ( ) {
$ ( ' # e l e m e n t i m g ' ) . a n i m a t e ( {
' l e f t ' : " 2 0 0 p x "
} ) ;
r e t u r n f a l s e ;
} ) ;
$ ( " # r e s e t " ) . c l i c k ( f u n c t i o n ( ) {
$ ( ' # e l e m e n t i m g ' ) . a n i m a t e ( {
' l e f t ' : " 6 0 p x "
} ) ;
r e t u r n f a l s e ;
} ) ;
} ) ;
S k r y p t z l i s t i n g u 1 1 . 6 z a w i e r a i n s t r u k c j e , k t r e p r z y p i s z p r o c e d u r y o b s u g i z d a r z e n i a
o n c l i c k t r z e m h i p e r c z o m z a w a r t y m w d o k u m e n c i e . S e d n e m r o z w i z a n i a j e s t p y n n e
p r z e s u w a n i e z d j c i a w t r z y r n e m i e j s c a . W c e l u p r z e s u n i c i a f o t o g r a f i i p o z a l e w k r a -
w d e l e m e n t u d i v m o d y f i k u j e m y w a c i w o C S S l e f t , n a d a j c j e j w a r t o 1 0 0 p i k s e l i :
$ ( ' # e l e m e n t i m g ' ) . a n i m a t e ( {
' l e f t ' : " - 1 0 0 p x "
} ) ;
P r z e s u n i c i e e l e m e n t u i m g p o z a p r a w k r a w d e l e m e n t u d i v w y k o n u j e i n s t r u k c j a :
$ ( ' # e l e m e n t i m g ' ) . a n i m a t e ( {
' l e f t ' : " 2 0 0 p x "
} ) ;
N a t o m i a s t p o w r t d o p o z y c j i s t a r t o w e j p o l e g a n a p r z y p i s a n i u w a c i w o c i l e f t w a r t o c i
6 0 p i k s e l i :
$ ( ' # e l e m e n t i m g ' ) . a n i m a t e ( {
' l e f t ' : " 6 0 p x "
} ) ;
F u n k c j a a n i m a t e ( ) s p o w o d u j e p y n n z m i a n w a c i w o c i l e f t o d w a r t o c i b i e c e j
d o j e d n e j z p o d a n y c h l i c z b , c z y l i 1 0 0 p x , 6 0 p x l u b 2 0 0 p x .
R o z d z i a 1 1 . E f e k t y s p e c j a l n e 1 3 7
W r o z w i z a n i u t y m w a n r o l o d g r y w a j s t y l e C S S . E l e m e n t i m g j e s t p o z y c j o n o w a n y
b e z w z g l d n i e w e w n t r z z a w i e r a j c e g o g o e l e m e n t u d i v :
# e l e m e n t {
p o s i t i o n : r e l a t i v e ;
o v e r f l o w : h i d d e n ;
}
# e l e m e n t i m g {
d i s p l a y : b l o c k ;
w i d t h : 8 0 p x ;
h e i g h t : 6 0 p x ;
p o s i t i o n : a b s o l u t e ;
t o p : 1 0 p x ;
l e f t : 6 0 p x ;
}
N
N i e u t r u d n i a j s o b i e |y c i a s k o r z y s t a j z b i b l i o t e k i j Q u e r y !
i
e u
t
r
u
d
n
i
a
j s
o
b i
e |
y
c
i
a
s
k
o
r
z
y s
t
a
j z b i
b
l
i
o
t
e
k
i
j
Q
u
e
r
y
!
" A b e c a d Bo , c z y l i j a k k o r z y s t a z d o b r o d z i e j s t w b i b l i o t e k i j Q u e r y
" I n t e r f e j s A P I b i b l i o t e k i j Q u e r y , c z y l i g d z i e s z u k a z a a w a n s o w a n y c h r o z w i z a D
" W t y c z k i , c z y l i o c o j e s z c z e w a r t o r o z s z e r z y d o s t p n e m o |l i w o [c i
B
B i b l i o t e k a j Q u e r y , z a r w n o w w e r s j i p e Bn e j , j a k i z m i n i m a l i z o w a n e j ,
i
b
l
i
o
t
e
k
a
j
Q
u
e
r
y
,
z
a
r
w
n
o
w
w
e
r
s
j
i
p
e
B
n
e
j
,
j
a
k
i
z
m
i
n
i
m
a
l
i
z
o
w
a
n
e
j
,
p o z w a l a p r o g r a m i [c i e z n a c z c o u p r o [c i p r a c i s t o p i e D s k o m p l i k o w a n i a k o d u t w o r z o n e g o w j z y k u J a v a -
S c r i p t . K o r z y s t a j c z j e j m o |l i w o [c i , p r o g r a m i s t a m o |e z m i e n i a a t r y b u t y , m o d y f i k o w a w y g l d p o s z c z e -
g l n y c h e l e m e n t w s t r o n y , d o d a w a l u b u s u w a e l e m e n t y d r z e w a D O M . M o |e t e | w y k o n a z a p y t a n i a A j a x ,
s t o s o w a e f e k t y s p e c j a l n e , o b s Bu |y t y p o w e i n i e t y p o w e z d a r z e n i a , a t a k |e p o s Bu |y s i r |n y m i w t y c z k a -
m i , c z s t o z n a c z c o r o z s z e r z a j c y m i f u n k c j o n a l n o [ k o d u .
K
K s i |k a j Q u e r y . P o r a d n i k p r o g r a m i s t y t o d o s k o n a Be k o m p e n d i u m w i e d z y n a t e m a t t e j
s
i
|
k
a
j
Q
u
e
r
y
.
P
o
r
a
d
n
i
k
p
r
o
g
r
a
m
i
s
t
y
b i b l i o t e k i . D o w i e s z s i z n i e j , j a k r o z p o c z p r a c z j Q u e r y , j a k o b c h o d z i s i z s e l e k t o r a m i i a t r y b u t a m i ,
m a n i p u l o w a m o d e l e m D O M c z y p r z y p i s y w a w y b r a n y s t y l d o o k r e [l o n y c h e l e m e n t w s t r o n y . N a u c z y s z
s i s t o s o w a f u n k c j j Q u e r y , f i l t r y i o p e r a c j e n a z b i o r a c h e l e m e n t w . P o z n a s z t a k |e r o d z a j e i s p o s b d z i a -
Ba n i a w t y c z e k , s a m z a c z n i e s z j e t w o r z y , m i n i m a l i z o w a i k o m p r e s o w a . J e [l i i n t e r e s u j e C i p r o g r a m o -
w a n i e z w y k o r z y s t a n i e m m o |l i w o [c i o f e r o w a n y c h p r z e z J a v a S c r i p t , a n i e c h c e s z s p d z a w i e l u g o d z i n n a
b e z p o [r e d n i m w p i s y w a n i u s k o m p l i k o w a n e g o k o d u , b i b l i o t e k a j Q u e r y j e s t w Ba [n i e d l a C i e b i e !
" T r z y w a r s t w y d o k u m e n t u X H T M L : " Z b i o r y w z B w , t w o r z e n i e i u s u w a n i e
s t r u k t u r a , w y g l d i z a c h o w a n i e w z B w w d r z e w i e D O M
" K o r z y s t a n i e z b i b l i o t e k i j Q u e r y " E f e k t y s p e c j a l n e
" S e l e k t o r y C S S i z d a r z e n i a X H T M L " F u n k c j a j Q u e r y ( ) w s k r c i e $ ( )
" M o d y f i k a c j a w y g l d u , o d c z y t " O d c z y t i m o d y f i k a c j a w z B w
i m o d y f i k a c j a t r e [c i e l e m e n t w d r z e w a D O M
" O d c z y t i m o d y f i k a c j a a t r y b u t w " O p e r a c j e p r z e k s z t a Bc a j c e z b i r e l e m e n t w
" D o d a w a n i e i u s u w a n i e w z B w d r z e w a " P a r a m e t r y w t y c z e k , i c h t w o r z e n i e ,
D O M , w d r w k a p o d r z e w i e D O M m i n i m a l i z a c j a i k o m p r e s j a
W y
W y k o r z y s t a j s z a n s e , j a k i e d a j e C i b i b l i o t e k a j Q u e r y !
k
o
r
z
y s
t
a
j s
z
a
n
s
e
,
j
a
k
i
e d
a
j
e C
i b i
b
l
i
o
t
e
k
a
j
Q
u
e
r
y
!
C e n a : 3 9 , 0 0 z B
5 4 5 5
Wyszukiwarka
Podobne podstrony:
informatyka jquery poradnik programisty wlodzimierz gajda ebookŁaczenie napisow z filmem divx program Sub2Divx poradnikzestawy cwiczen przygotowane na podstawie programu Mistrz Klawia 6Międzynarodowy Program Badań nad Zachowaniami SamobójczymiCSharp Introduction to C# Programming for the Microsoft NET Platform (Prerelease)Instrukcja Programowania Zelio Logic 2 wersja polskaProgram wykładu Fizyka II 14 15roprm ćwiczenie 6 PROGRAMOWANIE ROBOTA Z UWZGLĘDNIENIEM ANALIZY OBRAZU ARLANGio port programming 3ogqzy3bscrrpgv753q3uywjfexgwwoiiffd46a 3ogqzy3bscrrpgv753q3uywjfexgwwoiiffd46awięcej podobnych podstron