jQuery

Overview
• i t ’s m el y a JavaScr i pt Li br ar y.
er

• Fi r st cr eat ed by j ohn R g
esi l i nkedi n

•Open sour ce M T & G dual Li cense
I PL

• Pl anned f or i n 2005 Announced i n 2006.

• Li ght w ght 19kb
ei

Overview
• W del y used
i

• M cr osof t i nt egr at i on shi pped w t h M
i i VC
, t he new VS has i t ’s I nt el l i sense.

• W t o use i t
hy
• Ver si ons , i ncl udi ng j Q y
uer
• Sel ect or s
• CSS
• Tr aver si ng
• M pul at i ons
ani
• Event s
• Ef f ect s and Ani m i ons
at
• Ext ensi ons, Pl ug-i ns

• Aj ax w t h j Q ey
i ur
•U I
 j Q y C r ol s
uer ont
 Themes

Why jQuery
• a f ast JavaScr i pt Li br ar y t hat si m i f i es
pl
H L docum
TM ent t r aver si ng, event
handl i ng, ani m i ng, and m
at any ot her t asks

• al l ow u t o f ocus your ef f or t s on your m nai
f unct i onal i t i es and r equi r em s ,t aki ng
ent
of f t he bur den f r om you ( i .e. handl es t he
C oss br ow
r ser , U C r ol s ..)
I ont

Why jQuery
• You ar e not al one ! I t ’s a com uni t y
m
.Const ant devel opm ent and i m ovem
pr ent
t hr ough pl ug-i ns and ext ensi ons .

• ut i l i t y f unct i ons t hat i m em
pl ent com onm
f unct i onal i t y m ssi ng– or i s a ni ght m e – i n
i ar
JavaScr i pt (cl one obj ect s, st r i ng t r i m i ng )
m

•H ghl y cust om zabl e U C r ol s
i i I ont

Why jQuery
• C ean separ at i on
l
Core , UI, Validation plug-in …Any addi t i onal
r equi r ed f unct i onal i t y can be i n a modul ar
f ashi on—so you can easi l y count your
f oot pr i nt and bandw dt h cal or i es.
i

• You shoul d l ear n i t 
i t ’s ever yw e G
her oogl e , M cr osof t ... H
i ence
you’l l be seei ng i t f or a l ong t i m t o com !
e e

Including jQuery
• I ncl udi ng a j avaScr i pt Fi l e
<head>
<t i t l e>H l o j Q y w l d!</t i t l e>
el uer or
<scr i pt t ype='t ext /j avascr i pt ' sr c='j quer y-1.4-
m n.j s'></scr i pt >
i
</head>
• C r ent ver si on 1.6.2
ur
• f i l es com i n
e
C pr essed : sm l er f i l e si ze, D ay i n
om al el
execut i on, not avai l abl e i n al l ver si ons .
U ncom essed : debuggi ng, r eadi ng .
pr
M ni f i ed , r ecom ended .
i m

Including jQuery
• C pr essed (m ni f i ed) ,C m s ,spaces and
om i om ent
l i ne br eaks have been r emoved and var i abl e
nam ar e shor t ened.
es

• I t s your cal l : Bandw dt h cost
i Vs
r eadabi l i t y

Getting started into syntax
• The Si m est st at em
pl ent i n t hi s gener al f or m
:

Sel ect or . Act i on . Par am er s
et

j Q y(‘di v’).css(‘col or ’,’r ed’)
uer

• You can use t he al i as ‚$‛ f or jQ y
uer

