Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learning jQuery @ MIT

5,009 views

Published on

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

Published in: Technology

  • 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

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/ ✦

×