Bubbles and trees with jQuery
                          Web 2.0 made easy


                 Bastian Feder <php@bastian-fe...
About Us



        Bastian Feder

              Application developer
              Using PHP since 2001

              U...
About Us



        Jakob Westhoff

              Web-developer for more than 6 years
              Author of Activebar2 (u...
Goals of this session




         You will learn about:
               jQuery basics and need to know facts
             ...
Goals of this session




         You will learn about:
               jQuery basics and need to know facts
             ...
Goals of this session




         You will learn about:
               jQuery basics and need to know facts
             ...
Goals of this session




         You will learn about:
               jQuery basics and need to know facts
             ...
Goals of this session




         You will learn about:
               jQuery basics and need to know facts
             ...
jQuery about itself



   From the jQuery Website:
   jQuery is a fast and concise JavaScript Library that simplifies
   HT...
jQuery about itself



   From the jQuery Website:
   jQuery is a fast and concise JavaScript Library that simplifies
   HT...
jQuery about itself



   From the jQuery Website:
   jQuery is a fast and concise JavaScript Library that simplifies
   HT...
jQuery about itself



   From the jQuery Website:
   jQuery is a fast and concise JavaScript Library that simplifies
   HT...
jQuery about itself



   From the jQuery Website:
   jQuery is a fast and concise JavaScript Library that simplifies
   HT...
Introduction to jQuery


         Compact
               only 56kb minified
               19kb minified and gzipped
       ...
Introduction to jQuery


         Compact
               only 56kb minified
               19kb minified and gzipped
       ...
Introduction to jQuery


         Compact
               only 56kb minified
               19kb minified and gzipped
       ...
jQuery Example



      $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” )...
jQuery Example



      $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” )...
jQuery Example



      $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” )...
jQuery Example



      $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” )...
What comes next?




                           Basics



 http://westhoffswelt.de   jakob@westhoffswelt.de   slide: 7 / 30
DOM Object proxy


        jQuery is accessed using $ or jQuery
        Document centric
              $(css selector).ope...
DOM Object proxy


        jQuery is accessed using $ or jQuery
        Document centric
              $(css selector).ope...
DOM Object proxy


        jQuery is accessed using $ or jQuery
        Document centric
              $(css selector).ope...
DOM Object proxy


        jQuery is accessed using $ or jQuery
        Document centric
              $(css selector).ope...
DOM Object proxy


        jQuery is accessed using $ or jQuery
        Document centric
              $(css selector).ope...
Interoperability




         Different Javascript libs use $ as a shortcut
         jQuery allows to rename its $ shortcut...
Interoperability




         Different Javascript libs use $ as a shortcut
         jQuery allows to rename its $ shortcut...
Interoperability - Example

          Include jQuery after other libraries

      1 < s c r i p t s r c=” p r o t o t y p ...
Interoperability - Example

          Include jQuery after other libraries

      1 < s c r i p t s r c=” p r o t o t y p ...
Fluent interface (Chaining)

          Every method returns the object currently working on

      1   $ ( ’ span ’ )
    ...
Fluent interface (Chaining)

          Every method returns the object currently working on

      1   $ ( ’ span ’ )
    ...
Fluent interface (Chaining)

          Every method returns the object currently working on

      1   $ ( ’ span ’ )
    ...
Fluent interface (Chaining)

          Every method returns the object currently working on

      1   $ ( ’ span ’ )
    ...
CSS 3 complaint selectors

         Basic

      $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )

        ...
CSS 3 complaint selectors

         Basic

      $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )

        ...
CSS 3 complaint selectors

         Basic

      $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )

        ...
CSS 3 complaint selectors

         Basic

      $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )

        ...
DOM Manipulation



     1   Select the nodes to work with:

         $( ’p > div ’ )

     2   Use DOM manipulation funct...
DOM Manipulation



     1   Select the nodes to work with:

         $( ’p > div ’ )

     2   Use DOM manipulation funct...
DOM Manipulation



     1   Select the nodes to work with:

         $( ’p > div ’ )

     2   Use DOM manipulation funct...
DOM Manipulation



     1   Select the nodes to work with:

         $( ’p > div ’ )

     2   Use DOM manipulation funct...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Insert nodes

         Inside
      . append ( c o n t e n t )
      . prepend ( content )

         Outside
      . a f t...
Changing contents



         Change simple text content

          $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;



   ...
Changing contents



         Change simple text content

          $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;



   ...
Changing contents



         Change simple text content

          $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;



   ...
Changing contents



         Change simple text content

          $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;



   ...
Replace nodes


         Replace selected nodes with new nodes

          $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i ...
Replace nodes


         Replace selected nodes with new nodes

          $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i ...
Replace nodes


         Replace selected nodes with new nodes

          $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i ...
Replace nodes


         Replace selected nodes with new nodes

          $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i ...
Replace nodes


         Replace selected nodes with new nodes

          $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i ...
