Richard D. Worth, jQuery Team
http://twitter.com/rworth
Open Source (MIT, GPL)

              JavaScript Library


Richard D. Worth
History
           January 2006
                   BarCampNYC

                   John Resig, Author
                   Mo...
Minimal

         Lightweight (19kb)

         Unobtrusive

Richard D. Worth
Browser Compatible

       IE6+               FF2+
               Chrome
       Safari 3+     Opera 9+

Richard D. Worth
Who’s Using jQuery
   reddit.com     microsoft.com    overstock.com
    espn.com       amazon.com         time.com
    ibm...
Who’s Using jQuery
   reddit.com
      ddit.c       microsoft.com
                      c          overstock.com
    espn....
Changes the way
                 you write
                 JavaScript

Richard D. Worth
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
    var rows = tables[t].ge...
jQuery('table tr:nth-child(odd)')
                   .addClass('odd');




Richard D. Worth
jQuery $ Alias


               $ == jQuery

Richard D. Worth
jQuery Pattern

         Find Things
                            Do Stuff


Richard D. Worth
jQuery Pattern

     $( Find Things )
                           . Do Stuff ();


Richard D. Worth
$("div").hide();
      $("button").remove();
      $("form").submit();
      $("p").addClass("special");
      $("span").s...
<!DOCTYPE html><html><body>
<ul>
  <li><a>home</a></li>
  <li><a>about</a></li>
</ul>
</body></html>




 Richard D. Worth
<!DOCTYPE html><html><body>
<ul>
  <li><a>home</a></li>
  <li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
</...
<!DOCTYPE html><html><body>
<ul>
  <li><a>home</a></li>
  <li><a>about</a></li>
</ul>
<script src="jquery.js"></script><sc...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li><a>home</a></li>
  <li><a>about</a></li>
</ul>
<script src="jquery.js"></s...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li><a>home</a></li>
  <li><a>about</a></li>
</ul>
<script src="jquery.js"></s...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a>home</a></li>
  <li class="item"><a>about</a></li>
</ul>
<...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a>home</a></li>
  <li class="item"><a>about</a></li>
</ul>
<...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a>home</a></li>
  <li class="item"><a>about</a></li>
</ul>
<...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a>home</a></li>
  <li class="item"><a>about</a></li>
</ul>
<...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a href="/home">home</a></li>
  <li class="item"><a href="/ab...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a href="/home">home</a></li>
  <li class="item"><a href="/ab...
<!DOCTYPE html><html><body>
<ul id="nav">
  <li class="item"><a href="/home">home</a></li>
  <li class="item"><a href="/ab...
jQuery Object
    Collection of DOM Elements
    Array-like
    Holds the methods

Richard D. Worth
Selectors
    CSS 1-3 (better than most browsers)
    Basic XPath via a plugin
    Custom jQuery selectors

Richard D. Wor...
$("div#nav")
      $("form > table")
      $("tr:even")
      $("a strong")
      $("a[href^=https://]")

Richard D. Worth
$(":hidden")
      $("ul:visible")
      $(":disabled")
      $("td:first *")
      $("fieldset:has(button)")

Richard D. Wo...
Method Calls
    Safe (0, 1, more elements)
    No need for loop
    Some operate on first element

Richard D. Worth
Chaining
         $("p").addClass("special")
               .css("color", "red")
               .append("hello")
         ...
Chaining
    Some methods modify chain
    .end() to get back to previous
    Most methods are chainable

Richard D. Worth
jQuery API
    Concise, Natural, Consistent
    Logical, Almost Guessable
    Easy to read, understand, remember

Richard ...
jQuery’s Focus

       DOM Manip.               Events

       Ajax                  Animation


Richard D. Worth
DOM Traversing
     .next() .prev()
     .find() .children()
     .parent() .parents()
     .filter()

Richard D. Worth
Attributes
     .text() .html()
     .attr() .removeAttr()
     .remove() // returns element
     .css()

Richard D. Worth
CSS / Styles
     .css(key, value)
     .css({key: value, key: value})
     .addClass() .removeClass()
     .toggleClass()...
