Overview
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                            ...
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...
The Outline
•   W t o use i t     hy•   Ver si ons , i ncl udi ng j Q y                                 uer•   Sel ect or s•   CSS•   ...
• 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  ...
Why jQuery• You ar e not al one ! I t ’s a com uni t y                                     m  .Const ant devel opm ent and...
•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 ...
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>        ...
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...
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 .    ...
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• ...
Selectors• Ther e ar e many !• Tag nam e       $(‘di v’)• C ass nam   l       e       $(‘.cl assname’)• ID       $(‘#I D’)...
• $(‛ ")  ▫ 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  ...
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 ...
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 v...
Decorating CSSAccessi 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• $(#ce...
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)...
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...
Manipulations• .append(D obj )           om  $(.cont ai ner ).append($(h2));  I f $(‘h2’) f ound i t ’l l be moved i nt o ...
TraversingTr 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);• .no...
TraversingTr ee Tr aver si ng  •   .chi l dr en()  •   .par ent (), par ent s()  •   .next (), .pr ev()  •   .si bi l i ng...
Events and Binding• .bi nd()     $(sel ect or ).bi nd(event N e, handl er Fn);                                 am     $(se...
Interaction HelpersCoupl ed event s• .hover ()  $(sel ect or ).hover (over Handl er , out Handl er )• .t oggl e()  $(selec...
Spice it Effects and Animations
Adding Effects -visibility• .show ()• $(#showButton).click(function() {  $(#disclaimer).show();});• .hi de()• M m cki ng t...
Extra parameters• Speed D at i on          ur ▫ sl ow f ast , or nor m        ,                al     (speed) ▫ O i n M l ...
Adding Effects - Fading• f adeI n( speed, [cal l back] )• f adeO ( speed, [cal l back] )         ut  $(#hi deBut t on).cl ...
Adding Effects – Sliding•   .sl i deD n()              ow•     .sl i deUp()•   .sl i deToggl e()•   Sam pr evi ous par am ...
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 ...
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   ...
Extending jQuery andPlug-ins
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 ...
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...
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(mouseo...
• $.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...
Misc• $.aj ax  ▫ $.aj ax(    { t ype: G Post ‘                 et    , ur l : ‘ser vi ce.asm et hod‘                      ...
jQuery UI
jQuery UI•   W dget s      i•   I nt er act i ons•   Ef f ect s•   Them  es
UI Widgets1. Sel ect your cont r ol t o dow oad                                 nl2. Them i t !        e3. D nl oad som f ...
Lets see it
Interactions ▫ D aggabl e    r ▫ D oppabl e    r ▫ R zabl e    esi ▫ Sel ect abl e ▫ Sor t abl e
EffectsYou 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 ...
Themes
jQuery
jQuery
Upcoming SlideShare
Loading in …5
×

jQuery

437
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
437
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery

  1. 1. Overview
  2. 2. 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
  3. 3. 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.
  4. 4. The Outline
  5. 5. • 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
  6. 6. • Aj ax w t h j Q ey i ur•U I  j Q y C r ol s uer ont  Themes
  7. 7. 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
  8. 8. 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
  9. 9. •H ghl y cust om zabl e U C r ol s i i I ont
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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)
  16. 16. • $(‛ ") ▫ 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
  17. 17. 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 .
  18. 18. 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)‛)
  19. 19. Decorating CSSAccessi 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);
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. TraversingTr 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 )")
  24. 24. TraversingTr ee Tr aver si ng • .chi l dr en() • .par ent (), par ent s() • .next (), .pr ev() • .si bi l i ngs()
  25. 25. 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
  26. 26. Interaction HelpersCoupl ed event s• .hover () $(sel ect or ).hover (over Handl er , out Handl er )• .t oggl e() $(selector). Toggle(handler1, handler2….)
  27. 27. Spice it Effects and Animations
  28. 28. 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
  29. 29. 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.
  30. 30. 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 ’); });
  31. 31. 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
  32. 32. 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 });
  33. 33. 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 .
  34. 34. Extending jQuery andPlug-ins
  35. 35. 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 
  36. 36. 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
  37. 37. 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 ] )
  38. 38. • $.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
  39. 39. 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) { } ;});
  40. 40. jQuery UI
  41. 41. jQuery UI• W dget s i• I nt er act i ons• Ef f ect s• Them es
  42. 42. UI Widgets1. Sel ect your cont r ol t o dow oad nl2. Them i t ! e3. 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 > .m4. and cal l i t you have i t .
  43. 43. Lets see it
  44. 44. Interactions ▫ D aggabl e r ▫ D oppabl e r ▫ R zabl e esi ▫ Sel ect abl e ▫ Sor t abl e
  45. 45. EffectsYou 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
  46. 46. Themes
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×