Learning jQuery @ MIT

4,793 views
4,662 views

Published on

A talk that I gave at MIT, in January 2009, about jQuery.

Published in: Technology
1 Comment
9 Likes
Statistics
Notes

  • km,m,

    <b>[Comment posted from</b> http://www.sliversofmysoul.netsons.org/2009/02/23/alcune-presentazioni-utili-su-jquery/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,793
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
266
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Learning jQuery @ MIT

  1. 1. MIT - January 2009 John Resig http://ejohn.org - http://twitter.com/jeresig
  2. 2. What is jQuery? An open source JavaScript library that ✦ simplifies the interaction between HTML and JavaScript.
  3. 3. Easy To Use Completely unobtrusive ✦ Uses CSS to layer functionality ✦ Easy to separate behavior ✦ Quick, terse, syntax ✦
  4. 4. The Focus of jQuery Find Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
  5. 5. Selectors
  6. 6. Todo List
  7. 7. Todo List All items saved in a session variable. ✦ ?item=Some+Item ✦ Save a single item. ?items=<li>item</li><li>item</li> ✦ Save a list of items.
  8. 8. Plugins Huge plugin ecosystem ✦ Managed by Plugin tracker ✦ http://plugins.jquery.com/ Hundreds in the tracker - even more on ✦ the web
  9. 9. jQuery Plugins Extend the jQuery system ✦ Add on extra methods: ✦ jQuery(“div”).hideRemove(); Trivial to implement: ✦ jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
  10. 10. jQuery UI A complete set of themed, cross-browser, ✦ user interface components (plugins!). Drag, Drop, Sort, Select, Resize ✦ Accordion, Datepicker, Dialog, Slider, Tabs ✦ More info: ✦ http://ui.jquery.com/ 1.6 is almost ready ✦
  11. 11. Accessibility Keyboard Accessible ✦ Screenreader Accessible ✦ Grant from Mozilla Foundation to ✦ implement ARIA
  12. 12. Themeroller Customize the styling of any jQuery UI ✦ component Full CSS, images for all components ✦ Easy to customize and use ✦ http://themeroller.com/ ✦
  13. 13. Why jQuery? Fully documented ✦ Great community ✦ Tons of plugins ✦ Small size (18kb) ✦ Everything works in IE 6+, Firefox 2+, ✦ Safari 3+, Chrome, and Opera 9+
  14. 14. Who uses jQuery? Projects: ✦ ✦ Wordpress, Drupal, CakePHP, Textpattern, Mozilla Companies: ✦ ✦ Google, IBM, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel... ✦ NBC, CBS, BBC, Reuters, Newsweek, Boston Globe, and more many others... ✦
  15. 15. Community Very active mailing list ✦ ✦ 150+ Posts/Day ✦ 12700+ Members Technorati: Hundred blog posts per day ✦
  16. 16. Growth
  17. 17. Books 3 Books Released: ✦ ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt) ✦ jQuery in Action (Manning)
  18. 18. jQuery 1.3 Released on the 14th ✦ 1.3.1 was released on the 21st ✦ Much faster, new live events ✦
  19. 19. 1.3 Selectors
  20. 20. How It Works How most engines work ✦ “div > p” ✦ Find all divs ✦ Loop through each div ✦ Find all child elements ✦ Verify if element is paragraph
  21. 21. How It Works “div p” ✦ Find all divs ✦ Loop through all divs ✦ Find all p, relative to the div Merge all results ✦ Figure out unique results ✦
  22. 22. Code name “Sizzle” http://github.com/jeresig/sizzle/tree/master ✦ New Selector Engine for jQuery ✦ 4KB Compressed ✦ No dependencies, can be used by other ✦ libraries (MochiKit, Prototype, Dojo, YUI)
  23. 23. How Does it Work? Query Restructuring ✦ “div p” ✦ Find all p elements ✦ For each p element ✦ check if parent is div ✦ if not, traverse up farther ✦ if at top, remove element ✦ if so, save element No merging! No unique! ✦
  24. 24. How Does it Work? Faster for some queries, slower for others ✦ Depends on the DOM structure ✦ “div > p” much faster, for example ✦ Built like how browsers query the DOM ✦
  25. 25. Live Events Behave like normal event binding ✦ ... but work for all future elements too! ✦ $(“a”).live(“click”, ...); ✦ $(“div”).append(“<a>test</a>”);
  26. 26. 1.3 Sniffing All major JS libraries use browser sniffing ✦ Look at the user agent and make guesses ✦ ✦ navigator.userAgent is bad! :-( We got rid of this in 1.3! ✦ Makes our code more resilient to change ✦
  27. 27. Detection Object Detection ✦ ✦ if ( document.getElementsByTagName ) Feature Simulation ✦ ✦ var div = document.createElement(“div”); div.innerHTML = “<!--test-->”; var a = div.getElementsByTagName(“*”); if ( a.length > 0 ) { // Why did we match a comment? }
  28. 28. jquery.com docs.jquery.com - plugins.jquery.com More: ui.jquery.com api.jquery.com learningjquery.com
  29. 29. Thank You! John Resig ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig/ ✦

×