an in-depth look at jquery

An in-depth look at

with Paul Bakaus

Web developing

Web developer

• ..the DOM

• verbose

• horribly inefficient

• Cross-browser issues

• CSS

• JavaScript

Has to fight against..

Meet jQuery

jQuery is not a framework.

jQuery is a library.

Application / Website

Framework / Library

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:

$("#id") / $(".class")

• Grab elements directly:$(DOMelement)

• Basic filters::even, :odd, :first, :last

• Content filters::contains(), :empty, :has(), :parent

• Visibility filters::hidden, :visible

• Attribute filters:[attr], [attr=value]

• Child filters::nth-child(), :first-child, :last-child, :only-child

• Forms::input, :text, :password, :radio, :hidden

• Form filters::enabled, :disabled, :checked, :selected

DOM Traversing• Remove from collection:

filter(), not(), slice()

• Add to collection:add()

• Traverse:

• children(), parent(), parents()

• next(), prev(), siblings()

DOM Manipulations• Changing contents:

html(), text()

• Inserting inside:append(), appendTo(), prepend(), prependTo()

• Inserting outside:after(), before(), insertAfter(), insertBefore()

• Inserting around:wrap(), wrapAll, wrapInner()

• Replacing:replaceWith(), replaceAll()

• Removing:empty(), remove()

• Copying:clone()

Attributes & CSS• Attributes:

attr(), removeAttr(), val()

• Class:addClass(), hasClass(), removeClass(), toggleClass()

• CSS:css()

• Positioning:offset(), position(), scrollTop(), scrollLeft()

• Height and width:height(), width(), innerHeight(), innerWidth(), outerHeight(), outerWidth()

Events• Page load:

ready()

• Event handling:bind(), trigger(), unbind()

• Live events:live(), die()

• Interaction helpers:hover(), toggle()

• Event helpers:blur(), change(), click(), dblclick(), error(), focus(), keydown, keypress(), keyup(), load() ...

Around jQueryUseful JavaScript

Prototypal inheritance

Basic understandingObjects 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 SyntaxSpice 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

control their telecommunication infrastructure

• In Erlang, modules talk to other modules through event-passing

• Most common modules: DOM elements

• Any JS-Object can be a container

• Each module needs to know very little - it doesn‘t care how to get information

• Any number of modules can be waiting to receive 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

• $(..).doSomething()• $(‘ div:pseudo‘) • $(..).animate({ property: 100 })

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