Zero to Hero, a jQuery Primer

0 TO HERO SEPTEMBER 2011 A jQuery Primer

WHAT JavaScript framework Cross-browser compatible Lightweight (31KB) APIs for DOM,
events, animation, Ajax

WHY Most popular Concise Well 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>

CORE The 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")

li:eq(1)")

li:not(:first)")

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

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

DIY Or make your own selectors $.expr[":"].parked = function(obj){…}; and
apply them $(".blues:parked").each(…);

OBJECTS Using jQuery with objects $(document) $(window) Deﬁne the current
context $(this)

OBJECTS For example $("div").hover(function() { $(this).addClass("on"); }, function() {…});

CORE Code is generally run when DOM is ready window.onload
= function(){…} $(document).ready(function(){…}); Can be called repeatedly, and shortened to $(function(){…});

CORE jQuery 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").length As
well as array indices to isolate individual DOM nodes $("ul li")[0]

TIP When assigning jQuery collections to variables, preﬁx with $
var $myList = $("#mylist"); Useful reminder as to a variable’s type.

CORE jQuery uses JavaScript syntax for conditional 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");

METHODS As well as methods for… Array handling Forms manipulation
File parsing Feature detection and more…

CHAINING Most methods return the same jQuery collection, and can
be chained in sequence $("div:hidden") .text("Error") .css("color","red") .fadeIn();

CHAINING If 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 be executed once
they complete (a ‘callback’) $("div").animate( {top: 50}, function() {…} );

DEMO Given the following markup <p>…</p> how might we show
the user a success message above the text?

DEMO One solution var message = "Page saved";
$("<div>", {class: "msg"}) .text(message) .insertBefore("p") .hide().fadeIn();

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.

$("<div>", {class: "msg"}) .text(message) .insertBefore("p").hide() .css("opacity", 0) .slideDown(function() { $(this).css("opacity",
1) .hide().fadeIn(); }); BETTER?

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.

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.

PLUGINS Creating your own plugin is easy $.fn.addIcon = function()
{ return this.prepend( $("<span>", {class: "icon"}) ); }

PLUGINS Creating your own plugin is easy $(":header").addIcon();

PLUGINS Last week from Paravel and Chris Coyier, a plugin
for ﬂuid-width video embeds…

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

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

Zero to Hero, a jQuery Primer

Zero to Hero, a jQuery Primer

More Decks by Matthew Buchanan

Other Decks in Programming

Featured

Transcript