Zero to Hero, a jQuery Primer

Presented to Auckland Web Meetup, 15 September 2011.

Transcript

1. 0 TO HERO SEPTEMBER 2011 A jQuery Primer
2. WHAT JavaScript framework Cross-browser compatible Lightweight (31KB) APIs for DOM, events, animation, Ajax
3. WHY Most popular Concise Well documented and maintained Extensible via plugins Easy for designers
4. HOW Either self-host or include from CDN <head> <script  src="http://code.jquery.com/ jquery-­‐1.6.3.min.js"></script> </head>
5. CORE The core is the jQuery() function, a standard JavaScript function To save space, it’s aliased to $() Revert with jQuery.noConflict()
6. SELECTION Given this HTML element <div  id="menu"></div> Select it with jQuery("#menu") or simply $("#menu")
7. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
8. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("h1")
9. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(":header")
10. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul")
11. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(".benefits")
12. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul  li")
13. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul  li:eq(1)")
14. SELECTION <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul  li:not(:first)")
15. Accepts CSS 2 & 3 selectors, such as $("article  >  section") $(".menu  li:last-­‐child") $("a[href^='http://']") $("table  tr:nth-­‐child(2n+1)  td") Uses cross-browser Sizzle engine SELECTION
16. And custom extensions, such as :visible,  :hidden,  :focus,  :disabled :eq(),  :lt(),  :gt(),  :even,  :odd :empty,  :not(),  :has(),  :contains() :input,  :checkbox,  :radio,  :file :header,  :text,  :image CUSTOM
17. DIY Or make your own selectors $.expr[":"].parked =  function(obj){…}; and apply them $(".blues:parked").each(…);
18. OBJECTS Using jQuery with objects $(document) $(window) Define the current context $(this)
19. OBJECTS For example $("div").hover(function()  { $(this).addClass("on"); },  function()  {…});
20. CORE Code is generally run when DOM is ready window.onload  =  function(){…} $(document).ready(function(){…}); Can be called repeatedly, and shortened to $(function(){…});
21. CORE jQuery deals in ‘collections’ of one or more objects, so $("ul  li") returns a collection of all matching elements
22. CORE Some JavaScript properties work with collections $("ul  li").length As well as array indices to isolate individual DOM nodes $("ul  li")[0]
23. TIP When assigning jQuery collections to variables, prefix with $ var  $myList  =  $("#mylist"); Useful reminder as to a variable’s type.
24. CORE jQuery uses JavaScript syntax for conditional statements, loops, etc. if  (this  >  that)  { $("nav").hide(); }  else  {…}
25. METHODS Now for the cool stuff. Call jQuery methods to manipulate objects, data and collections $("ul  li").slideDown() $("ul  li").addClass()
26. METHODS Attribute Methods .val(),  .attr(),  .prop() .addClass(),  .removeClass() .hasClass(),  .toggleClass() and more…
27. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
28. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").addClass("big")
29. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits  big"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").addClass("big")
30. METHODS CSS / Dimension Methods .css(),  .height(),  .width() .innerHeight(),  outerHeight() .innerWidth(),  .outerWidth() .offset(),  .position() and more…
31. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
32. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("h1").css("color",  "lime")
33. METHODS <h1  style="color:lime"> jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> … $("h1").css("color",  "lime")
34. METHODS Traversal Methods .each(),  .find(),  .filter() .children(),  .siblings(),  .end() .first(),  .last(),  .next(),  .prev() .parent(),  .andSelf(),  .closest() and more…
35. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
36. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(".benefits").prev()
37. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(".benefits").prev()
38. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("*").filter(":last-­‐child")
39. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("*").filter(":last-­‐child")
40. METHODS Manipulation Methods .after(),  .before() .clone(),  .detach(),  .remove() .append(),  .prepend(),  .text()   .html(),  .wrap(),  .unwrap() and more…
41. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
42. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").prepend("<li>First!</li>")
43. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>First!</li> <li>Popular</li> <li>Concise</li> … $("ul").prepend("<li>First!</li>")
44. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").insertBefore("h1")
45. METHODS <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> <h1>jQuery  Notes</h1> $("ul").insertBefore("h1")
46. METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("li").unwrap()
47. METHODS <h1>jQuery  Notes</h1> <li>Popular</li> <li>Concise</li> <li>Extensible</li> $("li").unwrap()
48. METHODS Effects Methods .hide(),  .show() .animate(),  .delay(),  .stop() .fadeIn(),  .fadeOut(),  .fadeToggle() .slideUp(),  .slideDown() and more…
49. METHODS Events Methods .click(),  .bind(),  .live() .focus(),  .blur(),  .hover() .mouseenter(),  .mouseleave()   .load(),  .resize(),  .scroll() and more…
50. METHODS Ajax Methods .load(),  .ajax() .get(),  .post(),  .param() .getJSON(),  .getScript()   .serialize(),  .serializeArray() and more…
51. METHODS if  (!document.ELEMENT_NODE)  {  document.ELEMENT_NODE  =  1;    document.ATTRIBUTE_NODE  =  2;  document.TEXT_NODE  =  3;   document.CDATA_SECTION_NODE  =  4;  document.ENTITY_REFERENCE_NODE  =  5;   document.ENTITY_NODE  =  6;  document.PROCESSING_INSTRUCTION_NODE  =  7;   document.COMMENT_NODE  =  8;  document.DOCUMENT_NODE  =  9;   document.DOCUMENT_TYPE_NODE  =  10;  document.DOCUMENT_FRAGMENT_NODE  =  11;   document.NOTATION_NODE  =  12;  }  document._importNode  =  function(node,   allChildren)  {  switch  (node.nodeType)  {  case  document.ELEMENT_NODE:  var   newNode  =  document.createElement(node.nodeName);  if  (node.attributes  &&   node.attributes.length  >  0)  for  (var  i  =  0;  il  =  node.attributes.length; i  <  il)  newNode.setAttribute(node.attributes[i].nodeName,   node.getAttribute(node.attributes[i++].nodeName)); if  (allChildren  &&  node.childNodes  &&  node.childNodes.length  >  0) for  (var  i  =  0;  il  =  node.childNodes.length;  i  <  il)   newNode.appendChild(document._importNode(node.childNodes[i++], allChildren));  return  newNode;  break;  case  document.TEXT_NODE: case  document.CDATA_SECTION_NODE:  case  document.COMMENT_NODE: return  document.createTextNode(node.nodeValue);  break;  }  }; www.alistapart.com/articles/crossbrowserscripting
52. METHODS $("div").load("index.html");
53. METHODS $("div").load("index.html  #main");
54. METHODS As well as methods for… Array handling Forms manipulation File parsing Feature detection and more…
55. CHAINING Most methods return the same jQuery collection, and can be chained in sequence $("div:hidden") .text("Error") .css("color","red") .fadeIn();
56. CHAINING If a method returns a new collection, return to the previous collection using end() $("div").find("a") .addClass("mute") .end() .find("b").hide();
57. CALLBACKS Some methods allow more code to be executed once they complete (a ‘callback’) $("div").animate( {top:  50}, function()  {…} );
58. DEMO Given the following markup <p>…</p> how might we show the user a success message above the text?
59. DEMO One solution var  message  =  "Page  saved";       $("<div>",  {class:  "msg"})       .text(message)       .insertBefore("p")       .hide().fadeIn();
60. DEMO Page saved Single-origin coffee viral aesthetic, jean shorts master cleanse tofu yr lo-fi chambray sartorial beard +1 retro photo booth. Pitchfork williamsburg beard vinyl wes anderson. Mlkshk brooklyn portland 3 wolf moon readymade iphone food truck. Austin lomo messenger bag, mcsweeney’s gentrify tattooed vegan fixie.
61. $("<div>",  {class:  "msg"}) .text(message) .insertBefore("p").hide() .css("opacity",  0) .slideDown(function()  { $(this).css("opacity",  1) .hide().fadeIn();  }); BETTER?
62. DEMO Page saved Single-origin coffee viral aesthetic, jean shorts master cleanse tofu yr lo-fi chambray sartorial beard +1 retro photo booth. Pitchfork williamsburg beard vinyl wes anderson. Mlkshk brooklyn portland 3 wolf moon readymade iphone food truck. Austin lomo messenger bag, mcsweeney’s gentrify tattooed vegan fixie.
63. PLUGINS Plugins allow you to extend the jQuery model to include new methods. Galleries, lightboxes Form validation, input masks Layout control Drag & drop, sliders, calendars, etc.
64. PLUGINS Creating your own plugin is easy $.fn.addIcon  =  function()  { return  this.prepend( $("<span>",  {class:  "icon"}) ); }
65. PLUGINS Creating your own plugin is easy $(":header").addIcon();
66. PLUGINS Last week from Paravel and Chris Coyier, a plugin for fluid-width video embeds…
67. WHERE jquery.com plugins.jquery.com jqapi.com code.google.com/apis/libraries/ fitvidsjs.com hipsteripsum.me
68. Matthew Buchanan / @mrb matthewbuchanan.name www.cactuslab.com .end()