Zero to Hero, a jQuery Primer

0
TO HERO
A jQuery Primer
SEPTEMBER 2011

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

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("h1")

SELECTION

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$(":header")

SELECTION

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul")

SELECTION

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$(".benefits")

SELECTION

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul li")

SELECTION

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul li:eq(1)")

SELECTION

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul li:not(:first)")

SELECTION

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

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(…);

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

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

METHODS

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul").addClass("big")

METHODS

<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

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("h1").css("color", "lime")

METHODS

<h1 style="color:lime">
jQuery Notes</h1>
<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

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$(".benefits").prev()

METHODS

<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

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul").prepend("<li>First!</li>")

METHODS

<li>First!</li>
<li>Popular</li>
<li>Concise</li>
…

$("ul").prepend("<li>First!</li>")

METHODS

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("ul").insertBefore("h1")

METHODS

<li>Popular</li>
<li>Concise</li>
<li>Extensible</li>
</ul>

$("li").unwrap()

METHODS

<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
Single-origin coffee viral aesthetic, jean shorts master
Page saved
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.

BETTER?

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

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

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

Zero to Hero, a jQuery Primer

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Zero to Hero, a jQuery Primer

Similar a Zero to Hero, a jQuery Primer (20)

Último

Último (20)

Zero to Hero, a jQuery Primer