• Like
Learning jQuery @ MIT
Upcoming SlideShare
Loading in...5
×

Learning jQuery @ MIT

  • 4,377 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here

  • km,m,

    <b>[Comment posted from</b> http://www.sliversofmysoul.netsons.org/2009/02/23/alcune-presentazioni-utili-su-jquery/]
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,377
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
264
Comments
1
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MIT - January 2009 John Resig http://ejohn.org - http://twitter.com/jeresig
  • 2. What is jQuery? An open source JavaScript library that ✦ simplifies the interaction between HTML and JavaScript.
  • 3. Easy To Use Completely unobtrusive ✦ Uses CSS to layer functionality ✦ Easy to separate behavior ✦ Quick, terse, syntax ✦
  • 4. The Focus of jQuery Find Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
  • 5. Selectors
  • 6. Todo List
  • 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. Plugins Huge plugin ecosystem ✦ Managed by Plugin tracker ✦ http://plugins.jquery.com/ Hundreds in the tracker - even more on ✦ the web
  • 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. 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. Accessibility Keyboard Accessible ✦ Screenreader Accessible ✦ Grant from Mozilla Foundation to ✦ implement ARIA
  • 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. 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. 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. Community Very active mailing list ✦ ✦ 150+ Posts/Day ✦ 12700+ Members Technorati: Hundred blog posts per day ✦
  • 16. Growth
  • 17. Books 3 Books Released: ✦ ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt) ✦ jQuery in Action (Manning)
  • 18. jQuery 1.3 Released on the 14th ✦ 1.3.1 was released on the 21st ✦ Much faster, new live events ✦
  • 19. 1.3 Selectors
  • 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. 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. 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. 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. 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. Live Events Behave like normal event binding ✦ ... but work for all future elements too! ✦ $(“a”).live(“click”, ...); ✦ $(“div”).append(“<a>test</a>”);
  • 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. 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. jquery.com docs.jquery.com - plugins.jquery.com More: ui.jquery.com api.jquery.com learningjquery.com
  • 29. Thank You! John Resig ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig/ ✦