an in-depth look at jquery
TRANSCRIPT
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