An in-depth look at
with Paul Bakaus

Web developing

Web developer

Has to fight against..
• ..the DOM
• verbose
• horribly inefficient
• Cross-browser issues
• CSS
• JavaScript

Meet jQuery

jQuery is not a
framework.

jQuery is a library.

Framework Library
Application / Website
Framework / Library

uh oh, no OOP?

A thought problem.
• JavaScript is entirely object oriented -
almost to the extend of Ruby!
• Unless most others, we don‘t hate JavaScript. Why
simulate another language?

Basic features

The jQuery way
• Grab something and do something with it
• Human readable syntax
• Cross-browser normalization
• Chaining:
$(\"<div/>\")
.html(\"yay!\")
.appendTo(\"body\")

Feature sets
Selections
DOM Traversing
DOM Manipulations
Attributes & CSS
Events
Animation
Ajax

Selections
• •
CSS-based selections: Attribute filters:
$(\"#id\") / $(\".class\") [attr], [attr=value]
• •
Grab elements directly: Child filters:
$(DOMelement) :nth-child(), :first-child, :last-
child, :only-child
• Basic filters:
• Forms:
:even, :odd, :first, :last
:input, :text, :password, :radio,
• :hidden
Content filters:
:contains(), :empty, :has(),
• Form filters:
:parent
:enabled, :disabled, :checked,
• :selected
Visibility filters:
:hidden, :visible

DOM Traversing
• Remove from collection:
filter(), not(), slice()
• Add to collection:
add()
• Traverse:
• children(), parent(), parents()
• next(), prev(), siblings()

DOM Manipulations
• •
Changing contents: Replacing:
html(), text() replaceWith(), replaceAll()
• •
Inserting inside: Removing:
append(), appendTo(), empty(), remove()
prepend(), prependTo()
• Copying:
• Inserting outside: clone()
after(), before(), insertAfter(),
insertBefore()
• Inserting around:
wrap(), wrapAll, wrapInner()

Attributes & CSS
• •
Attributes: Height and width:
attr(), removeAttr(), val() height(), width(), innerHeight(),
innerWidth(), outerHeight(),
• outerWidth()
Class:
addClass(), hasClass(),
removeClass(), toggleClass()
• CSS:
css()
• Positioning:
offset(), position(), scrollTop(),
scrollLeft()

Events
• •
Page load: Event helpers:
ready() blur(), change(), click(),
dblclick(), error(), focus(),
• keydown, keypress(), keyup(),
Event handling:
load() ...
bind(), trigger(), unbind()
• Live events:
live(), die()
• Interaction helpers:
hover(), toggle()

Around jQuery
Useful JavaScript

Prototypal inheritance

Basic understanding
Objects inherit from other objects
JavaScript inheritance is implicit
JavaScript supports true encapsulation
Syntax: new, instanceof, Object.prototype

Scoping & Anonymous
functions
(function() {})()

Recursive anonymous
functions
arguments.callee

Shorter Syntax
Spice up your JavaScript

• firstCondition() && secondCondition()
• var one = 1, two = 2, three = 3;
• condition ? foo() : bar()
• var available = foo || bar
• (new Date()).getTime()
• !!()

Within jQuery

Iteration
$(..).each(fn)

Extending
$.extend(firstObject, secondObject, ..)

Events
• Event-driven architecture
• Event namespacing
• Custom events
• Event delegation
• Live events

Client-side programming is
an inherently asychronous
world.

Event-driven code
• •
Ericsson uses Erlang to Any JS-Object can be a
control their container
telecommunication
• Each module needs to
infrastructure
know very little - it
• In Erlang, modules talk to doesn‘t care how to get
other modules through information
event-passing
• Any number of modules
• Most common modules: can be waiting to receive
DOM elements information back at the
same time without
hanging the browser

Event namespacing
$(\"div\")
.bind(\"click\", function() {
alert(\"foo\");
})
.$(\"div\").bind(\"click.bar\", function() {
alert(\"bar\");
});
$(\"div\").trigger(\"click\"); //Alerts foo and bar
$(\"div\").trigger(\"click.bar\"); //Alerts only bar
$(\"div\").unbind(\".bar\") //Unbinds all .bar events

Custom events
• Events don‘t have to be browser events -
invent your own!
• Events can be bound to anything - even
generic Javascript objects
• Use the data API to pass along data with
DOM elements without causing memory
leaks

Event delegation

• Scales to any number of elements
• No need to rebind / unbind on DOM
changes
• 1. Binds events to a root node instead of
the actual context node
• 2. Checks for actual context during the
trigger

(Demo)

Live events
• New in jQuery 1.3
• Makes event delegation totally transparent
• $().live(name, fn) to bind
• $().die(name, fn) to remove

Extending jQuery

What can be extended?
Functions Selectors Animations
• most jQuery plugins • $(‘ div:pseudo‘) • $(..).animate({ property: 100 })
• $(..).doSomething()

Functions
• jQuery.fn is the plugin namespace
• jQuery.fn.myFunction = fn results in $
(..).myFunction()
• In your function, this points to the current
selection, and all arguments are passed
along

Selectors
• The selector can be extended with custom
pseudo selectors
• Simply extend jQuery.expr[\":\"]
• key is your pseudo selector
• value is a function that receives the
element as first arg and needs to return a
boolean

Animations
• Add your own properties to animate
(i.e. ,corner‘)
• Extend jQuery.fx.step:
• key is the property name
• value is a function that receives an fx
object