0
MIT - January 2009
                 John Resig
http://ejohn.org - http://twitter.com/jeresig
What is jQuery?
    An open source JavaScript library that
✦
    simplifies the interaction between HTML
    and JavaScript.
Easy To Use
    Completely unobtrusive
✦

    Uses CSS to layer functionality
✦

    Easy to separate behavior
✦

    Quic...
The Focus of jQuery

Find Some Elements Do something with them
    {


                         {
   $(“div”).addClass(“sp...
Selectors
Todo List
Todo List
    All items saved in a session variable.
✦

    ?item=Some+Item
✦
    Save a single item.
    ?items=<li>item<...
Plugins
    Huge plugin ecosystem
✦

    Managed by Plugin tracker
✦
    http://plugins.jquery.com/
    Hundreds in the tr...
jQuery Plugins
    Extend the jQuery system
✦

    Add on extra methods:
✦
    jQuery(“div”).hideRemove();
    Trivial to ...
jQuery UI
    A complete set of themed, cross-browser,
✦
    user interface components (plugins!).
    Drag, Drop, Sort, S...
Accessibility
    Keyboard Accessible
✦

    Screenreader Accessible
✦

    Grant from Mozilla Foundation to
✦
    impleme...
Themeroller
    Customize the styling of any jQuery UI
✦
    component
    Full CSS, images for all components
✦

    Easy...
Why jQuery?
    Fully documented
✦

    Great community
✦

    Tons of plugins
✦

    Small size (18kb)
✦

    Everything ...
Who uses jQuery?
    Projects:
✦
    ✦ Wordpress, Drupal, CakePHP,
      Textpattern, Mozilla
    Companies:
✦
    ✦ Googl...
Community
    Very active mailing list
✦
    ✦ 150+ Posts/Day
    ✦ 12700+ Members

    Technorati: Hundred blog posts per...
Growth
Books
    3 Books Released:
✦
    ✦ Learning jQuery (Packt)
    ✦ jQuery Reference (Packt)
    ✦ jQuery in Action (Manning)
jQuery 1.3
    Released on the 14th
✦

    1.3.1 was released on the 21st
✦

    Much faster, new live events
✦
1.3 Selectors
How It Works
    How most engines work
✦

    “div > p”
✦

    Find all divs
✦
    Loop through each div
    ✦ Find all ch...
How It Works
    “div p”
✦

    Find all divs
✦
    Loop through all divs
    ✦ Find all p, relative to the div

    Merge...
Code name “Sizzle”
    http://github.com/jeresig/sizzle/tree/master
✦

    New Selector Engine for jQuery
✦

    4KB Compr...
How Does it Work?
    Query Restructuring
✦

    “div p”
✦

    Find all p elements
✦
    For each p element
    ✦ check i...
How Does it Work?
    Faster for some queries, slower for others
✦

    Depends on the DOM structure
✦

    “div > p” much...
Live Events
    Behave like normal event binding
✦

    ... but work for all future elements too!
✦

    $(“a”).live(“clic...
1.3 Sniffing
    All major JS libraries use browser sniffing
✦

    Look at the user agent and make guesses
✦
    ✦ navigator....
Detection
    Object Detection
✦
    ✦ if ( document.getElementsByTagName )

    Feature Simulation
✦
    ✦ var div = docu...
jquery.com
docs.jquery.com - plugins.jquery.com
               More:
           ui.jquery.com
          api.jquery.com
   ...
Thank You!
    John Resig
✦

    http://ejohn.org/
✦

    http://twitter.com/jeresig/
✦
Learning jQuery @ MIT
Learning jQuery @ MIT
Upcoming SlideShare
Loading in...5
×

Learning jQuery @ MIT

4,515

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,515
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
264
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "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/ ✦
  1. A particular slide catching your eye?

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

×