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
    • Jav...
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,...
Basic features
The jQuery way
• Grab something and do something with it
• Human readable syntax
• Cross-browser normalization
• Chaining:...
Feature sets
    Selections
 DOM Traversing
DOM Manipulations
 Attributes & CSS
     Events
    Animation
      Ajax
Selections
•                                  •
    CSS-based selections:              Attribute filters:
    $(quot;#idquo...
DOM Traversing
 •   Remove from collection:
     filter(), not(), slice()

 •   Add to collection:
     add()

 •   Travers...
DOM Manipulations
•                                       •
    Changing contents:                      Replacing:
    htm...
Attributes & CSS
•                                        •
    Attributes:                              Height and width:...
Events
•                                 •
    Page load:                        Event helpers:
    ready()               ...
Around jQuery
   Useful JavaScript
Prototypal inheritance
Basic understanding
    Objects inherit from other objects

      JavaScript inheritance is implicit

   JavaScript suppor...
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 = fo...
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
    contr...
Event namespacing
$(quot;divquot;)
	 .bind(quot;clickquot;, function() {
	 	 alert(quot;fooquot;);
	 })
	 .$(quot;divquot;...
Custom events
• Events don‘t have to be browser events -
  invent your own!
• Events can be bound to anything - even
  gen...
Event delegation
• Scales to any number of elements
• No need to rebind / unbind on DOM
  changes

• 1. Binds events to a root node instead...
(Demo)
Live events

• New in jQuery 1.3
• Makes event delegation totally transparent
• $().live(name, fn) to bind
• $().die(name,...
Extending jQuery
What can be extended?
   Functions               Selectors               Animations
• most jQuery plugins   • $(‘ div:pseu...
Functions

• jQuery.fn is the plugin namespace
• jQuery.fn.myFunction = fn results in $
  (..).myFunction()
• In your func...
Selectors
• The selector can be extended with custom
  pseudo selectors
• Simply extend jQuery.expr[quot;:quot;]
 • key is...
Animations
• Add your own properties to animate
  (i.e. ,corner‘)
• Extend jQuery.fx.step:
 • key is the property name
 • ...
Upcoming SlideShare
Loading in...5
×

An in-depth look at jQuery

2,804

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,804
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
126
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide










































  • An in-depth look at jQuery

    1. 1. An in-depth look at with Paul Bakaus
    2. 2. Web developing
    3. 3. Web developer
    4. 4. Has to fight against.. • ..the DOM • verbose • horribly inefficient • Cross-browser issues • CSS • JavaScript
    5. 5. Meet jQuery
    6. 6. jQuery is not a framework.
    7. 7. jQuery is a library.
    8. 8. Framework Library Application / Website Framework / Library
    9. 9. uh oh, no OOP?
    10. 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. 11. Basic features
    12. 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. 13. Feature sets Selections DOM Traversing DOM Manipulations Attributes & CSS Events Animation Ajax
    14. 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. 15. DOM Traversing • Remove from collection: filter(), not(), slice() • Add to collection: add() • Traverse: • children(), parent(), parents() • next(), prev(), siblings()
    16. 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. 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. 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. 19. Around jQuery Useful JavaScript
    20. 20. Prototypal inheritance
    21. 21. Basic understanding Objects inherit from other objects JavaScript inheritance is implicit JavaScript supports true encapsulation Syntax: new, instanceof, Object.prototype
    22. 22. Scoping & Anonymous functions (function() {})()
    23. 23. Recursive anonymous functions arguments.callee
    24. 24. Shorter Syntax Spice up your JavaScript
    25. 25. • firstCondition() && secondCondition() • var one = 1, two = 2, three = 3; • condition ? foo() : bar() • var available = foo || bar • (new Date()).getTime() • !!()
    26. 26. Within jQuery
    27. 27. Iteration $(..).each(fn)
    28. 28. Extending $.extend(firstObject, secondObject, ..)
    29. 29. Events • Event-driven architecture • Event namespacing • Custom events • Event delegation • Live events
    30. 30. Client-side programming is an inherently asychronous world.
    31. 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. 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. 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. 34. Event delegation
    35. 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. 36. (Demo)
    37. 37. Live events • New in jQuery 1.3 • Makes event delegation totally transparent • $().live(name, fn) to bind • $().die(name, fn) to remove
    38. 38. Extending jQuery
    39. 39. What can be extended? Functions Selectors Animations • most jQuery plugins • $(‘ div:pseudo‘) • $(..).animate({ property: 100 }) • $(..).doSomething()
    40. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×