Bubbles & trees
with
Me, myself and I
                                          application developer
                                       ...
What's this all about?
   What is this jQuery?
   All about the basics
   Animation and user interaction
   Event-hand...
What's this jQuery?
„jQuery is a fast, concise, JavaScript Library that
simplifies how you traverse HTML documents,
handle...
jQuery – some features
   Crossbrowser compatible
    (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)
   CSS3 ready
   outsta...
All about the basics
   interoperability
   extending the DOM object
   DOM Manipulation
   selectors
   iterations

...
Interoperability
   overriding $()                     <html>
                                        <head>
            ...
Extending the DOM
   $(selector, scope)
     ▹   simplifies the selection of DOM elements
     ▹   extends the DOM node w...
DOM Manipulation
   changing contents
     ▹   html([val])
     ▹   text([val])
   replacing DOM node(s)
     ▹   replac...
DOM Manipulation (II)
   inserting DOM node
     ▹   inside
         append(content), prepend(), (append|prepend)To(conte...
Selectors
    basic
     *, #id, .class, element, selectorN

    hierarchical
     ancestor descendant, parent > child, ...
Iterations
   each(object, callback)
               $(objList)
                 .each( function(i) {
                    ...
Animation &
                        user interaction
   appearance
    show(), hide(), toggle()
                         ...
Event-handling   (DOM perspective)



   DOM handles events in 2 different ways:
     ▹   bubbling
     ▹   capturing



...
Event-handling                             (II)



     the 'event' object
      ▹   event.ready()
      ▹   event.which
...
Event-handling    (III)



   (un)binding events to a DOM node
     ▹   bind(type[, data], callback)
     ▹   one(type[, ...
Handling asynchronous
                        requests




Bastian Feder | papaya Software GmbH            17
Request handling -
                        example




                                       Live demo




Bastian Feder ...
Plug-ins – an overview
   mechanism for adding in methods and functionality
   things to remember when writing plugins:
...
Plug-ins – an example
    /**
     * calculates the number to a human readable format
     *
     * calculation taken from...
Conclusion
   jQuery is ..
     ▹   an extensive javascript library with an huge
         amount of functionallity
     ▹...
References
   jQuery website                     (http://www.jquery.com)

   A List Apart: DOM Design Tricks I/II
    (h...
License
This set of slides and the source code included in
the download package is licensed under the

Creative Commons At...
Upcoming SlideShare
Loading in …5
×

Bubbles & Trees with jQuery

3,083 views

Published on

This presention gives an overview over the functionality of the JavaScript framework jQuery.

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

No Downloads
Views
Total views
3,083
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
104
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Bubbles & Trees with jQuery

  1. 1. Bubbles & trees with
  2. 2. Me, myself and I  application developer  PHP since 2001  JavaScript since 2002  papaya CMS since 01.2008 Bastian Feder | papaya Software GmbH 2
  3. 3. What's this all about?  What is this jQuery?  All about the basics  Animation and user interaction  Event-handling – capability  Handling asynchronous requests  Plug-ins – an overview  Examples  Conclusion Bastian Feder | papaya Software GmbH 3
  4. 4. What's this jQuery? „jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.“ (www.jquery.com) Bastian Feder | papaya Software GmbH 4
  5. 5. jQuery – some features  Crossbrowser compatible (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)  CSS3 ready  outstanding features: ▹ ability to queue effects ▹ user defined animations ▹ unobtrusiveness in coexistence with other JS libraries or frameworks (e.g. prototype) Bastian Feder | papaya Software GmbH 5
  6. 6. All about the basics  interoperability  extending the DOM object  DOM Manipulation  selectors  iterations Bastian Feder | papaya Software GmbH 6
  7. 7. Interoperability  overriding $() <html> <head> <script src=quot;prototype.jsquot;></script>  including jQuery <script src=quot;jquery.jsquot;></script> <script> before other libraries var $j = jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){  referencing magic- $j(quot;divquot;).hide(); }); shortcuts // Use Prototype with $(...), etc. $('someid').hide(); </script> </head> <body></body> </html> Bastian Feder | papaya Software GmbH 7
  8. 8. Extending the DOM  $(selector, scope) ▹ simplifies the selection of DOM elements ▹ extends the DOM node with jQuery methods  $(document).ready(callback); ▹ ensures the javascript will be executed after document has been loaded completely Bastian Feder | papaya Software GmbH 8
  9. 9. DOM Manipulation  changing contents ▹ html([val]) ▹ text([val])  replacing DOM node(s) ▹ replaceWith(content) ▹ replaceAll(selector) Bastian Feder | papaya Software GmbH 9
  10. 10. DOM Manipulation (II)  inserting DOM node ▹ inside append(content), prepend(), (append|prepend)To(content) ▹ outside after(content), before(content), insert(After|Before)(content) ▹ around wrap([html|elem]), wrapAll([html|elem]), wrapInner([html|elem]) Bastian Feder | papaya Software GmbH 10
  11. 11. Selectors  basic *, #id, .class, element, selectorN  hierarchical ancestor descendant, parent > child, prev + next, prev ~ siblings  filters :first, :last, :not, :animated, etc /* * add checkbox to first td found in html, * formats the size to a human readable string and * attaches event handlers to the tr element */ $('td:first', html).append(checkbox) .parent() // format the size column .find('.size') .each( function() { words = $(this).text().split(' '); $(this).html(words[0] + '<span class=quot;unitquot;>'+ words[1] +'</span>'); }) .end(); Bastian Feder | papaya Software GmbH 11
  12. 12. Iterations  each(object, callback) $(objList) .each( function(i) { requestQueue.addToListOfRequests(objList[i]); } );  map(array, callback[, invert]) var arr = [ quot;aquot;, quot;bquot;, quot;cquot;, quot;dquot;, quot;equot; ] $(quot;divquot;).text(arr.join(quot;, quot;)); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); Bastian Feder | papaya Software GmbH 12
  13. 13. Animation & user interaction  appearance show(), hide(), toggle() $(document.body).click(function () {  sliding $(quot;divquot;).show(quot;slowquot;); $(quot;divquot;).animate({left:'+=200'},2000); slideDown(), slideUp(), slideToggle() $(quot;divquot;).queue(function () { $(this).addClass(quot;newcolorquot;);  fading $(this).dequeue(); }); fadeIn(speed[,callback]), $(quot;divquot;).animate({left:'-=200'},500); $(quot;divquot;).queue(function () { fadeOut(speed[,callback]), fadeTo(speed, $(this).removeClass(quot;newcolorquot;); opacity[,callback]) $(this).dequeue(); });  aminate & (de)queue $(quot;divquot;).slideUp(); }); Bastian Feder | papaya Software GmbH 13
  14. 14. Event-handling (DOM perspective)  DOM handles events in 2 different ways: ▹ bubbling ▹ capturing Bastian Feder | papaya Software GmbH 14
  15. 15. Event-handling (II)  the 'event' object ▹ event.ready() ▹ event.which (keystroke, mouseclick: 1=left, 2=middle, 3=right) ▹ event.preventDefault() ▹ event.stopPropagation() ▹ event.metaKey (PC=ctrl; Mac=Meta) Bastian Feder | papaya Software GmbH 15
  16. 16. Event-handling (III)  (un)binding events to a DOM node ▹ bind(type[, data], callback) ▹ one(type[, data], callback) ▹ unbind(type[, data], callback)  handling triggers ▹ trigger(type[, data]) ▹ triggerHandler(type[, data]) Bastian Feder | papaya Software GmbH 16
  17. 17. Handling asynchronous requests Bastian Feder | papaya Software GmbH 17
  18. 18. Request handling - example Live demo Bastian Feder | papaya Software GmbH 18
  19. 19. Plug-ins – an overview  mechanism for adding in methods and functionality  things to remember when writing plugins: ▹ names convention (jquery.[nameOfPlugin].js) ▹ methods are attached to jQuery.fn object ▹ function are attached to jQuery object ▹ inside methods 'this' is a reference to current jQuery object ▹ your method must return the jQuery object, unless explicity noted otherwise. ▹ use jQuery instead of $ inside your plugin code - that allows users to change the alias for jQuery in a single place. Bastian Feder | papaya Software GmbH 19
  20. 20. Plug-ins – an example /** * calculates the number to a human readable format * * calculation taken from papaya-cms {@link http://www.papaya-cms.com} */ jQuery.fn.toHumanReadable = function() { var size = this.text(); var unit; if (size > 10000000000) { size = (Math.round(size / 1073741824 * 100) / 100); unit = 'GB'; } else if (size > 10000000) { size = (Math.round(size / 1048576 * 100) / 100) unit = 'MB'; } else if (size > 10000) { size = (Math.round(size / 1024 * 100) / 100) unit = 'kB'; } else { size = Math.round(size) unit = 'B'; } size = size.toString(); var p = size.lastIndexOf('.'); if (p > 0) { var i = 2 - size.length + p + 1; while (i > 0) { size = size + '0'; i--; } } else { size = size + '.00'; } return this.text(size + ' ' + unit); } Bastian Feder | papaya Software GmbH 20
  21. 21. Conclusion  jQuery is .. ▹ an extensive javascript library with an huge amount of functionallity ▹ very easy to learn and use ▹ pretty good documented ▹ easy to extend by writing plug-ins Bastian Feder | papaya Software GmbH 21
  22. 22. References  jQuery website (http://www.jquery.com)  A List Apart: DOM Design Tricks I/II (http://www.alistapart.com/articles/domtricks2)  Selfhtml (http://de.selfhtml.org; sorry german only)  slides soonish on slideshare (http://www.slideshare.com/lapistano) Bastian Feder | papaya Software GmbH 22
  23. 23. License This set of slides and the source code included in the download package is licensed under the Creative Commons Attribution-Noncommercial- Share Alike 2.0 Generic License http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en Bastian Feder | papaya Software GmbH 23

×