introduction
                 to
                 jQuery
              Garrett Johnson // CharlotteJS // 8-19-2010




Fri...
Me?
                Jr. Web Developer at Red Ventures
                Student
                I will program in just about...
jQuery
                Seriously?
                "jQuery is a fast and concise JavaScript Library that
                si...
jQuery

                          selectors    manipulation   effects



                          attributes       css   ...
Lets Get It



                   A quick tour with some stops on the way. Feel free to
                                 s...
document.ready?
                just an event.*
                gets triggered once the DOM is parsed/loaded.
            ...
document.ready?
                      1.html




Friday, August 20, 2010
selectors

                          node type   descendants    attributes



                             id          chi...
selectors
                      2.html




Friday, August 20, 2010
selectors
                      cache selectors
                      selector context
                      find()
       ...
selectors
                      3.html




Friday, August 20, 2010
wait... what the $
                      $ === jQuery
                      $() is a factory.*
                      retur...
wait... what the $
                      4.html




Friday, August 20, 2010
manipulation

                          append    html     detach



                          prepend   filter    each



...
manipulation
                      5.html




Friday, August 20, 2010
traversing

                          parents     next      attributes



                          children   siblings   ...
traversing
                      6.html




Friday, August 20, 2010
traversing / manipulation
                      once you found it. do something.
                      tons more features ...
events

                          binding     proxy       shorthands*



                          custom       live      ...
events
                      find something. bind it.
                      $(‘.foo’).bind(‘click’, fn);
                  ...
events
                      7.html




Friday, August 20, 2010
events
                      bubbling.
                      delegating.
                      lower memory foot print.
  ...
events
                      8.html




Friday, August 20, 2010
events
                      event.data
                      clean up that repetitive code.
                      binding...
events
                      9.html




Friday, August 20, 2010
events
                      custom events
                      clean up that repetitive code.**
                      tr...
events
                      10.html




Friday, August 20, 2010
effects

                           hide     slide    fadeOut



                           show     toggle   delays



  ...
effects
                      nifty....




Friday, August 20, 2010
ajax

                          get    getJSON     ajaxSetup



                          post     ajax       events*



 ...
ajax
                      shorthand methods
                      the core ajax method
                      default confi...
ajax
                      12.html




Friday, August 20, 2010
extending
                          plugins
                          expressions




Friday, August 20, 2010
extending
                      13.html




Friday, August 20, 2010
what else?
                          questions?
                          favorite plugins?
                          prob...
peace!
                          gtalk: gjj391
                          aim: gjohnson391
                          pdf/co...
Upcoming SlideShare
Loading in …5
×

Introduction to jQuery :: CharlotteJS

402 views

Published on

Slide deck from the 8/19/2010 CharlotteJS meetup.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
402
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to jQuery :: CharlotteJS

  1. 1. introduction to jQuery Garrett Johnson // CharlotteJS // 8-19-2010 Friday, August 20, 2010
  2. 2. Me? Jr. Web Developer at Red Ventures Student I will program in just about anything. Started this joint! (with a lot of help from Nathan and Aaron) Friday, August 20, 2010
  3. 3. jQuery Seriously? "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development." Friday, August 20, 2010
  4. 4. jQuery selectors manipulation effects attributes css ajax traversing events utilities Friday, August 20, 2010
  5. 5. Lets Get It A quick tour with some stops on the way. Feel free to stop and start discussion. Friday, August 20, 2010
  6. 6. document.ready? just an event.* gets triggered once the DOM is parsed/loaded. use as much as you want.* just put your <script></script> prior to </body> or right below the desired element. DOM is ready at this point. portability?* Friday, August 20, 2010
  7. 7. document.ready? 1.html Friday, August 20, 2010
  8. 8. selectors node type descendants attributes id child expressions* class name multiples more Friday, August 20, 2010
  9. 9. selectors 2.html Friday, August 20, 2010
  10. 10. selectors cache selectors selector context find() exact on the left, general on the right. avoid pure class or node selectors keep it simple! Friday, August 20, 2010
  11. 11. selectors 3.html Friday, August 20, 2010
  12. 12. wait... what the $ $ === jQuery $() is a factory.* returns “array like” collection of “jQuery” objects. not just css selectors. raw elements.* html.* Friday, August 20, 2010
  13. 13. wait... what the $ 4.html Friday, August 20, 2010
  14. 14. manipulation append html detach prepend filter each val *class more Friday, August 20, 2010
  15. 15. manipulation 5.html Friday, August 20, 2010
  16. 16. traversing parents next attributes children siblings *all prev find more Friday, August 20, 2010
  17. 17. traversing 6.html Friday, August 20, 2010
  18. 18. traversing / manipulation once you found it. do something. tons more features for traversing and manipulation. the docs are awesome. Friday, August 20, 2010
  19. 19. events binding proxy shorthands* custom live delegate namespaces delegation* more Friday, August 20, 2010
  20. 20. events find something. bind it. $(‘.foo’).bind(‘click’, fn); $(‘.foo’).click(fn); $(‘.foo’).live(‘click’, fn); $(‘#bar’).delegate(‘.foo’, ‘click’, fn)* Friday, August 20, 2010
  21. 21. events 7.html Friday, August 20, 2010
  22. 22. events bubbling. delegating. lower memory foot print. performance++ Friday, August 20, 2010
  23. 23. events 8.html Friday, August 20, 2010
  24. 24. events event.data clean up that repetitive code. binding time.* Friday, August 20, 2010
  25. 25. events 9.html Friday, August 20, 2010
  26. 26. events custom events clean up that repetitive code.** trigger time. Friday, August 20, 2010
  27. 27. events 10.html Friday, August 20, 2010
  28. 28. effects hide slide fadeOut show toggle delays animate fadeIn more Friday, August 20, 2010
  29. 29. effects nifty.... Friday, August 20, 2010
  30. 30. ajax get getJSON ajaxSetup post ajax events* load getScript more Friday, August 20, 2010
  31. 31. ajax shorthand methods the core ajax method default configuration events global local Friday, August 20, 2010
  32. 32. ajax 12.html Friday, August 20, 2010
  33. 33. extending plugins expressions Friday, August 20, 2010
  34. 34. extending 13.html Friday, August 20, 2010
  35. 35. what else? questions? favorite plugins? problems? Friday, August 20, 2010
  36. 36. peace! gtalk: gjj391 aim: gjohnson391 pdf/code will be on github.com/gjohnson Friday, August 20, 2010

×