This is the newly updated summary talk about jQuery that I gave in Taipeh at the OSDC Taiwan 2009.

1. An in-depth look at
with Paul Bakaus

2. Web developing

3. Web developer

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

5. Meet jQuery

6. jQuery is not a
framework.

7. jQuery is a library.

8. Framework Library
Application / Website
Framework / Library

9. uh oh, no OOP?

10. 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?

11. Basic features

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

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

14. Selections
• •
CSS-based selections: Attribute filters:
$(quot;#idquot;) / $(quot;.classquot;) [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

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

16. 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()

17. 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()

18. 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()

19. Around jQuery
Useful JavaScript

20. Prototypal inheritance

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

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

23. Recursive anonymous
functions
arguments.callee

24. Shorter Syntax
Spice up your JavaScript

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

26. Within jQuery

27. Iteration
$(..).each(fn)

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

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

30. Client-side programming is
an inherently asychronous
world.

31. 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

32. Event namespacing
$(quot;divquot;)
.bind(quot;clickquot;, function() {
alert(quot;fooquot;);
})
.$(quot;divquot;).bind(quot;click.barquot;, function() {
alert(quot;barquot;);
});
$(quot;divquot;).trigger(quot;clickquot;); //Alerts foo and bar
$(quot;divquot;).trigger(quot;click.barquot;); //Alerts only bar
$(quot;divquot;).unbind(quot;.barquot;) //Unbinds all .bar events

33. 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

34. Event delegation

35. • 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

36. (Demo)

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

38. Extending jQuery

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

40. 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

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

42. 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