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
Slide 17
Slide 17 text
DIY
Or make your own selectors
$.expr[":"].parked
= function(obj){…};
and apply them
$(".blues:parked").each(…);
Slide 18
Slide 18 text
OBJECTS
Using jQuery with objects
$(document)
$(window)
Define the current context
$(this)
Slide 19
Slide 19 text
OBJECTS
For example
$("div").hover(function() {
$(this).addClass("on");
}, function() {…});
Slide 20
Slide 20 text
CORE
Code is generally run when DOM is ready
window.onload = function(){…}
$(document).ready(function(){…});
Can be called repeatedly, and shortened to
$(function(){…});
Slide 21
Slide 21 text
CORE
jQuery deals in ‘collections’ of
one or more objects, so
$("ul li")
returns a collection of all
matching elements
Slide 22
Slide 22 text
CORE
Some JavaScript properties
work with collections
$("ul li").length
As well as array indices to isolate
individual DOM nodes
$("ul li")[0]
Slide 23
Slide 23 text
TIP
When assigning jQuery collections
to variables, prefix with $
var $myList = $("#mylist");
Useful reminder as to a variable’s type.
Slide 24
Slide 24 text
CORE
jQuery uses JavaScript syntax for
conditional statements, loops, etc.
if (this > that) {
$("nav").hide();
} else {…}
Slide 25
Slide 25 text
METHODS
Now for the cool stuff.
Call jQuery methods to manipulate
objects, data and collections
$("ul li").slideDown()
$("ul li").addClass()
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
Slide 52
Slide 52 text
METHODS
$("div").load("index.html");
Slide 53
Slide 53 text
METHODS
$("div").load("index.html #main");
Slide 54
Slide 54 text
METHODS
As well as methods for…
Array handling
Forms manipulation
File parsing
Feature detection
and more…
Slide 55
Slide 55 text
CHAINING
Most methods return the same jQuery
collection, and can be chained in sequence
$("div:hidden")
.text("Error")
.css("color","red")
.fadeIn();
Slide 56
Slide 56 text
CHAINING
If a method returns a new collection, return
to the previous collection using end()
$("div").find("a")
.addClass("mute")
.end()
.find("b").hide();
Slide 57
Slide 57 text
CALLBACKS
Some methods allow more code to be
executed once they complete (a ‘callback’)
$("div").animate(
{top: 50},
function() {…}
);
Slide 58
Slide 58 text
DEMO
Given the following markup
…
how might we show the user a
success message above the text?
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.
Slide 64
Slide 64 text
PLUGINS
Creating your own plugin is easy
$.fn.addIcon = function() {
return this.prepend(
$("", {class: "icon"})
);
}
Slide 65
Slide 65 text
PLUGINS
Creating your own plugin is easy
$(":header").addIcon();
Slide 66
Slide 66 text
PLUGINS
Last week from Paravel and Chris Coyier,
a plugin for fluid-width video embeds…
Slide 67
Slide 67 text
WHERE
jquery.com
plugins.jquery.com
jqapi.com
code.google.com/apis/libraries/
fitvidsjs.com
hipsteripsum.me
Slide 68
Slide 68 text
Matthew Buchanan / @mrb
matthewbuchanan.name
www.cactuslab.com
.end()