DOM Construction
     .append() .prepend()
     .before() .after()
     .insertBefore() .insertAfter()
     $("<div>New El...
Overloaded
     $(selector)
     $(HTML)
     $(DOMElement)
     $(function) // DOM Ready

Richard D. Worth
Optional Context


            $(selector, context)



Richard D. Worth
Events
  .click(fn) .click()
  .toggle(fn, fn) .toggle()
  .click(fn) -> .bind("click", fn)
  .click() -> .trigger("click"...
Event Handler/Callback
    Callback gets context (this)
    ‘this’ is always a DOMElement
    First parameter is Event obj...
Ajax

  .load(url)
  .load(url + " " + selector)


Richard D. Worth
Ajax
  $.get()
  $.post()
  $.getJSON()
  $.getScript()

Richard D. Worth
Ajax Events
  $.ajaxSend()
  $.ajaxStart() $.ajaxStop()
  $.ajaxError() $.ajaxSuccess()
  $.ajaxComplete()

Richard D. Wor...
Animations
.show() .hide() .toggle()
.fadeIn() .fadeOut() .fadeTo()
.animate() .stop() .queue()
.slideUp() .slideDown() .s...
Plugins Keep
                   The Core Lean


Richard D. Worth
Writing a jQuery
                    Plugin


Richard D. Worth
Extending the
                   Selector Engine


Richard D. Worth
Custom Events



Richard D. Worth
.data()



Richard D. Worth
Q&A



Richard D. Worth
Books
          Learning jQuery (Packt)
          Karl Swedberg, Jonathan Chaffer


          jQuery in Action (Manning)
  ...
Upcoming SlideShare
Loading in...5
×

jQuery Stack Overflow DevDays DC 2009

3,882

Published on

jQuery is one of the most popular and easy to use JavaScript frameworks. jQuery is an open source library that simplifies DOM manipulation, event handling, Ajax, and animation. The jQuery core is lean and light, while having the power and extensibility to support a rich plugin ecosystem. It also sports a concise and elegant API that is a joy to behold and use.

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,882
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
90
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

jQuery Stack Overflow DevDays DC 2009

  1. 1. Richard D. Worth, jQuery Team http://twitter.com/rworth
  2. 2. Open Source (MIT, GPL) JavaScript Library Richard D. Worth
  3. 3. History January 2006 BarCampNYC John Resig, Author Mozilla, JavaScript Evangelist http://ejohn.org/ Richard D. Worth
  4. 4. Minimal Lightweight (19kb) Unobtrusive Richard D. Worth
  5. 5. Browser Compatible IE6+ FF2+ Chrome Safari 3+ Opera 9+ Richard D. Worth
  6. 6. Who’s Using jQuery reddit.com microsoft.com overstock.com espn.com amazon.com time.com ibm.com netflix.com capitalone.com boxee.tv stackoverflow.com wordpress.com bit.ly bing.com dell.com twitpic.com monster.com twitter.com whitehouse.gov tv.com w3.org Richard D. Worth
  7. 7. Who’s Using jQuery reddit.com ddit.c microsoft.com c overstock.com espn.com n.com am amazon.com time.com i ibm.com m netflix.com capitalone.com boxe oxee.tv stackoverflow.com wordpress.com bit.ly bi bing.com dell.com twitpic.com monster.com twitter.com whitehouse.gov tv.com w3.org Richard D. Worth
  8. 8. Changes the way you write JavaScript Richard D. Worth
  9. 9. var tables = document.getElementsByTagName('table'); for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName('tr'); for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ' odd'; } } } Richard D. Worth
  10. 10. jQuery('table tr:nth-child(odd)') .addClass('odd'); Richard D. Worth
  11. 11. jQuery $ Alias $ == jQuery Richard D. Worth
  12. 12. jQuery Pattern Find Things Do Stuff Richard D. Worth
  13. 13. jQuery Pattern $( Find Things ) . Do Stuff (); Richard D. Worth
  14. 14. $("div").hide(); $("button").remove(); $("form").submit(); $("p").addClass("special"); $("span").show("fast"); Richard D. Worth
  15. 15. <!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body></html> Richard D. Worth
  16. 16. <!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> </body></html> Richard D. Worth
  17. 17. <!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul'); </script> </body></html> Richard D. Worth
  18. 18. <!DOCTYPE html><html><body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); </script> </body></html> Richard D. Worth
  19. 19. <!DOCTYPE html><html><body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li'); </script> </body></html> Richard D. Worth
  20. 20. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); </script> </body></html> Richard D. Worth
  21. 21. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a'); </script> </body></html> Richard D. Worth
  22. 22. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a').each(function(){ jQuery(this); }); </script> </body></html> Richard D. Worth
  23. 23. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a').each(function(){ jQuery(this); }); </script> </body></html> Richard D. Worth
  24. 24. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a').each(function(){ jQuery(this).attr('href', '/' + jQuery(this).text()); }); </script> </body></html> Richard D. Worth
  25. 25. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script><script> $('ul').attr('id', 'nav'); $('#nav li').addClass('item'); $('#nav a').each(function(){ $(this).attr('href', '/' + $(this).text()); }); </script> </body></html> Richard D. Worth
  26. 26. <!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script><script> $('ul').attr('id', 'nav'); $('#nav li').addClass('item').find('a').each(function(){ $(this).attr('href', '/' + $(this).text()); }); </script> </body></html> Richard D. Worth
  27. 27. jQuery Object Collection of DOM Elements Array-like Holds the methods Richard D. Worth
  28. 28. Selectors CSS 1-3 (better than most browsers) Basic XPath via a plugin Custom jQuery selectors Richard D. Worth
  29. 29. $("div#nav") $("form > table") $("tr:even") $("a strong") $("a[href^=https://]") Richard D. Worth
  30. 30. $(":hidden") $("ul:visible") $(":disabled") $("td:first *") $("fieldset:has(button)") Richard D. Worth
  31. 31. Method Calls Safe (0, 1, more elements) No need for loop Some operate on first element Richard D. Worth
  32. 32. Chaining $("p").addClass("special") .css("color", "red") .append("hello") .show("slow"); Richard D. Worth
  33. 33. Chaining Some methods modify chain .end() to get back to previous Most methods are chainable Richard D. Worth
  34. 34. jQuery API Concise, Natural, Consistent Logical, Almost Guessable Easy to read, understand, remember Richard D. Worth
  35. 35. jQuery’s Focus DOM Manip. Events Ajax Animation Richard D. Worth
  36. 36. DOM Traversing .next() .prev() .find() .children() .parent() .parents() .filter() Richard D. Worth
  37. 37. Attributes .text() .html() .attr() .removeAttr() .remove() // returns element .css() Richard D. Worth
  38. 38. CSS / Styles .css(key, value) .css({key: value, key: value}) .addClass() .removeClass() .toggleClass() Richard D. Worth
  39. 39. DOM Construction .append() .prepend() .before() .after() .insertBefore() .insertAfter() $("<div>New Element</div>") Richard D. Worth
  40. 40. Overloaded $(selector) $(HTML) $(DOMElement) $(function) // DOM Ready Richard D. Worth
  41. 41. Optional Context $(selector, context) Richard D. Worth
  42. 42. Events .click(fn) .click() .toggle(fn, fn) .toggle() .click(fn) -> .bind("click", fn) .click() -> .trigger("click") Richard D. Worth
  43. 43. Event Handler/Callback Callback gets context (this) ‘this’ is always a DOMElement First parameter is Event object Richard D. Worth
  44. 44. Ajax .load(url) .load(url + " " + selector) Richard D. Worth
  45. 45. Ajax $.get() $.post() $.getJSON() $.getScript() Richard D. Worth
  46. 46. Ajax Events $.ajaxSend() $.ajaxStart() $.ajaxStop() $.ajaxError() $.ajaxSuccess() $.ajaxComplete() Richard D. Worth
  47. 47. Animations .show() .hide() .toggle() .fadeIn() .fadeOut() .fadeTo() .animate() .stop() .queue() .slideUp() .slideDown() .slideToggle() Richard D. Worth
  48. 48. Plugins Keep The Core Lean Richard D. Worth
  49. 49. Writing a jQuery Plugin Richard D. Worth
  50. 50. Extending the Selector Engine Richard D. Worth
  51. 51. Custom Events Richard D. Worth
  52. 52. .data() Richard D. Worth
  53. 53. Q&A Richard D. Worth
  54. 54. Books Learning jQuery (Packt) Karl Swedberg, Jonathan Chaffer jQuery in Action (Manning) Bear Bibeault, Yehuda Katz Richard D. Worth
  1. A particular slide catching your eye?

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

×