SELECTORS
• $(docum ).r eady(f unct i on() {
ent
al er t (‘doc i s r eady ar e you r eady !');
});
Shor t cut
• $(f unct i on() {al er t (‘doc i s r eady ar e you
r eady !');
• });
• I t s pr ef er abl e t o do t he act i ons
..sel ect i ons i n t hi s event , t o ensur e t hat
doc ar e r eady and l oaded , a l i t t l e bi t
f ast er t han JavaScr i pt event

Selectors
• Ther e ar e many !
• Tag nam e
$(‘di v’)
• C ass nam
l e
$(‘.cl assname’)
• ID
$(‘#I D’)
• C bi nat i on
om
$(t agnam .cl assnam ')
e e
$(‘#Ancest or descendant ’)
$('di v .f ancy p span')

• $(‛ ")
▫ Sel ect al l el em s.ent
• (‚di v,span‛)
▫ Sel ect s D v AN Span el em , M t i pl e
i D ent ul
Sel ect i on
• At t r i but e :
▫ $("i nput [nam e='new et t er ']")
sl

Filters on selections
• Li ke havi ng w t h gr oup by,,ar e def i ned by a
i
col on, f ol l ow by t he f i l t er nam
ed e

• :even, :odd f i l t er s keeps ever y (even)-i ndexed
el ement i n t he sel ect i on and r em oves t he r est .

• $("di v:hi dden")
Sel ect al l hi dden di vs.

• $("di v:vi si bl e")
Sel ect al l vi si bl e di vs .

Other Filters
• C l d Fi l t er s:
hi
▫ $("di v span :f i r st -chi l d")

• $("di v:cont ai ns(‘me')")
▫ Fi nds al l di vs cont ai ni ng ‚m .
e"

• For m Fi l t er s:
▫ $("i nput :enabl ed")
▫ $(‚ i nput :not (:checked)‛)

Decorating CSS

Accessi ng C poper t y
SS
• $('#cel ebs t body t r :f i r st ').css('f ont -si ze');

Set t i ng
• $('#cel ebs t body t r :even').css('backgr ound-
col or ','#dddddd');

Decorating CSS
• O ect l i t er al s i n set t i ng C
bj ss
$('#cel ebs t body t r :even').css(
{'backgr ound-col or ': '#dddddd', 'col or ': '#666666'});

• Toggl ei ng C asses
l
▫ $('#cel ebs').addC ass(cl ass1 cl ass2i f any');
l
▫ $('#cel ebs').r em oveC ass(cl assA');
l
▫ $(t hi s).t oggl eC ass(‘cl assB');
l

Manipulation
• Set t i ng and get t i ng t ext or H m t l
• $(‘di v’).t ext ()
• $(‘di v’).t ext (‘t hi s t ext goes i n t he di v ’)

• $(‘#out er di v’).ht m ()
l
• $(‘#updat edD v’).ht m ($(‘# out er di v’).ht m ())
i l l

Manipulations
• .append(D obj )
om
$('.cont ai ner ').append($('h2'));
I f $(‘h2’) f ound i t ’l l be moved i nt o cont ai ner
A si m l ar one i s (m kupD obj ).appendTo(cont ai ner )
i ar om

• I nser t bef or (t ar get ), i nser t A t er (t ar get )
f
$('h2').i nser t Bef or e($('.cont ai ner '));
• .r emove()
em at ent O.
R ove t he set of m ched el em s f r om t he D M
• .cl one()
C eat e a deep copy of t he set of m ched el em s.
r at ent

Traversing

Tr aver si ng f i l t er s
• .f i r st ()
• .l ast ()
• .eq()
▫ $('l i ').eq(2).css('backgr ound-col or ', 'r ed');
• .not (sel ect or f n), i s(sel ect or f n)
▫ $('l i ').not (':even').css('backgr ound-col or ', 'r ed');
▫ $(t hi s).i s(":cont ai ns('Pet er ')")

Traversing
Tr ee Tr aver si ng

• .chi l dr en()
• .par ent (), par ent s()
• .next (), .pr ev()
• .si bi l i ngs()

Events and Binding
• .bi nd()
$(sel ect or ).bi nd(event N e, handl er Fn);
am
$(sel ect or ).event (handl er Fn);

• .unbi nd()
$(sel ect or ).unbi nd(event N e, handl er Fn);
am

• .t r i gger ()
$(sel ect or ).t r i gger (event N e);
am

Interaction Helpers
Coupl ed event s
• .hover ()
$(sel ect or ).hover (over Handl er , out Handl er )

• .t oggl e()
$(selector). Toggle(handler1, handler2….)

Spice it
Effects and Animations

Adding Effects -visibility
• .show ()
• $('#showButton').click(function() {
$('#disclaimer').show();});
• .hi de()
• M m cki ng t oggl e
i i
• $('#toggleButton').click(function() { if
($('#disclaimer').is(':visible'))
• { $('#disclaimer').hide(); }
• else {$('#disclaimer').show(); }});
• .t oggl e()
• O si m y
r pl

Extra parameters
• Speed D at i on
ur
▫ sl ow f ast , or nor m
, al (speed)
▫ O i n M l l i seconds(dur at i on)
r i

• C l Back Fn
al
▫ Speci f y a code t hat needs t o r un af t er t he
ef f ect has f i ni shed.

Adding Effects - Fading

• f adeI n( speed, [cal l back] )
• f adeO ( speed, [cal l back] )
ut

$('#hi deBut t on').cl i ck(f unct i on() {
$('#di scl ai m ').f adeO (‘sl ow
er ut ’);
});

Adding Effects – Sliding

• .sl i deD n()
ow
• .sl i deUp()
• .sl i deToggl e()
• Sam pr evi ous par am er s
e et

Animations
• ani m e(par am speed, cal l back)
at s,
• Par am : an obj ect l i t er al l i st st yl es i n a f or m
s
of pr oper t y and val ue .
• St yl e pr oper t i es i n C el C
am ase ;
f ont -si ze= f ont Si ze
• Ex:
$(‘di v’).ani m e({
at
w dt h:’280px’, hei ght : ‘500px’
i
});

Animations
• The m cal w d t oggl e !!
agi or
$('#m v').ani m e({ w dt h: 't oggl e' }, ‘f ast ’);
edi at i

• $('#m v').st op();
edi
St op al l ani m i ons done on an el em
at ent .

Plug-in
• I f you ar e f aci ng an i ssue check t he
pl ug-i n r eposi t or y bef or e r e-i nvent i ng t he
wheel !.

• H t o use i t ? Just i ncl ude i t
ow
<scr i pt t ype=‛t ext /j avascr i pt ‛
sr c=‛j s/j quer y.W SoEver pl ugi n.j s‛></scr i pt >
at

• H to m
ow ake one ?
Ther e ar e som gui del i nes, basi cal l y t hey ar e
e
based on cl osur es 

Extending jQuery
• You can add a f unct i on t o j Q y l i br ar y
uer

• j Q y.f n.ext end()
uer

$.f n.ext end(
O ect l i t er al goes her e
bj
);
w e O ect l i t er al {f unN e :f unct i on (){}}
her bj am

Misc
• Br owser Sni f f i ng
▫ $.br owser
▫ $.suppor t .opaci t y
• Li ve and di e
▫ $('#descr i pt i on').l i ve('mouseover ', f unct i on() {
$(t hi s).css('backgr ound-col or ', 'yel l ow ');});

• Ext endi ng
• j Q y.ext end( [deep], t ar get , obj ect 1, [obj ect N
uer ]
)

• $.each
▫ j Q y.each( col l ect i on, cal l back(i ndex, val ue)
uer
)

• Aj ax
▫ $('#bi ogr aphy').l oad('com ador s.ht m
put l
di v:f i r st ');
▫ $.get Scr i pt

Misc
• $.aj ax
▫ $.aj ax(
{ t ype: 'G Post ‘
et
, ur l : ‘ser vi ce.asm et hod‘
xm
, dat a: { i d: 142 }
, success:f unct i on(dat a) {
}
;});

jQuery UI
• W dget s
i
• I nt er act i ons
• Ef f ect s
• Them es

UI Widgets
1. Sel ect your cont r ol t o dow oad
nl
2. Them i t !
e
3. D nl oad som f i l es and r ef er ence t hem
ow e
 <l i nk t ype="t ext /css" hr ef ="css/t hem enam quer y-ui -1.8.15.cust om
e/j .css"
r el ="St yl esheet " />
 <scr i pt t ype="t ext /j avascr i pt " sr c="j s/j quer y-1.4.4.m n.j s"></scr i pt >
i
 <scr i pt t ype="t ext /j avascr i pt " sr c="j s/j quer y-ui -
1.8.15.cust om i n.j s"></scr i pt >
.m

4. and cal l i t you have i t .

Interactions
▫ D aggabl e
r
▫ D oppabl e
r
▫ R zabl e
esi
▫ Sel ect abl e
▫ Sor t abl e

Effects
You j ust have f un expl or i ng 

▫ ef f ect (
ef f ect , [opt i ons], [speed], [cal l back] )

▫ t oggl e(
ef f ect , [opt i ons], [speed], [cal l back] )

▫ Show H de
i

jQuery

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Destaque

Destaque (17)

jQuery