An in-depth look at jQuery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

An in-depth look at jQuery

on

  • 4,714 views

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

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

Statistics

Views

Total Views
4,714
Views on SlideShare
4,674
Embed Views
40

Actions

Likes
3
Downloads
125
Comments
0

3 Embeds 40

http://infuture.pixnet.net 21
http://www.slideshare.net 10
http://onwebdev.blogspot.com 9

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

An in-depth look at jQuery Presentation Transcript

  • 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