Remove nodes



        Remove all child nodes

         $ ( ’ p#i d ’ ) . empty ( ) ;



        Remove the element itsel...
Remove nodes



        Remove all child nodes

         $ ( ’ p#i d ’ ) . empty ( ) ;



        Remove the element itsel...
Remove nodes



        Remove all child nodes

         $ ( ’ p#i d ’ ) . empty ( ) ;



        Remove the element itsel...
Remove nodes



        Remove all child nodes

         $ ( ’ p#i d ’ ) . empty ( ) ;



        Remove the element itsel...
Iterators



          Iterate over an arbitrary set of elements:

      1    $ ( ’ p ’ ) . each (
      2        function...
Iterators



          Iterate over an arbitrary set of elements:

      1    $ ( ’ p ’ ) . each (
      2        function...
Iterators



          Iterate over an arbitrary set of elements:

      1    $ ( ’ p ’ ) . each (
      2        function...
What comes next?




                          Animation



 http://westhoffswelt.de    jakob@westhoffswelt.de   slide: 18 /...
Predefined animations

   jQuery comes with a number of predefined effects

         Fade in and out elements
          $ ( ’...
Predefined animations

   jQuery comes with a number of predefined effects

         Fade in and out elements
          $ ( ’...
Predefined animations

   jQuery comes with a number of predefined effects

         Fade in and out elements
          $ ( ’...
Predefined animations


         Show and hide elements by using a combination of fading and
         sliding
          $ (...
Predefined animations


         Show and hide elements by using a combination of fading and
         sliding
          $ (...
Predefined animations


         Show and hide elements by using a combination of fading and
         sliding
          $ (...
Custom animations


          Use the animate method for custom animations
          Every numeric property can be animate...
Custom animations


          Use the animate method for custom animations
          Every numeric property can be animate...
Custom animations


          Use the animate method for custom animations
          Every numeric property can be animate...
Custom animations


          Use the animate method for custom animations
          Every numeric property can be animate...
A small detour: Using the queue
          jQuery uses a queue to manage it’s animations internally
          Can be used t...
A small detour: Using the queue
          jQuery uses a queue to manage it’s animations internally
          Can be used t...
A small detour: Using the queue
          jQuery uses a queue to manage it’s animations internally
          Can be used t...
A small detour: Using the queue
          jQuery uses a queue to manage it’s animations internally
          Can be used t...
A small detour: Using the queue
          jQuery uses a queue to manage it’s animations internally
          Can be used t...
What comes next?




                          Events



 http://westhoffswelt.de   jakob@westhoffswelt.de   slide: 22 / 30
Event handling basics



         Event abstraction to not rely on browser specific behaviour
         Generic event bindin...
Event handling basics



         Event abstraction to not rely on browser specific behaviour
         Generic event bindin...
Event handling basics



         Event abstraction to not rely on browser specific behaviour
         Generic event bindin...
Event handling basics



         Event abstraction to not rely on browser specific behaviour
         Generic event bindin...
Event handling basics



         Event abstraction to not rely on browser specific behaviour
         Generic event bindin...
Generic event handling

         Register an event handler for a specific element
          $ ( ’ p ’ ) . bind ( ’ c l i c ...
Generic event handling

         Register an event handler for a specific element
          $ ( ’ p ’ ) . bind ( ’ c l i c ...
Generic event handling

         Register an event handler for a specific element
          $ ( ’ p ’ ) . bind ( ’ c l i c ...
Generic event handling

         Register an event handler for a specific element
          $ ( ’ p ’ ) . bind ( ’ c l i c ...
Event object abstraction

         Event object always send to event handler
               No need for window.event
     ...
Event object abstraction

         Event object always send to event handler
               No need for window.event
     ...
Event object abstraction

         Event object always send to event handler
               No need for window.event
     ...
Event helper

   Helper methods for common tasks

         Shortcut methods for all kinds of events
          $ ( ’ p ’ ) ...
Event helper

   Helper methods for common tasks

         Shortcut methods for all kinds of events
          $ ( ’ p ’ ) ...
Event helper

   Helper methods for common tasks

         Shortcut methods for all kinds of events
          $ ( ’ p ’ ) ...
Event helper

   Helper methods for common tasks

         Shortcut methods for all kinds of events
          $ ( ’ p ’ ) ...
Live events


         Bind event handlers to items which do not exist yet
          $( ’p ’ ) . l i v e (” click ” , func...
Live events


         Bind event handlers to items which do not exist yet
          $( ’p ’ ) . l i v e (” click ” , func...
Live events


         Bind event handlers to items which do not exist yet
          $( ’p ’ ) . l i v e (” click ” , func...
Live events


         Bind event handlers to items which do not exist yet
          $( ’p ’ ) . l i v e (” click ” , func...
Live events


         Bind event handlers to items which do not exist yet
          $( ’p ’ ) . l i v e (” click ” , func...
Event namespaces

         To safely unbind events you need their callback function
         jQuery event namespaces solve...
Event namespaces

         To safely unbind events you need their callback function
         jQuery event namespaces solve...
Event namespaces

         To safely unbind events you need their callback function
         jQuery event namespaces solve...
Event namespaces

         To safely unbind events you need their callback function
         jQuery event namespaces solve...
Event namespaces

         To safely unbind events you need their callback function
         jQuery event namespaces solve...
What comes next?




                             Ajax



 http://westhoffswelt.de   jakob@westhoffswelt.de   slide: 28 / 30
Shortcuts for AJAX requests

         Load external HTML directly:
          $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e...
Shortcuts for AJAX requests

         Load external HTML directly:
          $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e...
Shortcuts for AJAX requests

         Load external HTML directly:
          $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e...
Shortcuts for AJAX requests

         Load external HTML directly:
          $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e...
Shortcuts for AJAX requests

         Load external HTML directly:
          $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e...
Advanced AJAX requests

          Manual complex AJAX requests are possible

      1   $ . a j a x ({
      2           u ...
Advanced AJAX requests

          Manual complex AJAX requests are possible

      1   $ . a j a x ({
      2           u ...
Advanced AJAX requests

          Manual complex AJAX requests are possible

      1   $ . a j a x ({
      2           u ...
Thanks for listening

          Questions, comments or annotations?

                      Slides: http://slideshare.net

...
Upcoming SlideShare
Loading in …5
×

Bubbles and Trees with jQuery

2,415 views
2,332 views

Published on

jQuery introduction talk covering the basics as well as some less known features like event namespaces and queueing.

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

  • Be the first to like this

No Downloads
Views
Total views
2,415
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bubbles and Trees with jQuery

  1. 1. Bubbles and trees with jQuery Web 2.0 made easy Bastian Feder <php@bastian-feder.de> Jakob Westhoff <jakob@php.net> WebtechCon November 18, 2009 http://westhoffswelt.de jakob@westhoffswelt.de slide: 1 / 30
  2. 2. About Us Bastian Feder Application developer Using PHP since 2001 Using Javascript since 2002 Working on the papaya CMS since 01.2008 http://westhoffswelt.de jakob@westhoffswelt.de slide: 2 / 30
  3. 3. About Us Jakob Westhoff Web-developer for more than 6 years Author of Activebar2 (used by http://ie6update.com) Computer science student at the TU Dortmund Active in different Open Source projects http://westhoffswelt.de jakob@westhoffswelt.de slide: 2 / 30
  4. 4. Goals of this session You will learn about: jQuery basics and need to know facts Effects and animation Event-handling mechanisms Asynchronous request handling (AJAX) http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
  5. 5. Goals of this session You will learn about: jQuery basics and need to know facts Effects and animation Event-handling mechanisms Asynchronous request handling (AJAX) http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
  6. 6. Goals of this session You will learn about: jQuery basics and need to know facts Effects and animation Event-handling mechanisms Asynchronous request handling (AJAX) http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
  7. 7. Goals of this session You will learn about: jQuery basics and need to know facts Effects and animation Event-handling mechanisms Asynchronous request handling (AJAX) http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
  8. 8. Goals of this session You will learn about: jQuery basics and need to know facts Effects and animation Event-handling mechanisms Asynchronous request handling (AJAX) http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
  9. 9. jQuery about itself From the jQuery Website: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
  10. 10. jQuery about itself From the jQuery Website: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
  11. 11. jQuery about itself From the jQuery Website: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
  12. 12. jQuery about itself From the jQuery Website: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
  13. 13. jQuery about itself From the jQuery Website: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
  14. 14. Introduction to jQuery Compact only 56kb minified 19kb minified and gzipped Cross-browser compatible Internet Explorer 6.0+ Firefox 2+ Safari 3.0+ Opera 9.0+ Chrome Easily extendable http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 30
  15. 15. Introduction to jQuery Compact only 56kb minified 19kb minified and gzipped Cross-browser compatible Internet Explorer 6.0+ Firefox 2+ Safari 3.0+ Opera 9.0+ Chrome Easily extendable http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 30
  16. 16. Introduction to jQuery Compact only 56kb minified 19kb minified and gzipped Cross-browser compatible Internet Explorer 6.0+ Firefox 2+ Safari 3.0+ Opera 9.0+ Chrome Easily extendable http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 30
  17. 17. jQuery Example $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ; Find all paragraphs with the id example Add the css class highlight to them Fade in the paragraph slowly http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
  18. 18. jQuery Example $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ; Find all paragraphs with the id example Add the css class highlight to them Fade in the paragraph slowly http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
  19. 19. jQuery Example $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ; Find all paragraphs with the id example Add the css class highlight to them Fade in the paragraph slowly http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
  20. 20. jQuery Example $ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ; Find all paragraphs with the id example Add the css class highlight to them Fade in the paragraph slowly http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
  21. 21. What comes next? Basics http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
  22. 22. DOM Object proxy jQuery is accessed using $ or jQuery Document centric $(css selector).operation $ ( document ) . r e a d y ( function () { . . . } ); Get the document object extended with jQuery functionality Register an event handler executed once the document is loaded http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
  23. 23. DOM Object proxy jQuery is accessed using $ or jQuery Document centric $(css selector).operation $ ( document ) . r e a d y ( function () { . . . } ); Get the document object extended with jQuery functionality Register an event handler executed once the document is loaded http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
  24. 24. DOM Object proxy jQuery is accessed using $ or jQuery Document centric $(css selector).operation $ ( document ) . r e a d y ( function () { . . . } ); Get the document object extended with jQuery functionality Register an event handler executed once the document is loaded http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
  25. 25. DOM Object proxy jQuery is accessed using $ or jQuery Document centric $(css selector).operation $ ( document ) . r e a d y ( function () { . . . } ); Get the document object extended with jQuery functionality Register an event handler executed once the document is loaded http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
  26. 26. DOM Object proxy jQuery is accessed using $ or jQuery Document centric $(css selector).operation $ ( document ) . r e a d y ( function () { . . . } ); Get the document object extended with jQuery functionality Register an event handler executed once the document is loaded http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
  27. 27. Interoperability Different Javascript libs use $ as a shortcut jQuery allows to rename its $ shortcut http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 30
  28. 28. Interoperability Different Javascript libs use $ as a shortcut jQuery allows to rename its $ shortcut http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 30
  29. 29. Interoperability - Example Include jQuery after other libraries 1 < s c r i p t s r c=” p r o t o t y p e . j s ”></ s c r i p t> 2 < s c r i p t s r c=” j Q u e r y . j s ”></ s c r i p t> Use its noConflict function 1 var $j = jQuery . n o C o n f l i c t () ; 2 3 // Use j Q u e r y 4 $ j ( someElement ) . s o m e F u n c t i o n ( ) ; 5 6 // Use p r o t o t y p e 7 $ ( someElement ) . s o m e F u n c t i o n ( ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 9 / 30
  30. 30. Interoperability - Example Include jQuery after other libraries 1 < s c r i p t s r c=” p r o t o t y p e . j s ”></ s c r i p t> 2 < s c r i p t s r c=” j Q u e r y . j s ”></ s c r i p t> Use its noConflict function 1 var $j = jQuery . n o C o n f l i c t () ; 2 3 // Use j Q u e r y 4 $ j ( someElement ) . s o m e F u n c t i o n ( ) ; 5 6 // Use p r o t o t y p e 7 $ ( someElement ) . s o m e F u n c t i o n ( ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 9 / 30
  31. 31. Fluent interface (Chaining) Every method returns the object currently working on 1 $ ( ’ span ’ ) 2 . addClass ( ’ red ’ ) 3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ; Element selections are tracked and can be restored 1 $ ( ’ span ’ ) 2 . parent () 3 . addClass ( ’ neat ’ ) 4 . parent () 5 . addClass ( ’ fancy ’ ) 6 . end ( ) 7 . end ( ) 8 . addClass ( ’ red ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
  32. 32. Fluent interface (Chaining) Every method returns the object currently working on 1 $ ( ’ span ’ ) 2 . addClass ( ’ red ’ ) 3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ; Element selections are tracked and can be restored 1 $ ( ’ span ’ ) 2 . parent () 3 . addClass ( ’ neat ’ ) 4 . parent () 5 . addClass ( ’ fancy ’ ) 6 . end ( ) 7 . end ( ) 8 . addClass ( ’ red ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
  33. 33. Fluent interface (Chaining) Every method returns the object currently working on 1 $ ( ’ span ’ ) 2 . addClass ( ’ red ’ ) 3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ; Element selections are tracked and can be restored 1 $ ( ’ span ’ ) 2 . parent () 3 . addClass ( ’ neat ’ ) 4 . parent () 5 . addClass ( ’ fancy ’ ) 6 . end ( ) 7 . end ( ) 8 . addClass ( ’ red ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
  34. 34. Fluent interface (Chaining) Every method returns the object currently working on 1 $ ( ’ span ’ ) 2 . addClass ( ’ red ’ ) 3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ; Element selections are tracked and can be restored 1 $ ( ’ span ’ ) 2 . parent () 3 . addClass ( ’ neat ’ ) 4 . parent () 5 . addClass ( ’ fancy ’ ) 6 . end ( ) 7 . end ( ) 8 . addClass ( ’ red ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
  35. 35. CSS 3 complaint selectors Basic $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ ) Hierarchical $( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ ) Filters $( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ ) Many more $ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
  36. 36. CSS 3 complaint selectors Basic $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ ) Hierarchical $( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ ) Filters $( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ ) Many more $ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
  37. 37. CSS 3 complaint selectors Basic $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ ) Hierarchical $( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ ) Filters $( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ ) Many more $ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
  38. 38. CSS 3 complaint selectors Basic $ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ ) Hierarchical $( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ ) Filters $( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ ) Many more $ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ ) http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
  39. 39. DOM Manipulation 1 Select the nodes to work with: $( ’p > div ’ ) 2 Use DOM manipulation functions on it Insert nodes Change content Replace nodes Remove nodes http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
  40. 40. DOM Manipulation 1 Select the nodes to work with: $( ’p > div ’ ) 2 Use DOM manipulation functions on it Insert nodes Change content Replace nodes Remove nodes http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
  41. 41. DOM Manipulation 1 Select the nodes to work with: $( ’p > div ’ ) 2 Use DOM manipulation functions on it Insert nodes Change content Replace nodes Remove nodes http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
  42. 42. DOM Manipulation 1 Select the nodes to work with: $( ’p > div ’ ) 2 Use DOM manipulation functions on it Insert nodes Change content Replace nodes Remove nodes http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
  43. 43. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  44. 44. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  45. 45. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  46. 46. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  47. 47. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  48. 48. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  49. 49. Insert nodes Inside . append ( c o n t e n t ) . prepend ( content ) Outside . a f t e r ( content ) . before ( content ) Around . wrap ( c o n t e n t ) . wrapAll ( content ) content may be a HTML snippet, a jQuery object or a DOM node http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
  50. 50. Changing contents Change simple text content $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ; Change HTML content (innerHTML) $ ( ’ p#i d ’ ) . h t ml ( ’<b>f o o </b>b a r ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
  51. 51. Changing contents Change simple text content $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ; Change HTML content (innerHTML) $ ( ’ p#i d ’ ) . h t ml ( ’<b>f o o </b>b a r ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
  52. 52. Changing contents Change simple text content $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ; Change HTML content (innerHTML) $ ( ’ p#i d ’ ) . h t m l ( ’<b>f o o </b>b a r ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
  53. 53. Changing contents Change simple text content $ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ; Change HTML content (innerHTML) $ ( ’ p#i d ’ ) . h t m l ( ’<b>f o o </b>b a r ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
  54. 54. Replace nodes Replace selected nodes with new nodes $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ; Replace selected nodes with already existing nodes $ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ; Replaces all elements which match the selector div with the contents of p#id http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
  55. 55. Replace nodes Replace selected nodes with new nodes $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ; Replace selected nodes with already existing nodes $ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ; Replaces all elements which match the selector div with the contents of p#id http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
  56. 56. Replace nodes Replace selected nodes with new nodes $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ; Replace selected nodes with already existing nodes $ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ; Replaces all elements which match the selector div with the contents of p#id http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
  57. 57. Replace nodes Replace selected nodes with new nodes $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ; Replace selected nodes with already existing nodes $ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ; Replaces all elements which match the selector div with the contents of p#id http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
  58. 58. Replace nodes Replace selected nodes with new nodes $ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ; Replace selected nodes with already existing nodes $ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ; Replaces all elements which match the selector div with the contents of p#id http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
  59. 59. Remove nodes Remove all child nodes $ ( ’ p#i d ’ ) . empty ( ) ; Remove the element itself $ ( ’ p#i d ’ ) . remove ( ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
  60. 60. Remove nodes Remove all child nodes $ ( ’ p#i d ’ ) . empty ( ) ; Remove the element itself $ ( ’ p#i d ’ ) . remove ( ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
  61. 61. Remove nodes Remove all child nodes $ ( ’ p#i d ’ ) . empty ( ) ; Remove the element itself $ ( ’ p#i d ’ ) . remove ( ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
  62. 62. Remove nodes Remove all child nodes $ ( ’ p#i d ’ ) . empty ( ) ; Remove the element itself $ ( ’ p#i d ’ ) . remove ( ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
  63. 63. Iterators Iterate over an arbitrary set of elements: 1 $ ( ’ p ’ ) . each ( 2 function () { 3 $ ( t h i s ) . h tm l ( ’<b>Lorem ipsum . . . < / b> ’ ) ; 4 } 5 ); this is mapped to the currently iterated DOM element http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 30
  64. 64. Iterators Iterate over an arbitrary set of elements: 1 $ ( ’ p ’ ) . each ( 2 function () { 3 $ ( t h i s ) . h tm l ( ’<b>Lorem ipsum . . . < / b> ’ ) ; 4 } 5 ); this is mapped to the currently iterated DOM element http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 30
  65. 65. Iterators Iterate over an arbitrary set of elements: 1 $ ( ’ p ’ ) . each ( 2 function () { 3 $ ( t h i s ) . h tm l ( ’<b>Lorem ipsum . . . < / b> ’ ) ; 4 } 5 ); this is mapped to the currently iterated DOM element http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 30
  66. 66. What comes next? Animation http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
  67. 67. Predefined animations jQuery comes with a number of predefined effects Fade in and out elements $ ( ’p ’ ) . fad eIn (1000) ; $ ( ’ p ’ ) . fadeOut (500) ; $ ( ’ p ’ ) . fadeTo ( 8 0 0 , 0 . 5 ) ; Slide in and out $ ( ’p ’ ) . s l i d e I n (1000) ; $ ( ’p ’ ) . slideOut (500) ; $ ( ’p ’ ) . s l i d e T o g g l e (800) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
  68. 68. Predefined animations jQuery comes with a number of predefined effects Fade in and out elements $ ( ’p ’ ) . fad eIn (1000) ; $ ( ’ p ’ ) . fadeOut (500) ; $ ( ’ p ’ ) . fadeTo ( 8 0 0 , 0 . 5 ) ; Slide in and out $ ( ’p ’ ) . s l i d e I n (1000) ; $ ( ’p ’ ) . slideOut (500) ; $ ( ’p ’ ) . s l i d e T o g g l e (800) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
  69. 69. Predefined animations jQuery comes with a number of predefined effects Fade in and out elements $ ( ’p ’ ) . fad eIn (1000) ; $ ( ’ p ’ ) . fadeOut (500) ; $ ( ’ p ’ ) . fadeTo ( 8 0 0 , 0 . 5 ) ; Slide in and out $ ( ’p ’ ) . s l i d e I n (1000) ; $ ( ’p ’ ) . slideOut (500) ; $ ( ’p ’ ) . s l i d e T o g g l e (800) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
  70. 70. Predefined animations Show and hide elements by using a combination of fading and sliding $ ( ’ p ’ ) . show ( 1 0 0 0 ) ; $ ( ’p ’ ) . hide (500) ; $ ( ’p ’ ) . toggle (800) ; Called without the duration time these three effects are instantanious All animation methods can be called with an optional callback executed after the animation finished. http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 30
  71. 71. Predefined animations Show and hide elements by using a combination of fading and sliding $ ( ’ p ’ ) . show ( 1 0 0 0 ) ; $ ( ’p ’ ) . hide (500) ; $ ( ’p ’ ) . toggle (800) ; Called without the duration time these three effects are instantanious All animation methods can be called with an optional callback executed after the animation finished. http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 30
  72. 72. Predefined animations Show and hide elements by using a combination of fading and sliding $ ( ’ p ’ ) . show ( 1 0 0 0 ) ; $ ( ’p ’ ) . hide (500) ; $ ( ’p ’ ) . toggle (800) ; Called without the duration time these three effects are instantanious All animation methods can be called with an optional callback executed after the animation finished. http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 30
  73. 73. Custom animations Use the animate method for custom animations Every numeric property can be animated relative values absolute values 1 $ ( ’ p ’ ) . animate ( 2 { t o p : ’ 100 px ’ , 3 h e i g h t : ’+=50px ’ , 4 o p a c i t y : ’ −=0.5 ’ 5 }, 6 1000 7 ); http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
  74. 74. Custom animations Use the animate method for custom animations Every numeric property can be animated relative values absolute values 1 $ ( ’ p ’ ) . animate ( 2 { t o p : ’ 100 px ’ , 3 h e i g h t : ’+=50px ’ , 4 o p a c i t y : ’ −=0.5 ’ 5 }, 6 1000 7 ); http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
  75. 75. Custom animations Use the animate method for custom animations Every numeric property can be animated relative values absolute values 1 $ ( ’ p ’ ) . animate ( 2 { t o p : ’ 100 px ’ , 3 h e i g h t : ’+=50px ’ , 4 o p a c i t y : ’ −=0.5 ’ 5 }, 6 1000 7 ); http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
  76. 76. Custom animations Use the animate method for custom animations Every numeric property can be animated relative values absolute values 1 $ ( ’ p ’ ) . animate ( 2 { t o p : ’ 100 px ’ , 3 h e i g h t : ’+=50px ’ , 4 o p a c i t y : ’ −=0.5 ’ 5 }, 6 1000 7 ); http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
  77. 77. A small detour: Using the queue jQuery uses a queue to manage it’s animations internally Can be used to synchronize any otherwise aynchrounous operation Queues are associated with DOM objects 1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 2 someAsyncCallWithCallback ( function () { 3 $ ( t h i s ) . dequeue ( ) ; 4 }) 5 }) ; 6 7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 8 /∗ . . . ∗/ 9 }) ; Always used $(this).dequeue() to keep the queue running http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
  78. 78. A small detour: Using the queue jQuery uses a queue to manage it’s animations internally Can be used to synchronize any otherwise aynchrounous operation Queues are associated with DOM objects 1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 2 someAsyncCallWithCallback ( function () { 3 $ ( t h i s ) . dequeue ( ) ; 4 }) 5 }) ; 6 7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 8 /∗ . . . ∗/ 9 }) ; Always used $(this).dequeue() to keep the queue running http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
  79. 79. A small detour: Using the queue jQuery uses a queue to manage it’s animations internally Can be used to synchronize any otherwise aynchrounous operation Queues are associated with DOM objects 1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 2 someAsyncCallWithCallback ( function () { 3 $ ( t h i s ) . dequeue ( ) ; 4 }) 5 }) ; 6 7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 8 /∗ . . . ∗/ 9 }) ; Always used $(this).dequeue() to keep the queue running http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
  80. 80. A small detour: Using the queue jQuery uses a queue to manage it’s animations internally Can be used to synchronize any otherwise aynchrounous operation Queues are associated with DOM objects 1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 2 someAsyncCallWithCallback ( function () { 3 $ ( t h i s ) . dequeue ( ) ; 4 }) 5 }) ; 6 7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 8 /∗ . . . ∗/ 9 }) ; Always used $(this).dequeue() to keep the queue running http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
  81. 81. A small detour: Using the queue jQuery uses a queue to manage it’s animations internally Can be used to synchronize any otherwise aynchrounous operation Queues are associated with DOM objects 1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 2 someAsyncCallWithCallback ( function () { 3 $ ( t h i s ) . dequeue ( ) ; 4 }) 5 }) ; 6 7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) { 8 /∗ . . . ∗/ 9 }) ; Always used $(this).dequeue() to keep the queue running http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
  82. 82. What comes next? Events http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
  83. 83. Event handling basics Event abstraction to not rely on browser specific behaviour Generic event binding/unbinding methods Shortcut helper methods for different events Live event binding (event delegation) Event namespaces http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
  84. 84. Event handling basics Event abstraction to not rely on browser specific behaviour Generic event binding/unbinding methods Shortcut helper methods for different events Live event binding (event delegation) Event namespaces http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
  85. 85. Event handling basics Event abstraction to not rely on browser specific behaviour Generic event binding/unbinding methods Shortcut helper methods for different events Live event binding (event delegation) Event namespaces http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
  86. 86. Event handling basics Event abstraction to not rely on browser specific behaviour Generic event binding/unbinding methods Shortcut helper methods for different events Live event binding (event delegation) Event namespaces http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
  87. 87. Event handling basics Event abstraction to not rely on browser specific behaviour Generic event binding/unbinding methods Shortcut helper methods for different events Live event binding (event delegation) Event namespaces http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
  88. 88. Generic event handling Register an event handler for a specific element $ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ; Remove a registered event handler $ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ; Register event handler for one time execution $ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ; Trigger an event and all of its event handlers $( ’p ’ ) . trigger (” click ”) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
  89. 89. Generic event handling Register an event handler for a specific element $ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ; Remove a registered event handler $ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ; Register event handler for one time execution $ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ; Trigger an event and all of its event handlers $( ’p ’ ) . trigger (” click ”) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
  90. 90. Generic event handling Register an event handler for a specific element $ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ; Remove a registered event handler $ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ; Register event handler for one time execution $ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ; Trigger an event and all of its event handlers $( ’p ’ ) . trigger (” click ”) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
  91. 91. Generic event handling Register an event handler for a specific element $ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ; Remove a registered event handler $ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ; Register event handler for one time execution $ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ; Trigger an event and all of its event handlers $( ’p ’ ) . trigger (” click ”) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
  92. 92. Event object abstraction Event object always send to event handler No need for window.event Normalized according to W3C standard (jQuery.Event) function handler ( event ) { event . type ; event . target ; e v e n t . pageX ; e v e n t . pageY ; /∗ . . . ∗/ event . preventDefault () ; event . stopPropagation () ; /∗ . . . ∗/ } http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 30
  93. 93. Event object abstraction Event object always send to event handler No need for window.event Normalized according to W3C standard (jQuery.Event) function handler ( event ) { event . type ; event . target ; e v e n t . pageX ; e v e n t . pageY ; /∗ . . . ∗/ event . preventDefault () ; event . stopPropagation () ; /∗ . . . ∗/ } http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 30
  94. 94. Event object abstraction Event object always send to event handler No need for window.event Normalized according to W3C standard (jQuery.Event) function handler ( event ) { event . type ; event . target ; e v e n t . pageX ; e v e n t . pageY ; /∗ . . . ∗/ event . preventDefault () ; event . stopPropagation () ; /∗ . . . ∗/ } http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 30
  95. 95. Event helper Helper methods for common tasks Shortcut methods for all kinds of events $ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ; d b l c l i c k , keydown , keyup , mousedown , m o u s e e n t e r , mousemove , s c r o l l , . . . Often needed functionality $ ( ’ p ’ ) . hover ( over , out ) ; $ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
  96. 96. Event helper Helper methods for common tasks Shortcut methods for all kinds of events $ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ; d b l c l i c k , keydown , keyup , mousedown , m o u s e e n t e r , mousemove , s c r o l l , . . . Often needed functionality $ ( ’ p ’ ) . hover ( over , out ) ; $ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
  97. 97. Event helper Helper methods for common tasks Shortcut methods for all kinds of events $ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ; d b l c l i c k , keydown , keyup , mousedown , m o u s e e n t e r , mousemove , s c r o l l , . . . Often needed functionality $ ( ’ p ’ ) . hover ( over , out ) ; $ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
  98. 98. Event helper Helper methods for common tasks Shortcut methods for all kinds of events $ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ; d b l c l i c k , keydown , keyup , mousedown , m o u s e e n t e r , mousemove , s c r o l l , . . . Often needed functionality $ ( ’ p ’ ) . hover ( over , out ) ; $ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
  99. 99. Live events Bind event handlers to items which do not exist yet $( ’p ’ ) . l i v e (” click ” , function (e) { $ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ; }) ; Remove live event handlers again $( ’p ’ ) . die (” click ”) ; live and die are using event delegation, which enhances performance with big element counts http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
  100. 100. Live events Bind event handlers to items which do not exist yet $( ’p ’ ) . l i v e (” click ” , function (e) { $ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ; }) ; Remove live event handlers again $( ’p ’ ) . die (” click ”) ; live and die are using event delegation, which enhances performance with big element counts http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
  101. 101. Live events Bind event handlers to items which do not exist yet $( ’p ’ ) . l i v e (” click ” , function (e) { $ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ; }) ; Remove live event handlers again $( ’p ’ ) . die (” click ”) ; live and die are using event delegation, which enhances performance with big element counts http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
  102. 102. Live events Bind event handlers to items which do not exist yet $( ’p ’ ) . l i v e (” click ” , function (e) { $ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ; }) ; Remove live event handlers again $( ’p ’ ) . die (” click ”) ; live and die are using event delegation, which enhances performance with big element counts http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
  103. 103. Live events Bind event handlers to items which do not exist yet $( ’p ’ ) . l i v e (” click ” , function (e) { $ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ; }) ; Remove live event handlers again $( ’p ’ ) . die (” click ”) ; live and die are using event delegation, which enhances performance with big element counts http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
  104. 104. Event namespaces To safely unbind events you need their callback function jQuery event namespaces solve this problem really elegant $ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) { /∗ . . . ∗/ }) ; Unbinding the click event: $ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ; Unbinding all events in a namespace: $ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
  105. 105. Event namespaces To safely unbind events you need their callback function jQuery event namespaces solve this problem really elegant $ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) { /∗ . . . ∗/ }) ; Unbinding the click event: $ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ; Unbinding all events in a namespace: $ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
  106. 106. Event namespaces To safely unbind events you need their callback function jQuery event namespaces solve this problem really elegant $ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) { /∗ . . . ∗/ }) ; Unbinding the click event: $ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ; Unbinding all events in a namespace: $ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
  107. 107. Event namespaces To safely unbind events you need their callback function jQuery event namespaces solve this problem really elegant $ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) { /∗ . . . ∗/ }) ; Unbinding the click event: $ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ; Unbinding all events in a namespace: $ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
  108. 108. Event namespaces To safely unbind events you need their callback function jQuery event namespaces solve this problem really elegant $ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) { /∗ . . . ∗/ }) ; Unbinding the click event: $ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ; Unbinding all events in a namespace: $ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ; http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
  109. 109. What comes next? Ajax http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
  110. 110. Shortcuts for AJAX requests Load external HTML directly: $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” ) Fire a HTTP GET request: $ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Fire a HTTP POST request: $ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Load and execute a remote <script>: $ . getScript (” somescript . js ” , [ callback ]) ; Callback functions are only executed on success http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
  111. 111. Shortcuts for AJAX requests Load external HTML directly: $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” ) Fire a HTTP GET request: $ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Fire a HTTP POST request: $ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Load and execute a remote <script>: $ . getScript (” somescript . js ” , [ callback ]) ; Callback functions are only executed on success http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
  112. 112. Shortcuts for AJAX requests Load external HTML directly: $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” ) Fire a HTTP GET request: $ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Fire a HTTP POST request: $ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Load and execute a remote <script>: $ . getScript (” somescript . js ” , [ callback ]) ; Callback functions are only executed on success http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
  113. 113. Shortcuts for AJAX requests Load external HTML directly: $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” ) Fire a HTTP GET request: $ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Fire a HTTP POST request: $ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Load and execute a remote <script>: $ . getScript (” somescript . js ” , [ callback ]) ; Callback functions are only executed on success http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
  114. 114. Shortcuts for AJAX requests Load external HTML directly: $ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” ) Fire a HTTP GET request: $ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Fire a HTTP POST request: $ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ; Load and execute a remote <script>: $ . getScript (” somescript . js ” , [ callback ]) ; Callback functions are only executed on success http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
  115. 115. Advanced AJAX requests Manual complex AJAX requests are possible 1 $ . a j a x ({ 2 u r l : /∗ R e q u e s t u r l ∗/ , 3 beforeSend : f u n c t i o n ( xhr ) {} , 4 complete : f u n c t i o n ( xhr ) {} , 5 s u c c e s s : f u n c t i o n ( code ) {} , 6 e r r o r : f u n c t i o n ( xhr , s t a t u s , e r r o r ) { } , 7 ... 8 }) ; Other possible options are: async, cache, contentType, data, dataFilter, dataType, global, ifModified, jsonp, password, processData, scriptCharset, type, username, xhr http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 30
  116. 116. Advanced AJAX requests Manual complex AJAX requests are possible 1 $ . a j a x ({ 2 u r l : /∗ R e q u e s t u r l ∗/ , 3 beforeSend : f u n c t i o n ( xhr ) {} , 4 complete : f u n c t i o n ( xhr ) {} , 5 s u c c e s s : f u n c t i o n ( code ) {} , 6 e r r o r : f u n c t i o n ( xhr , s t a t u s , e r r o r ) { } , 7 ... 8 }) ; Other possible options are: async, cache, contentType, data, dataFilter, dataType, global, ifModified, jsonp, password, processData, scriptCharset, type, username, xhr http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 30
  117. 117. Advanced AJAX requests Manual complex AJAX requests are possible 1 $ . a j a x ({ 2 u r l : /∗ R e q u e s t u r l ∗/ , 3 beforeSend : f u n c t i o n ( xhr ) {} , 4 complete : f u n c t i o n ( xhr ) {} , 5 s u c c e s s : f u n c t i o n ( code ) {} , 6 e r r o r : f u n c t i o n ( xhr , s t a t u s , e r r o r ) { } , 7 ... 8 }) ; Other possible options are: async, cache, contentType, data, dataFilter, dataType, global, ifModified, jsonp, password, processData, scriptCharset, type, username, xhr http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 30
  118. 118. Thanks for listening Questions, comments or annotations? Slides: http://slideshare.net Contact: Jakob Westhoff <jakob@php.net> http://westhoffswelt.de @jakobwesthoff Bastian Feder <php@bastian-feder.de http://bastian-feder.de @lapistano http://westhoffswelt.de jakob@westhoffswelt.de slide: 30 / 30

×