• Save
Zero to Hero, a jQuery Primer
Upcoming SlideShare
Loading in...5
×
 

Zero to Hero, a jQuery Primer

on

  • 3,361 views

Slides from my presentation to the Auckland Web Meetup on 15 September 2011. The interactive demos haven’t translated well to PDF. (Downloading disabled to comply with typeface EULA, but I can email ...

Slides from my presentation to the Auckland Web Meetup on 15 September 2011. The interactive demos haven’t translated well to PDF. (Downloading disabled to comply with typeface EULA, but I can email you a copy if you drop me a line.)

Statistics

Views

Total Views
3,361
Views on SlideShare
3,356
Embed Views
5

Actions

Likes
3
Downloads
0
Comments
1

2 Embeds 5

http://localhost 3
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi, The presentation is very nice and it will be very useful for me. Can I have a copy of this presentation please..My advance thanks for your efforts..My
    email:sennamohan@gmail.com

    Regards
    Mohan
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Zero to Hero, a jQuery Primer Zero to Hero, a jQuery Primer Presentation Transcript

  • 0TO HERO A jQuery Primer SEPTEMBER 2011
  • WHAT JavaScript framework Cross-browser compatible Lightweight (31KB)APIs for DOM, events, animation, Ajax
  • WHY Most popular ConciseWell documented and maintained Extensible via plugins Easy for designers
  • HOW Either self-host or include from CDN<head><script  src="http://code.jquery.com/ jquery-­‐1.6.3.min.js"></script></head>
  • COREThe core is the jQuery() function, a standard JavaScript function To save space, it’s aliased to $()Revert with jQuery.noConflict()
  • SELECTION Given this HTML element <div  id="menu"></div>Select it with jQuery("#menu") or simply $("#menu")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $("h1")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $(":header")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $("ul")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $(".benefits")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $("ul  li")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $("ul  li:eq(1)")
  • SELECTION<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>$("ul  li:not(:first)")
  • SELECTIONAccepts 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
  • CUSTOM 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
  • DIY Or make your own selectors $.expr[":"].parked =  function(obj){…}; and apply them$(".blues:parked").each(…);
  • OBJECTSUsing jQuery with objects $(document) $(window)Define the current context $(this)
  • OBJECTS For example$("div").hover(function()  { $(this).addClass("on");},  function()  {…});
  • CORECode is generally run when DOM is ready window.onload  =  function(){…} $(document).ready(function(){…});Can be called repeatedly, and shortened to $(function(){…});
  • COREjQuery deals in ‘collections’ of one or more objects, so $("ul  li") returns a collection of all matching elements
  • CORE Some JavaScript properties work with collections $("ul  li").lengthAs well as array indices to isolate individual DOM nodes $("ul  li")[0]
  • TIPWhen assigning jQuery collections to variables, prefix with $var  $myList  =  $("#mylist"); Useful reminder as to a variable’s type.
  • COREjQuery uses JavaScript syntax forconditional statements, loops, etc. if  (this  >  that)  { $("nav").hide(); }  else  {…}
  • METHODS Now for the cool stuff.Call jQuery methods to manipulate objects, data and collections $("ul  li").slideDown() $("ul  li").addClass()
  • METHODS Attribute Methods .val(),  .attr(),  .prop().addClass(),  .removeClass().hasClass(),  .toggleClass() and more…
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>$("ul").addClass("big")
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits  big"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>$("ul").addClass("big")
  • METHODS CSS / Dimension Methods .css(),  .height(),  .width().innerHeight(),  outerHeight().innerWidth(),  .outerWidth() .offset(),  .position() and more…
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>
  • METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>$("h1").css("color",  "lime")
  • METHODS <h1  style="color:lime"> jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> …$("h1").css("color",  "lime")
  • METHODS Traversal Methods .each(),  .find(),  .filter() .children(),  .siblings(),  .end().first(),  .last(),  .next(),  .prev() .parent(),  .andSelf(),  .closest() and more…
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>$(".benefits").prev()
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>$(".benefits").prev()
  • METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>$("*").filter(":last-­‐child")
  • METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>$("*").filter(":last-­‐child")
  • METHODS Manipulation Methods .after(),  .before().clone(),  .detach(),  .remove().append(),  .prepend(),  .text()   .html(),  .wrap(),  .unwrap() and more…
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul>
  • METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>$("ul").prepend("<li>First!</li>")
  • METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>First!</li> <li>Popular</li> <li>Concise</li> …$("ul").prepend("<li>First!</li>")
  • METHODS <h1>jQuery  Notes</h1> <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>$("ul").insertBefore("h1")
  • METHODS <ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> <h1>jQuery  Notes</h1>$("ul").insertBefore("h1")
  • METHODS<h1>jQuery  Notes</h1><ul  class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li></ul> $("li").unwrap()
  • METHODS<h1>jQuery  Notes</h1><li>Popular</li><li>Concise</li><li>Extensible</li> $("li").unwrap()
  • METHODS Effects Methods .hide(),  .show() .animate(),  .delay(),  .stop().fadeIn(),  .fadeOut(),  .fadeToggle() .slideUp(),  .slideDown() and more…
  • METHODS Events Methods .click(),  .bind(),  .live() .focus(),  .blur(),  .hover().mouseenter(),  .mouseleave()  .load(),  .resize(),  .scroll() and more…
  • METHODS Ajax Methods .load(),  .ajax() .get(),  .post(),  .param() .getJSON(),  .getScript()  .serialize(),  .serializeArray() and more…
  • 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
  • METHODS$("div").load("index.html");
  • METHODS$("div").load("index.html  #main");
  • METHODSAs well as methods for… Array handling Forms manipulation File parsing Feature detection and more…
  • CHAINING Most methods return the same jQuerycollection, and can be chained in sequence $("div:hidden") .text("Error") .css("color","red") .fadeIn();
  • CHAININGIf a method returns a new collection, return to the previous collection using end() $("div").find("a") .addClass("mute") .end() .find("b").hide();
  • CALLBACKS Some methods allow more code to beexecuted once they complete (a ‘callback’) $("div").animate( {top:  50}, function()  {…} );
  • DEMO Given the following markup <p>…</p> how might we show the user asuccess message above the text?
  • DEMO One solution var  message  =  "Page  saved";       $("<div>",  {class:  "msg"})       .text(message)       .insertBefore("p")       .hide().fadeIn();
  • DEMOSingle-origin coffee viral aesthetic, jean shorts master Page savedcleanse tofu yr lo-fi chambray sartorial beard +1 retrophoto booth. Pitchfork williamsburg beard vinyl wesanderson. Mlkshk brooklyn portland 3 wolf moonreadymade iphone food truck. Austin lomo messengerbag, mcsweeney’s gentrify tattooed vegan fixie.
  • BETTER?$("<div>",  {class:  "msg"}) .text(message) .insertBefore("p").hide() .css("opacity",  0) .slideDown(function()  { $(this).css("opacity",  1) .hide().fadeIn();  });
  • DEMOSingle-origin coffee viral aesthetic, jean shorts master Page savedcleanse tofu yr lo-fi chambray sartorial beard +1 retrophoto booth. Pitchfork williamsburg beard vinyl wesanderson. Mlkshk brooklyn portland 3 wolf moonreadymade iphone food truck. Austin lomo messengerbag, mcsweeney’s gentrify tattooed vegan fixie.
  • PLUGINSPlugins allow you to extend the jQuery model to include new methods. Galleries, lightboxes Form validation, input masks Layout control Drag & drop, sliders, calendars, etc.
  • PLUGINS Creating your own plugin is easy$.fn.addIcon  =  function()  { return  this.prepend( $("<span>",  {class:  "icon"}) );}
  • PLUGINSCreating your own plugin is easy $(":header").addIcon();
  • PLUGINSLast week from Paravel and Chris Coyier, a plugin for fluid-width video embeds…
  • WHERE jquery.com plugins.jquery.com jqapi.comcode.google.com/apis/libraries/ fitvidsjs.com hipsteripsum.me
  • .end()Matthew Buchanan / @mrb matthewbuchanan.name www.cactuslab.com