Your SlideShare is downloading. ×
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Stackoverflow DevDays: jQuery Introduction for Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Stackoverflow DevDays: jQuery Introduction for Developers

6,641

Published on

Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).

Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).

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

No Downloads
Views
Total Views
6,641
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
282
Comments
0
Likes
8
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
  • know jquery?worked with jquery?
  • Quick overview of me
  • before we start, for those not already using jQuery, lets answer this question: why bother?if you aren"t using it yet, is anyone else?
  • Very significant when you consider how many javascript solutions there are out there
  • It simplifies…dealing – selecting and manipulating elementsevent handling, eg. do something on a click eventanimating – slides, fadesajax – server stuff in the background
  • Will add a class to each odd table row inside of each table in an html pagenot too complex, already nine lines of codelead in: using jQuery…
  • Exchange 9 lines of code for a single jQuery statementLets examine this in detail
  • (just read)
  • While other solutions certainly provide the first two aspectsThese other four really set jQuery apartGood enough? Lets get down to the details!
  • Call out DTD
  • Call out DTD
  • Call out wrapper set using jQuery function
  • Call out implicit iteration
  • Repetition is the faster way to learn
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Make sure we understand all the functionality the jquery function provides us
  • plugins add new methods to the jQuery objectadd a custom do-somethinghow does that work?
  • Transcript

    • 1. Introduction for Developers
    • 2. Survey
    • 3. Who Me?
      Jörn Zaefferer from Cologne
      Consultant for maxence integration technologies
      jQueryteam member
      jQuery UI lead developer
      Co-Author jQuery Cookbook, due this month
    • 4. Why bother?
    • 5. Who uses jQuery
      35% of all sites that use JavaScript, use jQuery
      1 out 5 sites, of all sites, use jQuery
      http://trends.builtwith.com/javascript/JQuery
    • 6. Who uses jQuery
      35% of all sites that use JavaScript, use jQuery
      1 out 5 sites, of all sites, use jQuery
      http://trends.builtwith.com/javascript/JQuery
    • 7. Who uses jQuery
      35% of all sites that use JavaScript, use jQuery
      1 out 5 sites, of all sites, use jQuery
      http://trends.builtwith.com/javascript/JQuery
    • 8. What exactly is jQuery
      jQuery is a JavaScript Library!
      Dealing with the DOM
      JavaScript Events
      Animations
      Ajax interactions
    • 9. What does that mean?
    • 10. It means no more of this
      var tables = document.getElementsByTagName("table");
      for (vart = 0; t<tables.length; t++) {
      var rows = tables[t].getElementsByTagName("tr");
      for (vari = 1; i<rows.length; i += 2) {
      if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
      rows[i].className+= " odd";
      }
      }
      };
      http://jsbin.com/esewu/edit
    • 11. Using jQuery we can do this
      jQuery("tabletr:nth-child(odd)").addClass("odd");
    • 12. Using jQuery we can do this
      jQuery("tabletr:nth-child(odd)").addClass("odd");
      jQuery function
    • 13. Using jQuery we can do this
      jQuery("tabletr:nth-child(odd)").addClass("odd");
      jQuery Selector (CSS expression)
      jQuery function
    • 14. Using jQuery we can do this
      jQuery("tabletr:nth-child(odd)").addClass("odd");
      jQuery Selector (CSS expression)
      jQuery function
      jQuery Wrapper Set
    • 15. Using jQuery we can do this
      jQuery("tabletr:nth-child(odd)").addClass("odd");
      jQuery Selector (CSS expression)
      jQuery function
      jQuery Method
      jQuery Wrapper Set
    • 16. It really is the “write less, do more” JavaScript Library!
    • 17. Why use jQuery
      Helps us to simplify and speed up web development
      Allows us to avoid common headaches associated with browser development
      Provides a large pool of plugins
      Large and active community
      Tested on 50 browsers, 11 platforms
      Its for both coders and designers
    • 18. Why use jQuery over other solutions
      Helps us to simplify and speed up web development
      Allows us to avoid common headaches associated with browser development
      Provides a large pool of plugins
      Large and active community
      Tested on 50 browsers, 11 platforms
      Its for both coders and designers
    • 19. Concept 1. Find something, do something
    • 20. Concept 1. Find something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ul>
      <li><a>home</a></li>
      <li><a>about</a></li>
      </ul>
      </body>
      </html>
    • 21. Concept 1. Find something, do something
      <!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>
    • 22. Concept 1. Find something, do something
      <!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>
    • 23. Concept 1. Find something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      <li><a>home</a></li>
      <li><a>about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("#nav li");
      </script>
      </body>
      </html>
    • 24. Concept 1. Find something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      <li class="navLiItem"><a>home</a></li>
      <li class="navLiItem"><a>about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("#nav li").addClass("navLiItem");
      </script>
      </body>
      </html>
    • 25. Concept 1. Find something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      <li><a>home</a></li>
      <li><a>about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("#nav a");
      </script>
      </body>
      </html>
    • 26. Concept 1. Find something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      <li><a href="/home">home</a></li>
      <li><a href="/about">about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("#nav a").each(function(){
      jQuery(this).attr("href", "/" + jQuery(this).text());
      });
      </script>
      </body>
      </html>
    • 27. Concept 2. Create something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      </ul>
      </body>
      </html>
    • 28. Concept 2. Create something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("<li>home</li>");
      jQuery("<li>about</li>");
      </script>
      </body>
      </html>
    • 29. Concept 2. Create something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("<li>home</li>").wrapInner("a");
      jQuery("<li>about</li>").wrapInner("a");
      </script>
      </body>
      </html>
    • 30. Concept 2. Create something, do something
      <!DOCTYPE html>
      <html>
      <body>
      <ulid="nav">
      <li><a>home</a></li>
      <li><a>about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("<li>home</li>").wrapInner("a").appendTo("#nav");
      jQuery("<li>about</li>").wrapInner("a").appendTo("#nav");
      </script>
      </body>
      </html>
    • 31. Concept 3. Chaining
      <!DOCTYPE html>
      <html>
      <body>
      <ul id="nav">
      <li class="navLiItem"><a href="/home">home</a></li>
      <li class="navLiItem"><a href="/about">about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("ul").attr("id","nav");
      jQuery("#nav li").addClass("navLiItem");
      jQuery("#nav a").each(function(){
      jQuery(this).attr("href", "/" + jQuery(this).text());
      });
      </script>
      </body>
      </html>
    • 32. Concept 3. Chaining
      <!DOCTYPE html>
      <html>
      <body>
      <ul id="nav">
      <li class="navLiItem"><a href="/home">home</a></li>
      <li class="navLiItem"><a href="/about">about</a></li>
      </ul>
      <script src="jquery.js"></script>
      <script>
      jQuery("ul").attr("id","nav")
      .find("li").addClass("navLiItem")
      .find("a").each(function(){
      jQuery(this).attr("href","/" + jQuery(this).text());
      });
      </script>
      </body>
      </html>
    • 33. Concept 4. jQuery parameter types
      CSS Selectors & custom CSS expressions jQuery("#nav") and jQuery(":first")
      HTML jQuery("<li><a href=“#”>link</a></li>")
      DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target)
      A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})
    • 34. Review
      Find something, do something
      Create something, do something
      Chaining
      jQuery parameter types
    • 35. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
    • 36. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery()
      each()
      map()
      size()
      length
      selector
      context
      index()
      get()
    • 37. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery()
      each()
      map()
      size()
      length
      selector
      context
      index()
      get()
    • 38. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html>
      <html>
      <body>
      <p>Gold</p>
      <p>Silver</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      alert(jQuery("p").map(function() {
      return $(this).text();
      }).get());
      </script>
      </body>
      </html>
      http://jsbin.com/orani/edit#html
    • 39. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
    • 40. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
    • 41. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
    • 42. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
      jQuery(":radio:enabled:checked")
    • 43. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
      jQuery(":radio:enabled:checked")
      jQuery("a[title]")
    • 44. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
      jQuery(":radio:enabled:checked")
      jQuery("a[title]")
      jQuery("a[title][href='foo']")
    • 45. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
      jQuery(":radio:enabled:checked")
      jQuery("a[title]")
      jQuery("a[title][href='foo']")
      jQuery("a:first[href*='foo']")
    • 46. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
      jQuery(":radio:enabled:checked")
      jQuery("a[title]")
      jQuery("a[title][href='foo']")
      jQuery("a:first[href*='foo']")
      jQuery("#header, #footer")
    • 47. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery("#nav li.contact")
      jQuery(":visible")
      jQuery(":radio:enabled:checked")
      jQuery("a[title]")
      jQuery("a[title][href='foo']")
      jQuery("a:first[href*='foo']")
      jQuery("#header, #footer")
      jQuery("#header, #footer").filter(":visible")
    • 48. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      attr()
      removeAttr()
      addClass()
      hasClass()
      toggleClass()removeClass()
      val()
    • 49. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      attr()
      removeAttr()
      addClass()
      hasClass()
      toggleClass()removeClass()
      val()
    • 50. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html><html><body>
      <input type="text" value="search" />
      <script src="jquery.js"></script>
      <script>
      $("input").focus(function(){
      var v = $(this).val();
      $(this).val( v == this.defaultValue? "" : v);
      }).blur(function(){
      var v = $(this).val();
      $(this).val( !v ? this.defaultValue : v);
      });
      </script></body></html>
      http://jsbin.com/irico/edit#html
      http://jsbin.com/ihale/edit#html
    • 51. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      add()
      children()
      closest()
      find()
      next()
      nextAll()
      prev()
      prevAll()
      siblings()
      parent()
      parents()
      andSelf()
      end()
      eq()
      filter()
      is()
      not()
      slice()
    • 52. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      add()
      children()
      closest()
      find()
      next()
      nextAll()
      prev()
      prevAll()
      siblings()
      parent()
      parents()
      andSelf()
      end()
      eq()
      filter()
      is()
      not()
      slice()
    • 53. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html>
      <html>
      <body>
      <h3>Quotes</h3>
      <div>
      <p>Now or never</p>
      <p>Because he could</p>
      </div>
      <script src="jquery.js"></script>
      <script>
      $("h3").click(function() {
      $(this).next().toggle();
      }).next().hide();
      </script>
      </body>
      </html>
      http://jsbin.com/uhole/edit#html
    • 54. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      html()
      text()
      append()
      appendTo()
      prepend()
      prependTo()
      after()
      insertAfter()
      before()
      insertBefore()
      wrap()
      wrapAll()
      wrapInner()
      replaceWith()
      replaceAll()
      empty()
      remove()
      clone()
    • 55. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      html()
      text()
      append()
      appendTo()
      prepend()
      prependTo()
      after()
      insertAfter()
      before()
      insertBefore()
      wrap()
      wrapAll()
      wrapInner()
      replaceWith()
      replaceAll()
      empty()
      remove()
      clone()
    • 56. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html>
      <html>
      <body>
      <p>Make me bold!</p>
      <script src="jquery.js"></script>
      <script>
      jQuery("p").wrapInner("<b></b>");
      </script>
      </body>
      </html>
      http://jsbin.com/esuwu/edit#html
    • 57. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      css()
      offset()
      offsetParent()
      postion()
      scrollTop()
      scrollLeft()
      height()
      width()
      innerHeight()
      innerWidth()
      outerHeight()
      outerWidth()
    • 58. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      css()
      offset()
      offsetParent()
      postion()
      scrollTop()
      scrollLeft()
      height()
      width()
      innerHeight()
      innerWidth()
      outerHeight()
      outerWidth()
    • 59. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html>
      <html>
      <head>
      <style>div{background-color:#ccc; width:100px; margin:0 20px; float:left;}</style>
      </head>
      <body>
      <div></div>
      <div></div>
      <div></div>
      <script src=“jquery.js" ></script>
      <script>
      jQuery("div").height(jQuery(document).height());
      </script>
      </body>
      </html>
      http://jsbin.com/iseti/edit#html
    • 60. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      blur()
      change()
      click()
      dbclick()
      error()
      focus()
      keydown()
      keypress()
      keyup()
      mousedown()
      mousenter()
      mouseleave()
      mouseout()
      mouseup()
      resize()
      scroll()
      select()
      submit()
      unload()
      ready()
      bind()
      one()
      trigger()
      triggerHandler()
      unbind()
      live()
      die()
      hover()
      toggle()
    • 61. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      blur()
      change()
      click()
      dbclick()
      error()
      focus()
      keydown()
      keypress()
      keyup()
      mousedown()
      mousenter()
      mouseleave()
      mouseout()
      mouseup()
      resize()
      scroll()
      select()
      submit()
      unload()
      ready()
      bind()
      one()
      trigger()
      triggerHandler()
      unbind()
      live()
      die()
      hover()
      toggle()
    • 62. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html>
      <html>
      <body>
      <p>click me</p>
      <p>click me</p>
      <script src="jquery.js"></script>
      <script>
      jQuery("p").bind("click", function(){
      $(this).after("<p>click me</p>");
      });
      </script>
      </body>
      </html>
      http://jsbin.com/ehuki/edit#html
    • 63. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html>
      <html>
      <body>
      <p>click me</p>
      <p>click me</p>
      <script src="jquery.js"></script>
      <script>
      jQuery("p").live("click", function(){
      $(this).after("<p>click me</p>");
      });
      </script>
      </body>
      </html>
      http://jsbin.com/epeha/edit#html
    • 64. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      show()
      hide()
      toggle()
      slideDown()
      slideUp()
      slideToggle()
      fadeIn()
      fadeOut()
      fadeTo()
      animate()
      stop()
    • 65. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      show()
      hide()
      toggle()
      slideDown()
      slideUp()
      slideToggle()
      fadeIn()
      fadeOut()
      fadeTo()
      animate()
      stop()
    • 66. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      var tooltip = $("<div/>")
      .addClass("tooltip")
      .appendTo("body");
      $("input").mouseover(function(event) {
      tooltip.text(this.title).css({
      left: event.pageX,
      top: event.pageY
      }).fadeIn();
      }).mouseout(function() {
      tooltip.fadeOut();
      });
      http://jsbin.com/enoco3/edit#html
    • 67. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      show()
      hide()
      toggle()
      slideDown()
      slideUp()
      slideToggle()
      fadeIn()
      fadeOut()
      fadeTo()
      animate()
      stop()
    • 68. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html><html><head>
      <style>
      div{background-color:#bca;width:100px;border:1px solid green;}
      </style>
      </head>
      <body>
      <div id="block">Hello!</div>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
      <script>
      jQuery("#block").animate({
      width: "70%",
      opacity: 0.4,
      }, 1500);
      </script></body></html>
      http://jsbin.com/ulexu/edit#html
    • 69. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery.ajaxSetup()
      serialize()
      serializeArray()
      jQuery.ajax()
      jQuery.get()
      jQuery.getJSON()
      jQuery,getScript()
      jQuery.post()
      load()
      ajaxComplete()
      ajaxError()
      ajaxSend()
      ajaxStart()
      ajaxStop()
      ajaxSuccess()
    • 70. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery.ajaxSetup()
      serialize()
      serializeArray()
      jQuery.ajax()
      jQuery.get()
      jQuery.getJSON()
      jQuery,getScript()
      jQuery.post()
      load()
      ajaxComplete()
      ajaxError()
      ajaxSend()
      ajaxStart()
      ajaxStop()
      ajaxSuccess()
    • 71. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      <!DOCTYPE html><html><body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
      <script>
      jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?",
      function(data){
      jQuery.each(data.items, function(i,item){
      jQuery("<img/>")
      .attr("src", item.media.m)
      .appendTo("body");
      if ( i == 30 ) return false;
      });
      });
      </script></body></html>
      http://jsbin.com/ivifa/edit#html
      http://jsbin.com/erase/edit#html
    • 72. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery.support
      jQuery.boxModel
      jQuery.each(),
      jQuery.extend(),
      jQuery.grep(),
      jQuery.makeArray(),
      jQuery.map(),
      jQuery.inArray(),
      jQuery.merge(),
      jQuery.unique()
      jQuery.isArray(),
      jQuery,isFunction()
      jQuery.trim()
      jQuery.param()
    • 73. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery.support
      jQuery.boxModel
      jQuery.each(),
      jQuery.extend(),
      jQuery.grep(),
      jQuery.makeArray(),
      jQuery.map(),
      jQuery.inArray(),
      jQuery.merge(),
      jQuery.unique()
      jQuery.isArray(),
      jQuery.isFunction()
      jQuery.trim()
      jQuery.param()
    • 74. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      // returns "hello"
      jQuery.trim(" hello ");
    • 75. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      jQuery.support
      jQuery.boxModel
      jQuery.each(),
      jQuery.extend(),
      jQuery.grep(),
      jQuery.makeArray(),
      jQuery.map(),
      jQuery.inArray(),
      jQuery.merge(),
      jQuery.unique()
      jQuery.isArray(),
      jQuery.isFunction()
      jQuery.trim()
      jQuery.param()
    • 76. Overview of jQuery API
      Core
      Selectors
      Attributes
      Traversing
      Manipulation
      CSS
      Events
      Effects
      Ajax
      Utilities
      // returns "name=John&url=ejohn.org"
      jQuery.param({ name: "John", url: "ejohn.org" });
    • 77. jQuery and $
      var jQuery = window.jQuery = window.$ = function() {}
    • 78. jQuery and $
      jQuery(document).ready(function($) {
      // ready code
      });
      or
      jQuery(function($) {
      // ready code
      });
    • 79. jQuery.noConflict()
    • 80. Plugins
    • 81. A jQueryplugin in 6 steps
      http://jsbin.com/asice/edit
    • 82. A jQueryplugin in 6 steps
      Step 1. create a private scope for $ alias
      <!DOCTYPE html><html><body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      })(jQuery);
      </script></body></html>
    • 83. A jQueryplugin in 6 steps
      Step 2. attach plugin to fn alias (aka prototype)
      <!DOCTYPE html><html><body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      $(this).text($(this).text().replace(/hate/g,"love"));
      };
      })(jQuery);
      </script></body></html>
    • 84. A jQueryplugin in 6 steps
      Step 2. attach plugin to fn alias (aka prototype)
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      $(this).text($(this).text().replace(/hate/g,"love"));
      };
      })(jQuery);
      jQuery("p").loveNotHate();
      </script></body></html>
    • 85. A jQueryplugin in 6 steps
      Step 3. add implicit iteration
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      this.each(function(){
      $(this).text($(this).text().replace(/hate/g,"love"));
      });
      };
      })(jQuery);
      jQuery("p").loveNotHate();
      </script></body></html>
    • 86. A jQueryplugin in 6 steps
      Step 3. add implicit iteration
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      this.each(function(){
      $(this).text($(this).text().replace(/hate/g,"love"));
      });
      };
      })(jQuery);
      jQuery("p").loveNotHate();
      </script></body></html>
    • 87. A jQueryplugin in 6 steps
      Step 4. enable chaining
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,"love"));
      });
      };
      })(jQuery);
      jQuery("p").loveNotHate();
      </script></body></html>
    • 88. A jQueryplugin in 6 steps
      Step 4. enable chaining
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,"love"));
      });
      };
      })(jQuery);
      jQuery("p").loveNotHate().hide();
      </script></body></html>
    • 89. A jQueryplugin in 6 steps
      Step 5. add default options
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
      });
      };
      $.fn.loveNotHate.defaults = {text:"love"};
      })(jQuery);
      jQuery("p").loveNotHate();
      </script></body></html>
    • 90. A jQueryplugin in 6 steps
      Step 6. add custom options
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate = function(){
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
      });
      };
      $.fn.loveNotHate.defaults = {text:"love"};
      })(jQuery);
      jQuery("p").loveNotHate({text:"love-love-love"});
      </script></body></html>
    • 91. A jQueryplugin in 6 steps
      Step 6. add custom options
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate= function(options){
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
      });
      };
      $.fn.loveNotHate.defaults = {text:"love"};
      })(jQuery);
      jQuery("p").loveNotHate({text:"love-love-love"});
      </script></body></html>
    • 92. A jQueryplugin in 6 steps
      Step 6. add custom options
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate= function(options){
      options = $.extend({},$.fn.loveNotHate.defaults, options);
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
      });
      };
      $.fn.loveNotHate.defaults = {text:"love"};
      })(jQuery);
      jQuery("p").loveNotHate({text:"love-love-love"});
      </script></body></html>
    • 93. A jQueryplugin in 6 steps
      Step 6. add custom options
      <!DOCTYPE html><html><body>
      <p>I hate jQuery!</p>
      <p>I mean really hate jQuery!</p>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script>
      (function($){
      $.fn.loveNotHate= function(options){
      options = $.extend({},$.fn.loveNotHate.defaults, options);
      return this.each(function(){
      $(this).text($(this).text().replace(/hate/g,options.text));
      });
      };
      $.fn.loveNotHate.defaults = {text:"love"};
      })(jQuery);
      jQuery("p").loveNotHate({text:"love-love-love"});
      </script></body></html>
    • 94. Pluginsare simple,just follow the steps!
    • 95. jQuery News
      Moving towards a Conservancy (Software Freedom Law Center) owning the code
      Tax-deductible donations
      Four conferences next year (Boston, San Francisco, London, and online)
      jQuery.org project site
      T-shirts
      jQueryForum moving away from Google Groups
      Revamp of the plugin site
    • 96. ?
    • 97. Thank you!

    ×