Beginning
Introduction <ul><li>Ralph Whitbeck </li></ul><ul><li>Senior Web Application Engineer  </li></ul><ul><li>BrandLogic Corpor...
Introduction <ul><li>Tip Jar is  open   </li></ul><ul><li>  </li></ul><ul><li>Tips can be sent via paypal </li></ul><ul><l...
Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul>
Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul><ul><ul><ul><li...
Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul><ul><ul><ul><li...
Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul><ul><ul><ul><li...
Setting Expectations
Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul>
Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll exp...
Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll exp...
Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll exp...
Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll exp...
Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll exp...
What is jQuery?
What is jQuery?  <ul><ul><li>jQuery is JavaScript  </li></ul></ul>
What is jQuery?  <ul><ul><li>With JavaScript show a hidden element </li></ul></ul><ul><li>  </li></ul><ul><li>if (browserT...
What is jQuery?  <ul><ul><li>Show a hidden div using jQuery </li></ul></ul><ul><li>  </li></ul><ul><ul><li>$(“#HiddenDIV”)...
 
 
What is jQuery?  <ul><ul><li>jQuery is JavaScript  </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified a...
What is jQuery?  <ul><ul><li>jQuery is JavaScript  </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified a...
What is jQuery?  <ul><ul><li>jQuery is JavaScript  </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified a...
What is jQuery?  <ul><ul><li>jQuery is JavaScript  </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified a...
What can jQuery Produce? <ul><ul><li>High school students from Spotswood High School </li></ul></ul><ul><ul><li>Jamie Gila...
Benefits to jQuery
Benefits to jQuery <ul><ul><li>Well documented (http://docs.jquery.com) </li></ul></ul>
Benefits to jQuery <ul><ul><li>Well documented (http://docs.jquery.com) </li></ul></ul><ul><ul><li>Thriving community of d...
Benefits to jQuery <ul><ul><li>jQuery is Extensible </li></ul></ul><ul><ul><ul><li>Create/release your own plugins </li></...
Benefits to jQuery <ul><ul><li>jQuery is Extensible </li></ul></ul><ul><ul><ul><li>Create/release your own plugins </li></...
Who is using jQuery? <ul><ul><li>Google  </li></ul></ul><ul><ul><li>Amazon    </li></ul></ul><ul><ul><li>IBM </li></ul></u...
jQuery's History <ul><li>jQuery was released: </li></ul><ul><li>      </li></ul><ul><li>     January 14, 2006  </li></ul><...
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.0 - August 26, 2006 </li></ul></ul>
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.0 - August 26, 2006 </li></ul></ul><ul><ul...
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.0 - August 26, 2006 </li></ul></ul><ul><ul...
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.2 - September 10, 2007 </li></ul></ul>
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.2 - September 10, 2007  </li></ul></ul><ul...
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.2 - September 10, 2007  </li></ul></ul><ul...
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  Web site redesign - August 28, 2008 </li></u...
jQuery's History
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  Web site redesign - August 28, 2008 </li></u...
jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  Web site redesign - August 28, 2008 </li></u...
jQuery's Core Team
jQuery's Core Team <ul><li>  Development </li></ul><ul><li>  </li></ul><ul><ul><li>  John Resig </li></ul></ul><ul><ul><li...
jQuery's Core Team <ul><li>  Evangelism </li></ul><ul><li>  </li></ul><ul><ul><li>  Rey Bango </li></ul></ul><ul><ul><li> ...
jQuery's Core Team <ul><li>  jQuery UI  </li></ul><ul><li>  </li></ul><ul><ul><li>  Paul Bakaus </li></ul></ul><ul><ul><li...
jQuery's Core Team <ul><li>Plugins  </li></ul><ul><li>  </li></ul><ul><ul><li>  Yehuda Katz </li></ul></ul><ul><ul><li>  K...
jQuery's Core Team <ul><li>Web, Design and Infrastructure </li></ul><ul><li>   </li></ul><ul><ul><li>  Scott Jehl </li></u...
Setting up jQuery <ul><li>  </li></ul>
Setting up jQuery <ul><li>Include jQuery on the page </li></ul><ul><li>  </li></ul>
Setting up jQuery <ul><li>Include jQuery on the page </li></ul><ul><li>  </li></ul><ul><ul><li>Download latest from jQuery...
Setting up jQuery <ul><li>Include jQuery on the page </li></ul><ul><li>  </li></ul><ul><ul><li>Download latest from jQuery...
Setting up jQuery <ul><li>Set jQuery to run when the DOM is loaded. </li></ul><ul><li>  </li></ul><ul><li>     $(document)...
How jQuery Works <ul><li>  </li></ul><ul><li>  $(&quot;div&quot;).show(); </li></ul>
How jQuery Works <ul><li>$ </li></ul><ul><li>Initiate the jQuery Object </li></ul>
How jQuery Works <ul><li>  </li></ul><ul><li>  jQuery(&quot;div&quot;).show(); </li></ul>
How jQuery Works <ul><li>  (&quot;div&quot;) </li></ul><ul><li>Select Elements </li></ul>
How jQuery Works <ul><li>  $(&quot;div&quot;) </li></ul><ul><li>$(&quot;div#intro h2&quot;) </li></ul><ul><li>$(&quot;div....
How jQuery Works <ul><li>  .show() </li></ul><ul><li>Do Something </li></ul>
How jQuery Works <ul><li>  Demo </li></ul><ul><li>(Demo based on:  http://ejohn.org/apps/learn-jquery/ ) </li></ul>
How jQuery is Structured <ul><ul><li>Core   </li></ul></ul><ul><ul><li>Selectors </li></ul></ul><ul><ul><li>Attributes </l...
jQuery Core <ul><ul><li>.each() </li></ul></ul><ul><ul><li>.length() </li></ul></ul><ul><ul><li>.eq() </li></ul></ul><ul><...
Selectors <ul><li>     #id </li></ul><ul><li>     element     .class </li></ul><ul><li>     :first </li></ul><ul><li>     ...
Attributes <ul><li>     .removeAttr() </li></ul><ul><li>  </li></ul><ul><li>     .addClass() </li></ul><ul><li>     .hasCl...
Traversing <ul><li>     .not() </li></ul><ul><li>  </li></ul><ul><li>     .add() </li></ul><ul><li>  </li></ul><ul><li>   ...
Manipulation <ul><li>     .append() </li></ul><ul><li>  </li></ul><ul><li>     .after() </li></ul><ul><li>     .insertAfte...
CSS <ul><li>     .width() </li></ul><ul><li>  </li></ul><ul><li>     .innerHeight() </li></ul><ul><li>     .height() </li>...
Events <ul><li>     .ready() </li></ul><ul><li>  </li></ul><ul><li>     .mouseout() </li></ul><ul><li>     .trigger() </li...
AJAX <ul><li>     .ajax() </li></ul><ul><li>  </li></ul><ul><li>     .load() </li></ul><ul><li>     .getJSON() </li></ul><...
Effects <ul><li>     .hide() </li></ul><ul><li>    </li></ul><ul><li>     .show() </li></ul><ul><li>     .fadeTo() </li></...
Putting it all together <ul><li>Real-World  Demo  </li></ul><ul><li>(Demo based on:  http://ralphwhitbeck.com/2007/11/20/P...
Thank You <ul><li>Speaker rate </li></ul><ul><li>http://speakerrate.com/talks/1400-beginning-jquery </li></ul>
Thank You <ul><li>Speaker rate </li></ul><ul><li>http://speakerrate.com/talks/1400-beginning-jquery </li></ul>
Upcoming SlideShare
Loading in...5
×

Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02

4,933

Published on

This is the ppt of the Jquery for beginners -jquery conference 2009

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,933
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
188
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02

  1. 1. Beginning
  2. 2. Introduction <ul><li>Ralph Whitbeck </li></ul><ul><li>Senior Web Application Engineer  </li></ul><ul><li>BrandLogic Corporation </li></ul><ul><li>http://brandlogic.com </li></ul><ul><li>Blog: http://ralphwhitbeck.com </li></ul><ul><li>Twitter: RedWolves </li></ul>
  3. 3. Introduction <ul><li>Tip Jar is open </li></ul><ul><li>  </li></ul><ul><li>Tips can be sent via paypal </li></ul><ul><li>[email_address] </li></ul><ul><li>*Speaker Note* </li></ul><ul><li>Pause so audience can write down address </li></ul>
  4. 4. Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul>
  5. 5. Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul><ul><ul><ul><li>Beginning jQuery  </li></ul></ul></ul>
  6. 6. Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul><ul><ul><ul><li>Beginning jQuery </li></ul></ul></ul><ul><ul><ul><li>Extending jQuery - Understanding plugins </li></ul></ul></ul>
  7. 7. Setting Expectations <ul><ul><li>This begins the first part of a three part beginners track </li></ul></ul><ul><ul><ul><li>Beginning jQuery </li></ul></ul></ul><ul><ul><ul><li>Extending jQuery - Understanding plugins </li></ul></ul></ul><ul><ul><ul><li>Beginning jQuery UI </li></ul></ul></ul>
  8. 8. Setting Expectations
  9. 9. Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul>
  10. 10. Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll explore jQuery's history </li></ul></ul>
  11. 11. Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll explore jQuery's history </li></ul></ul><ul><ul><li>Meet the core team </li></ul></ul>
  12. 12. Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll explore jQuery's history </li></ul></ul><ul><ul><li>Meet the core team </li></ul></ul><ul><ul><li>How jQuery works </li></ul></ul>
  13. 13. Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll explore jQuery's history </li></ul></ul><ul><ul><li>Meet the core team </li></ul></ul><ul><ul><li>How jQuery works </li></ul></ul><ul><ul><li>Get jQuery on your page </li></ul></ul>
  14. 14. Setting Expectations <ul><ul><li>This talk is for those just starting out with jQuery </li></ul></ul><ul><ul><li>We'll explore jQuery's history </li></ul></ul><ul><ul><li>Meet the core team </li></ul></ul><ul><ul><li>How jQuery works </li></ul></ul><ul><ul><li>Get jQuery on your page </li></ul></ul><ul><ul><li>Walk through a real-world examples </li></ul></ul>
  15. 15. What is jQuery?
  16. 16. What is jQuery? <ul><ul><li>jQuery is JavaScript </li></ul></ul>
  17. 17. What is jQuery? <ul><ul><li>With JavaScript show a hidden element </li></ul></ul><ul><li>  </li></ul><ul><li>if (browserType == &quot;gecko&quot; ) document.poppedLayer = </li></ul><ul><li>eval('document.getElementById(”HiddenDIV&quot;)'); </li></ul><ul><li>else if (browserType == &quot;ie&quot;) document.poppedLayer = </li></ul><ul><li>eval('document.getElementById(”HiddenDIV&quot;)'); </li></ul><ul><li>else </li></ul><ul><li>document.poppedLayer = </li></ul><ul><li>eval('document.layers[”HiddenDIV&quot;]'); document.poppedLayer.style.visibility = &quot;visible&quot;; </li></ul>
  18. 18. What is jQuery? <ul><ul><li>Show a hidden div using jQuery </li></ul></ul><ul><li>  </li></ul><ul><ul><li>$(“#HiddenDIV”).show(); </li></ul></ul>
  19. 21. What is jQuery? <ul><ul><li>jQuery is JavaScript </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified and GZIPed) </li></ul></ul>
  20. 22. What is jQuery? <ul><ul><li>jQuery is JavaScript </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified and GZIPed) </li></ul></ul><ul><ul><li>Easy and fast HTML DOM Selection </li></ul></ul>
  21. 23. What is jQuery? <ul><ul><li>jQuery is JavaScript </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified and GZIPed) </li></ul></ul><ul><ul><li>Easy and fast HTML DOM Selection </li></ul></ul><ul><ul><li>Built to work on all &quot;modern&quot; browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)  </li></ul></ul>
  22. 24. What is jQuery? <ul><ul><li>jQuery is JavaScript </li></ul></ul><ul><ul><li>It's a light-weight library (19kb minified and GZIPed) </li></ul></ul><ul><ul><li>Easy and fast HTML DOM Selection </li></ul></ul><ul><ul><li>Built to work on all modern browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)   </li></ul></ul><ul><ul><li>It's Open Source </li></ul></ul>
  23. 25. What can jQuery Produce? <ul><ul><li>High school students from Spotswood High School </li></ul></ul><ul><ul><li>Jamie Gilar </li></ul></ul><ul><ul><li>John Cicolella </li></ul></ul><ul><ul><li>Demo’d http:// www.jamie.strunex.net /homework/channel/ </li></ul></ul>
  24. 26. Benefits to jQuery
  25. 27. Benefits to jQuery <ul><ul><li>Well documented (http://docs.jquery.com) </li></ul></ul>
  26. 28. Benefits to jQuery <ul><ul><li>Well documented (http://docs.jquery.com) </li></ul></ul><ul><ul><li>Thriving community of developers </li></ul></ul><ul><ul><ul><li>Blogs  </li></ul></ul></ul><ul><ul><ul><li>Twitter </li></ul></ul></ul><ul><ul><ul><li>Online Tutorials </li></ul></ul></ul><ul><ul><ul><li>Books </li></ul></ul></ul><ul><ul><ul><li>Conferences </li></ul></ul></ul><ul><ul><ul><li>Classes </li></ul></ul></ul>
  27. 29. Benefits to jQuery <ul><ul><li>jQuery is Extensible </li></ul></ul><ul><ul><ul><li>Create/release your own plugins </li></ul></ul></ul><ul><ul><ul><li>Thousands of plugins available </li></ul></ul></ul>
  28. 30. Benefits to jQuery <ul><ul><li>jQuery is Extensible </li></ul></ul><ul><ul><ul><li>Create/release your own plugins </li></ul></ul></ul><ul><ul><ul><li>Thousands of plugins available </li></ul></ul></ul><ul><ul><li>jQuery works with other libraries </li></ul></ul><ul><ul><ul><li>Prototype </li></ul></ul></ul><ul><ul><ul><li>Mootools </li></ul></ul></ul>
  29. 31. Who is using jQuery? <ul><ul><li>Google </li></ul></ul><ul><ul><li>Amazon   </li></ul></ul><ul><ul><li>IBM </li></ul></ul><ul><ul><li>Microsoft  </li></ul></ul><ul><ul><li>Netflix </li></ul></ul><ul><ul><li>Twitter </li></ul></ul><ul><ul><li>Dell, Inc. </li></ul></ul><ul><ul><li>NBC </li></ul></ul><ul><ul><li>EA </li></ul></ul><ul><ul><li>Match </li></ul></ul><ul><ul><li>MLB </li></ul></ul><ul><ul><li>ESPN </li></ul></ul><ul><ul><li>Best Buy </li></ul></ul>
  30. 32. jQuery's History <ul><li>jQuery was released: </li></ul><ul><li>      </li></ul><ul><li>     January 14, 2006  </li></ul><ul><li>  </li></ul><ul><li>     BarCampNYC </li></ul><ul><li>  </li></ul>
  31. 33. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.0 - August 26, 2006 </li></ul></ul>
  32. 34. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.0 - August 26, 2006 </li></ul></ul><ul><ul><li>  1.1 - January 14, 2007 </li></ul></ul>
  33. 35. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.0 - August 26, 2006 </li></ul></ul><ul><ul><li>  1.1 - January 14, 2007 </li></ul></ul><ul><ul><li>  1.1.3 - July 5, 2007 </li></ul></ul>
  34. 36. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.2 - September 10, 2007 </li></ul></ul>
  35. 37. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.2 - September 10, 2007 </li></ul></ul><ul><ul><li>jQuery UI released - September 16, 2007 </li></ul></ul>
  36. 38. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  1.2 - September 10, 2007 </li></ul></ul><ul><ul><li>jQuery UI released - September 16, 2007 </li></ul></ul><ul><ul><li>1.2.6 - May 24, 2008 </li></ul></ul>
  37. 39. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  Web site redesign - August 28, 2008 </li></ul></ul>
  38. 40. jQuery's History
  39. 41. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  Web site redesign - August 28, 2008 </li></ul></ul><ul><ul><li>  1.3 - January 14, 2009 </li></ul></ul>
  40. 42. jQuery's History <ul><li>Versions </li></ul><ul><li>  </li></ul><ul><ul><li>  Web site redesign - August 28, 2008 </li></ul></ul><ul><ul><li>  1.3 - January 14, 2009 </li></ul></ul><ul><ul><li>  1.3.2 - February 20, 2009 </li></ul></ul>
  41. 43. jQuery's Core Team
  42. 44. jQuery's Core Team <ul><li>  Development </li></ul><ul><li>  </li></ul><ul><ul><li>  John Resig </li></ul></ul><ul><ul><li>  Brandon Aaron </li></ul></ul><ul><ul><li>  Ariel Flesler </li></ul></ul><ul><ul><li>  Jörn Zaefferer </li></ul></ul>
  43. 45. jQuery's Core Team <ul><li>  Evangelism </li></ul><ul><li>  </li></ul><ul><ul><li>  Rey Bango </li></ul></ul><ul><ul><li>  Karl Swedberg </li></ul></ul><ul><ul><li>  Cody Lindley </li></ul></ul>
  44. 46. jQuery's Core Team <ul><li>  jQuery UI </li></ul><ul><li>  </li></ul><ul><ul><li>  Paul Bakaus </li></ul></ul><ul><ul><li>  Richard D. Worth </li></ul></ul><ul><ul><li>  Scott González </li></ul></ul><ul><ul><li>  Todd Parker </li></ul></ul><ul><ul><li>  Many others </li></ul></ul>
  45. 47. jQuery's Core Team <ul><li>Plugins </li></ul><ul><li>  </li></ul><ul><ul><li>  Yehuda Katz </li></ul></ul><ul><ul><li>  Klaus Hartl </li></ul></ul><ul><ul><li>  Mike Alsup  </li></ul></ul>
  46. 48. jQuery's Core Team <ul><li>Web, Design and Infrastructure </li></ul><ul><li>  </li></ul><ul><ul><li>  Scott Jehl </li></ul></ul><ul><ul><li>  Mike Hostetler </li></ul></ul><ul><ul><li>  Jonathan Sharp </li></ul></ul>
  47. 49. Setting up jQuery <ul><li>  </li></ul>
  48. 50. Setting up jQuery <ul><li>Include jQuery on the page </li></ul><ul><li>  </li></ul>
  49. 51. Setting up jQuery <ul><li>Include jQuery on the page </li></ul><ul><li>  </li></ul><ul><ul><li>Download latest from jQuery.com <script src=&quot;jquery-1.3.2.min.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul>
  50. 52. Setting up jQuery <ul><li>Include jQuery on the page </li></ul><ul><li>  </li></ul><ul><ul><li>Download latest from jQuery.com <script src=&quot;jquery-1.3.2.min.js&quot; type=&quot;text/javascript></script> </li></ul></ul><ul><ul><li>Include the latest from Google AJAX Libraries API <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul>
  51. 53. Setting up jQuery <ul><li>Set jQuery to run when the DOM is loaded. </li></ul><ul><li>  </li></ul><ul><li>    $(document).ready(function(){ </li></ul><ul><li>        //put your jQuery code here. </li></ul><ul><li>    }); </li></ul>
  52. 54. How jQuery Works <ul><li>  </li></ul><ul><li>  $(&quot;div&quot;).show(); </li></ul>
  53. 55. How jQuery Works <ul><li>$ </li></ul><ul><li>Initiate the jQuery Object </li></ul>
  54. 56. How jQuery Works <ul><li>  </li></ul><ul><li>  jQuery(&quot;div&quot;).show(); </li></ul>
  55. 57. How jQuery Works <ul><li>  (&quot;div&quot;) </li></ul><ul><li>Select Elements </li></ul>
  56. 58. How jQuery Works <ul><li>  $(&quot;div&quot;) </li></ul><ul><li>$(&quot;div#intro h2&quot;) </li></ul><ul><li>$(&quot;div.section > p&quot;) </li></ul><ul><li>$(&quot;a[href='http://www.jquery.com']&quot;) </li></ul><ul><li>$(&quot;ul#nav li:first&quot;) </li></ul>
  57. 59. How jQuery Works <ul><li>  .show() </li></ul><ul><li>Do Something </li></ul>
  58. 60. How jQuery Works <ul><li>  Demo </li></ul><ul><li>(Demo based on: http://ejohn.org/apps/learn-jquery/ ) </li></ul>
  59. 61. How jQuery is Structured <ul><ul><li>Core  </li></ul></ul><ul><ul><li>Selectors </li></ul></ul><ul><ul><li>Attributes </li></ul></ul><ul><ul><li>Traversing </li></ul></ul><ul><ul><li>Manipulation </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Events </li></ul></ul><ul><ul><li>AJAX </li></ul></ul><ul><ul><li>Effects </li></ul></ul>
  60. 62. jQuery Core <ul><ul><li>.each() </li></ul></ul><ul><ul><li>.length() </li></ul></ul><ul><ul><li>.eq() </li></ul></ul><ul><ul><li>.get() </li></ul></ul><ul><ul><li>.index() </li></ul></ul><ul><ul><li>.data() </li></ul></ul><ul><ul><li>.removeData() </li></ul></ul><ul><li>...and many more! </li></ul>
  61. 63. Selectors <ul><li>    #id </li></ul><ul><li>    element     .class </li></ul><ul><li>    :first </li></ul><ul><li>    :last </li></ul><ul><li>    :not(selector) </li></ul><ul><li>    [attribute=value] </li></ul><ul><li>     </li></ul><ul><li>...and many more! </li></ul>
  62. 64. Attributes <ul><li>    .removeAttr() </li></ul><ul><li>  </li></ul><ul><li>    .addClass() </li></ul><ul><li>    .hasClass() </li></ul><ul><li>  </li></ul><ul><li>    .removeClass()   </li></ul><ul><li>    .toggleClass() </li></ul><ul><li>      </li></ul><ul><li>    .html()      </li></ul><ul><li>     .val() </li></ul><ul><li>...and many more! </li></ul>
  63. 65. Traversing <ul><li>    .not() </li></ul><ul><li>  </li></ul><ul><li>    .add() </li></ul><ul><li>  </li></ul><ul><li>    .children() </li></ul><ul><li>    .context() </li></ul><ul><li>    .next() </li></ul><ul><li>    .prevAll() </li></ul><ul><li>    .siblings() </li></ul><ul><li>...and many more! </li></ul>
  64. 66. Manipulation <ul><li>    .append() </li></ul><ul><li>  </li></ul><ul><li>    .after() </li></ul><ul><li>    .insertAfter() </li></ul><ul><li>    .wrap() </li></ul><ul><li>    .replaceWith() </li></ul><ul><li>    .empty() </li></ul><ul><li>...and many more! </li></ul>
  65. 67. CSS <ul><li>    .width() </li></ul><ul><li>  </li></ul><ul><li>    .innerHeight() </li></ul><ul><li>    .height() </li></ul><ul><li>    .outerHeight() </li></ul><ul><li>    .offset() </li></ul><ul><li>    .position() </li></ul><ul><li>    .css() </li></ul><ul><li>...and many more! </li></ul>
  66. 68. Events <ul><li>    .ready() </li></ul><ul><li>  </li></ul><ul><li>    .mouseout() </li></ul><ul><li>    .trigger() </li></ul><ul><li>    .hover() </li></ul><ul><li>    .toggle() </li></ul><ul><li>    .blur() </li></ul><ul><li>    .live() </li></ul><ul><li>...and many more! </li></ul>
  67. 69. AJAX <ul><li>    .ajax() </li></ul><ul><li>  </li></ul><ul><li>    .load() </li></ul><ul><li>    .getJSON() </li></ul><ul><li>    .getScript() </li></ul><ul><li>    .serialize </li></ul><ul><li>    .get() </li></ul><ul><li>    .post() </li></ul><ul><li>...and many more! </li></ul>
  68. 70. Effects <ul><li>    .hide() </li></ul><ul><li>    </li></ul><ul><li>    .show() </li></ul><ul><li>    .fadeTo() </li></ul><ul><li>    .slideToggle() </li></ul><ul><li>    .toggle() </li></ul><ul><li>    .slideUp() </li></ul><ul><li>    .slideDown() </li></ul><ul><li>...and many more! </li></ul>
  69. 71. Putting it all together <ul><li>Real-World Demo </li></ul><ul><li>(Demo based on: http://ralphwhitbeck.com/2007/11/20/PullingTwitterUpdatesWithJSONAndJQuery.aspx ) </li></ul>
  70. 72. Thank You <ul><li>Speaker rate </li></ul><ul><li>http://speakerrate.com/talks/1400-beginning-jquery </li></ul>
  71. 73. Thank You <ul><li>Speaker rate </li></ul><ul><li>http://speakerrate.com/talks/1400-beginning-jquery </li></ul>
  1. A particular slide catching your eye?

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

×