Zero to Hero, a jQuery Primer

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)Deﬁne 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, preﬁx 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 stuﬀ.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>$("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>$(".benefits").prev()

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>$("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 Eﬀects 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 ﬂuid-width video embeds…

WHERE jquery.com plugins.jquery.com jqapi.comcode.google.com/apis/libraries/ ﬁtvidsjs.com hipsteripsum.me

.end()Matthew Buchanan / @mrb matthewbuchanan.name www.cactuslab.com

Zero to Hero, a jQuery Primer

by Matthew Buchanan

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Zero to Hero, a jQuery Primer Presentation Transcript