bubbles and trees with jquery
DESCRIPTION
jQuery introduction talk covering the basics as well as some less known features like event namespaces and queueing.TRANSCRIPT
![Page 1: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/1.jpg)
Bubbles and trees with jQueryWeb 2.0 made easy
Bastian Feder <[email protected]>Jakob Westhoff <[email protected]>
WebtechConNovember 18, 2009
http://westhoffswelt.de [email protected] slide: 1 / 30
![Page 2: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/2.jpg)
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 [email protected] slide: 2 / 30
![Page 3: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/3.jpg)
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 [email protected] slide: 2 / 30
![Page 4: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/4.jpg)
Goals of this session
You will learn about:
jQuery basics and need to know factsEffects and animationEvent-handling mechanismsAsynchronous request handling (AJAX)
http://westhoffswelt.de [email protected] slide: 3 / 30
![Page 5: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/5.jpg)
Goals of this session
You will learn about:
jQuery basics and need to know factsEffects and animationEvent-handling mechanismsAsynchronous request handling (AJAX)
http://westhoffswelt.de [email protected] slide: 3 / 30
![Page 6: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/6.jpg)
Goals of this session
You will learn about:
jQuery basics and need to know factsEffects and animationEvent-handling mechanismsAsynchronous request handling (AJAX)
http://westhoffswelt.de [email protected] slide: 3 / 30
![Page 7: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/7.jpg)
Goals of this session
You will learn about:
jQuery basics and need to know factsEffects and animationEvent-handling mechanismsAsynchronous request handling (AJAX)
http://westhoffswelt.de [email protected] slide: 3 / 30
![Page 8: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/8.jpg)
Goals of this session
You will learn about:
jQuery basics and need to know factsEffects and animationEvent-handling mechanismsAsynchronous request handling (AJAX)
http://westhoffswelt.de [email protected] slide: 3 / 30
![Page 9: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/9.jpg)
jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifiesHTML document traversing, event handling, animating, and Ajaxinteractions for rapid web development. jQuery is designed tochange the way that you write JavaScript.
http://westhoffswelt.de [email protected] slide: 4 / 30
![Page 10: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/10.jpg)
jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifiesHTML document traversing, event handling, animating, and Ajaxinteractions for rapid web development. jQuery is designed tochange the way that you write JavaScript.
http://westhoffswelt.de [email protected] slide: 4 / 30
![Page 11: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/11.jpg)
jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifiesHTML document traversing, event handling, animating, and Ajaxinteractions for rapid web development. jQuery is designed tochange the way that you write JavaScript.
http://westhoffswelt.de [email protected] slide: 4 / 30
![Page 12: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/12.jpg)
jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifiesHTML document traversing, event handling, animating, and Ajaxinteractions for rapid web development. jQuery is designed tochange the way that you write JavaScript.
http://westhoffswelt.de [email protected] slide: 4 / 30
![Page 13: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/13.jpg)
jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifiesHTML document traversing, event handling, animating, and Ajaxinteractions for rapid web development. jQuery is designed tochange the way that you write JavaScript.
http://westhoffswelt.de [email protected] slide: 4 / 30
![Page 14: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/14.jpg)
Introduction to jQuery
Compact
only 56kb minified19kb minified and gzipped
Cross-browser compatible
Internet Explorer 6.0+Firefox 2+Safari 3.0+Opera 9.0+Chrome
Easily extendable
http://westhoffswelt.de [email protected] slide: 5 / 30
![Page 15: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/15.jpg)
Introduction to jQuery
Compact
only 56kb minified19kb minified and gzipped
Cross-browser compatible
Internet Explorer 6.0+Firefox 2+Safari 3.0+Opera 9.0+Chrome
Easily extendable
http://westhoffswelt.de [email protected] slide: 5 / 30
![Page 16: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/16.jpg)
Introduction to jQuery
Compact
only 56kb minified19kb minified and gzipped
Cross-browser compatible
Internet Explorer 6.0+Firefox 2+Safari 3.0+Opera 9.0+Chrome
Easily extendable
http://westhoffswelt.de [email protected] slide: 5 / 30
![Page 17: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/17.jpg)
jQuery Example
$ ( ”p#example ” ) . addC la s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s low ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de [email protected] slide: 6 / 30
![Page 18: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/18.jpg)
jQuery Example
$ ( ”p#example ” ) . addC la s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s low ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de [email protected] slide: 6 / 30
![Page 19: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/19.jpg)
jQuery Example
$ ( ”p#example ” ) . addC la s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s low ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de [email protected] slide: 6 / 30
![Page 20: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/20.jpg)
jQuery Example
$ ( ”p#example ” ) . addC la s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s low ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de [email protected] slide: 6 / 30
![Page 22: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/22.jpg)
DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r eady (f u n c t i o n ( ) { . . . }
) ;
Get the document object extended with jQuery functionality
Register an event handler executed once the document isloaded
http://westhoffswelt.de [email protected] slide: 7 / 30
![Page 23: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/23.jpg)
DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r eady (f u n c t i o n ( ) { . . . }
) ;
Get the document object extended with jQuery functionality
Register an event handler executed once the document isloaded
http://westhoffswelt.de [email protected] slide: 7 / 30
![Page 24: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/24.jpg)
DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r eady (f u n c t i o n ( ) { . . . }
) ;
Get the document object extended with jQuery functionality
Register an event handler executed once the document isloaded
http://westhoffswelt.de [email protected] slide: 7 / 30
![Page 25: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/25.jpg)
DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r eady (f u n c t i o n ( ) { . . . }
) ;
Get the document object extended with jQuery functionality
Register an event handler executed once the document isloaded
http://westhoffswelt.de [email protected] slide: 7 / 30
![Page 26: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/26.jpg)
DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r eady (f u n c t i o n ( ) { . . . }
) ;
Get the document object extended with jQuery functionality
Register an event handler executed once the document isloaded
http://westhoffswelt.de [email protected] slide: 7 / 30
![Page 27: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/27.jpg)
Interoperability
Different Javascript libs use $ as a shortcut
jQuery allows to rename its $ shortcut
http://westhoffswelt.de [email protected] slide: 8 / 30
![Page 28: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/28.jpg)
Interoperability
Different Javascript libs use $ as a shortcut
jQuery allows to rename its $ shortcut
http://westhoffswelt.de [email protected] slide: 8 / 30
![Page 29: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/29.jpg)
Interoperability - Example
Include jQuery after other libraries
1 <s c r i p t s r c=” p ro t o t yp e . j s ”></ s c r i p t>2 <s c r i p t s r c=” jQuery . j s ”></ s c r i p t>
Use its noConflict function
1 va r $ j = jQuery . n oC o n f l i c t ( ) ;23 // Use jQuery4 $ j ( someElement ) . someFunct ion ( ) ;56 // Use p r o t o t yp e7 $ ( someElement ) . someFunct ion ( ) ;
http://westhoffswelt.de [email protected] slide: 9 / 30
![Page 30: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/30.jpg)
Interoperability - Example
Include jQuery after other libraries
1 <s c r i p t s r c=” p ro t o t yp e . j s ”></ s c r i p t>2 <s c r i p t s r c=” jQuery . j s ”></ s c r i p t>
Use its noConflict function
1 va r $ j = jQuery . n oC o n f l i c t ( ) ;23 // Use jQuery4 $ j ( someElement ) . someFunct ion ( ) ;56 // Use p r o t o t yp e7 $ ( someElement ) . someFunct ion ( ) ;
http://westhoffswelt.de [email protected] slide: 9 / 30
![Page 31: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/31.jpg)
Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )2 . addC la s s ( ’ r ed ’ )3 . c s s ( ’ t ex t−we ight ’ , ’ bo ld ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )2 . pa r en t ( )3 . addC la s s ( ’ neat ’ )4 . pa r en t ( )5 . addC la s s ( ’ f ancy ’ )6 . end ( )7 . end ( )8 . addC la s s ( ’ r ed ’ )
http://westhoffswelt.de [email protected] slide: 10 / 30
![Page 32: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/32.jpg)
Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )2 . addC la s s ( ’ r ed ’ )3 . c s s ( ’ t ex t−we ight ’ , ’ bo ld ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )2 . pa r en t ( )3 . addC la s s ( ’ neat ’ )4 . pa r en t ( )5 . addC la s s ( ’ f ancy ’ )6 . end ( )7 . end ( )8 . addC la s s ( ’ r ed ’ )
http://westhoffswelt.de [email protected] slide: 10 / 30
![Page 33: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/33.jpg)
Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )2 . addC la s s ( ’ r ed ’ )3 . c s s ( ’ t ex t−we ight ’ , ’ bo ld ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )2 . pa r en t ( )3 . addC la s s ( ’ neat ’ )4 . pa r en t ( )5 . addC la s s ( ’ f ancy ’ )6 . end ( )7 . end ( )8 . addC la s s ( ’ r ed ’ )
http://westhoffswelt.de [email protected] slide: 10 / 30
![Page 34: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/34.jpg)
Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )2 . addC la s s ( ’ r ed ’ )3 . c s s ( ’ t ex t−we ight ’ , ’ bo ld ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )2 . pa r en t ( )3 . addC la s s ( ’ neat ’ )4 . pa r en t ( )5 . addC la s s ( ’ f ancy ’ )6 . end ( )7 . end ( )8 . addC la s s ( ’ r ed ’ )
http://westhoffswelt.de [email protected] slide: 10 / 30
![Page 35: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/35.jpg)
CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l ement ’ )
Hierarchical
$ ( ’ a n c e s t o r de scendant ’ ) , $ ( ’ pa r en t > c h i l d ’ )
Filters
$ ( ’ p : f i r s t ’ ) , $ ( ’ d i v : v i s i b l e ’ ) , $ ( ’ ∗ : heade r ’ )
Many more
$ ( ’ d i v : has ( img . thumbna i l [ s r c $ =.png ] : not ( : h idden ) ) ’ )
http://westhoffswelt.de [email protected] slide: 11 / 30
![Page 36: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/36.jpg)
CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l ement ’ )
Hierarchical
$ ( ’ a n c e s t o r de scendant ’ ) , $ ( ’ pa r en t > c h i l d ’ )
Filters
$ ( ’ p : f i r s t ’ ) , $ ( ’ d i v : v i s i b l e ’ ) , $ ( ’ ∗ : heade r ’ )
Many more
$ ( ’ d i v : has ( img . thumbna i l [ s r c $ =.png ] : not ( : h idden ) ) ’ )
http://westhoffswelt.de [email protected] slide: 11 / 30
![Page 37: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/37.jpg)
CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l ement ’ )
Hierarchical
$ ( ’ a n c e s t o r de scendant ’ ) , $ ( ’ pa r en t > c h i l d ’ )
Filters
$ ( ’ p : f i r s t ’ ) , $ ( ’ d i v : v i s i b l e ’ ) , $ ( ’ ∗ : heade r ’ )
Many more
$ ( ’ d i v : has ( img . thumbna i l [ s r c $ =.png ] : not ( : h idden ) ) ’ )
http://westhoffswelt.de [email protected] slide: 11 / 30
![Page 38: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/38.jpg)
CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l ement ’ )
Hierarchical
$ ( ’ a n c e s t o r de scendant ’ ) , $ ( ’ pa r en t > c h i l d ’ )
Filters
$ ( ’ p : f i r s t ’ ) , $ ( ’ d i v : v i s i b l e ’ ) , $ ( ’ ∗ : heade r ’ )
Many more
$ ( ’ d i v : has ( img . thumbna i l [ s r c $ =.png ] : not ( : h idden ) ) ’ )
http://westhoffswelt.de [email protected] slide: 11 / 30
![Page 39: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/39.jpg)
DOM Manipulation
1 Select the nodes to work with:
$ ( ’ p > d i v ’ )
2 Use DOM manipulation functions on it
Insert nodesChange contentReplace nodesRemove nodes
http://westhoffswelt.de [email protected] slide: 12 / 30
![Page 40: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/40.jpg)
DOM Manipulation
1 Select the nodes to work with:
$ ( ’ p > d i v ’ )
2 Use DOM manipulation functions on it
Insert nodesChange contentReplace nodesRemove nodes
http://westhoffswelt.de [email protected] slide: 12 / 30
![Page 41: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/41.jpg)
DOM Manipulation
1 Select the nodes to work with:
$ ( ’ p > d i v ’ )
2 Use DOM manipulation functions on it
Insert nodesChange contentReplace nodesRemove nodes
http://westhoffswelt.de [email protected] slide: 12 / 30
![Page 42: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/42.jpg)
DOM Manipulation
1 Select the nodes to work with:
$ ( ’ p > d i v ’ )
2 Use DOM manipulation functions on it
Insert nodesChange contentReplace nodesRemove nodes
http://westhoffswelt.de [email protected] slide: 12 / 30
![Page 43: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/43.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 44: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/44.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 45: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/45.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 46: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/46.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 47: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/47.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 48: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/48.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 49: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/49.jpg)
Insert nodes
Inside
. append ( con t en t )
. prepend ( con t en t )
Outside
. a f t e r ( con t en t )
. b e f o r e ( con t en t )
Around
. wrap ( con t en t )
. w rapA l l ( con t en t )
content may be a HTML snippet, a jQuery object or a DOMnode
http://westhoffswelt.de [email protected] slide: 13 / 30
![Page 50: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/50.jpg)
Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f ooba r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . html ( ’<b>foo </b>bar ’ ) ;
http://westhoffswelt.de [email protected] slide: 14 / 30
![Page 51: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/51.jpg)
Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f ooba r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . html ( ’<b>foo </b>bar ’ ) ;
http://westhoffswelt.de [email protected] slide: 14 / 30
![Page 52: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/52.jpg)
Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f ooba r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . html ( ’<b>foo </b>bar ’ ) ;
http://westhoffswelt.de [email protected] slide: 14 / 30
![Page 53: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/53.jpg)
Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f ooba r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . html ( ’<b>foo </b>bar ’ ) ;
http://westhoffswelt.de [email protected] slide: 14 / 30
![Page 54: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/54.jpg)
Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r ep l a c eWi th ( ’<d iv>foobar </d iv> ’ ) ;
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 thecontents of p#id
http://westhoffswelt.de [email protected] slide: 15 / 30
![Page 55: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/55.jpg)
Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r ep l a c eWi th ( ’<d iv>foobar </d iv> ’ ) ;
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 thecontents of p#id
http://westhoffswelt.de [email protected] slide: 15 / 30
![Page 56: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/56.jpg)
Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r ep l a c eWi th ( ’<d iv>foobar </d iv> ’ ) ;
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 thecontents of p#id
http://westhoffswelt.de [email protected] slide: 15 / 30
![Page 57: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/57.jpg)
Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r ep l a c eWi th ( ’<d iv>foobar </d iv> ’ ) ;
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 thecontents of p#id
http://westhoffswelt.de [email protected] slide: 15 / 30
![Page 58: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/58.jpg)
Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r ep l a c eWi th ( ’<d iv>foobar </d iv> ’ ) ;
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 thecontents of p#id
http://westhoffswelt.de [email protected] slide: 15 / 30
![Page 59: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/59.jpg)
Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de [email protected] slide: 16 / 30
![Page 60: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/60.jpg)
Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de [email protected] slide: 16 / 30
![Page 61: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/61.jpg)
Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de [email protected] slide: 16 / 30
![Page 62: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/62.jpg)
Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de [email protected] slide: 16 / 30
![Page 63: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/63.jpg)
Iterators
Iterate over an arbitrary set of elements:
1 $ ( ’ p ’ ) . each (2 f u n c t i o n ( ) {3 $ ( t h i s ) . html ( ’<b>Lorem ipsum . . . </ b> ’ ) ;4 }5 ) ;
this is mapped to the currently iterated DOM element
http://westhoffswelt.de [email protected] slide: 17 / 30
![Page 64: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/64.jpg)
Iterators
Iterate over an arbitrary set of elements:
1 $ ( ’ p ’ ) . each (2 f u n c t i o n ( ) {3 $ ( t h i s ) . html ( ’<b>Lorem ipsum . . . </ b> ’ ) ;4 }5 ) ;
this is mapped to the currently iterated DOM element
http://westhoffswelt.de [email protected] slide: 17 / 30
![Page 65: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/65.jpg)
Iterators
Iterate over an arbitrary set of elements:
1 $ ( ’ p ’ ) . each (2 f u n c t i o n ( ) {3 $ ( t h i s ) . html ( ’<b>Lorem ipsum . . . </ b> ’ ) ;4 }5 ) ;
this is mapped to the currently iterated DOM element
http://westhoffswelt.de [email protected] slide: 17 / 30
![Page 67: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/67.jpg)
Predefined animations
jQuery comes with a number of predefined effects
Fade in and out elements
$ ( ’ p ’ ) . f a d e I n (1000) ;$ ( ’ p ’ ) . fadeOut (500) ;$ ( ’ p ’ ) . fadeTo (800 , 0 . 5 ) ;
Slide in and out
$ ( ’ p ’ ) . s l i d e I n (1000) ;$ ( ’ p ’ ) . s l i d eOu t (500) ;$ ( ’ p ’ ) . s l i d eT o g g l e (800) ;
http://westhoffswelt.de [email protected] slide: 18 / 30
![Page 68: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/68.jpg)
Predefined animations
jQuery comes with a number of predefined effects
Fade in and out elements
$ ( ’ p ’ ) . f a d e I n (1000) ;$ ( ’ p ’ ) . fadeOut (500) ;$ ( ’ p ’ ) . fadeTo (800 , 0 . 5 ) ;
Slide in and out
$ ( ’ p ’ ) . s l i d e I n (1000) ;$ ( ’ p ’ ) . s l i d eOu t (500) ;$ ( ’ p ’ ) . s l i d eT o g g l e (800) ;
http://westhoffswelt.de [email protected] slide: 18 / 30
![Page 69: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/69.jpg)
Predefined animations
jQuery comes with a number of predefined effects
Fade in and out elements
$ ( ’ p ’ ) . f a d e I n (1000) ;$ ( ’ p ’ ) . fadeOut (500) ;$ ( ’ p ’ ) . fadeTo (800 , 0 . 5 ) ;
Slide in and out
$ ( ’ p ’ ) . s l i d e I n (1000) ;$ ( ’ p ’ ) . s l i d eOu t (500) ;$ ( ’ p ’ ) . s l i d eT o g g l e (800) ;
http://westhoffswelt.de [email protected] slide: 18 / 30
![Page 70: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/70.jpg)
Predefined animations
Show and hide elements by using a combination of fading andsliding
$ ( ’ p ’ ) . show (1000) ;$ ( ’ p ’ ) . h i d e (500) ;$ ( ’ p ’ ) . t o g g l e (800) ;
Called without the duration time these three effects areinstantanious
All animation methods can be called with an optional callbackexecuted after the animation finished.
http://westhoffswelt.de [email protected] slide: 19 / 30
![Page 71: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/71.jpg)
Predefined animations
Show and hide elements by using a combination of fading andsliding
$ ( ’ p ’ ) . show (1000) ;$ ( ’ p ’ ) . h i d e (500) ;$ ( ’ p ’ ) . t o g g l e (800) ;
Called without the duration time these three effects areinstantanious
All animation methods can be called with an optional callbackexecuted after the animation finished.
http://westhoffswelt.de [email protected] slide: 19 / 30
![Page 72: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/72.jpg)
Predefined animations
Show and hide elements by using a combination of fading andsliding
$ ( ’ p ’ ) . show (1000) ;$ ( ’ p ’ ) . h i d e (500) ;$ ( ’ p ’ ) . t o g g l e (800) ;
Called without the duration time these three effects areinstantanious
All animation methods can be called with an optional callbackexecuted after the animation finished.
http://westhoffswelt.de [email protected] slide: 19 / 30
![Page 73: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/73.jpg)
Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative valuesabsolute values
1 $ ( ’ p ’ ) . an imate (2 { top : ’ 100px ’ ,3 h e i g h t : ’+=50px ’ ,4 o p a c i t y : ’−=0.5 ’5 } ,6 10007 ) ;
http://westhoffswelt.de [email protected] slide: 20 / 30
![Page 74: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/74.jpg)
Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative valuesabsolute values
1 $ ( ’ p ’ ) . an imate (2 { top : ’ 100px ’ ,3 h e i g h t : ’+=50px ’ ,4 o p a c i t y : ’−=0.5 ’5 } ,6 10007 ) ;
http://westhoffswelt.de [email protected] slide: 20 / 30
![Page 75: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/75.jpg)
Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative valuesabsolute values
1 $ ( ’ p ’ ) . an imate (2 { top : ’ 100px ’ ,3 h e i g h t : ’+=50px ’ ,4 o p a c i t y : ’−=0.5 ’5 } ,6 10007 ) ;
http://westhoffswelt.de [email protected] slide: 20 / 30
![Page 76: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/76.jpg)
Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative valuesabsolute values
1 $ ( ’ p ’ ) . an imate (2 { top : ’ 100px ’ ,3 h e i g h t : ’+=50px ’ ,4 o p a c i t y : ’−=0.5 ’5 } ,6 10007 ) ;
http://westhoffswelt.de [email protected] slide: 20 / 30
![Page 77: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/77.jpg)
A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounousoperation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {2 someAsyncCa l lWi thCa l lback ( f u n c t i o n ( ) {3 $ ( t h i s ) . dequeue ( ) ;4 })5 }) ;67 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {8 /∗ . . . ∗/9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de [email protected] slide: 21 / 30
![Page 78: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/78.jpg)
A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounousoperation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {2 someAsyncCa l lWi thCa l lback ( f u n c t i o n ( ) {3 $ ( t h i s ) . dequeue ( ) ;4 })5 }) ;67 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {8 /∗ . . . ∗/9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de [email protected] slide: 21 / 30
![Page 79: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/79.jpg)
A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounousoperation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {2 someAsyncCa l lWi thCa l lback ( f u n c t i o n ( ) {3 $ ( t h i s ) . dequeue ( ) ;4 })5 }) ;67 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {8 /∗ . . . ∗/9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de [email protected] slide: 21 / 30
![Page 80: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/80.jpg)
A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounousoperation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {2 someAsyncCa l lWi thCa l lback ( f u n c t i o n ( ) {3 $ ( t h i s ) . dequeue ( ) ;4 })5 }) ;67 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {8 /∗ . . . ∗/9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de [email protected] slide: 21 / 30
![Page 81: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/81.jpg)
A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounousoperation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {2 someAsyncCa l lWi thCa l lback ( f u n c t i o n ( ) {3 $ ( t h i s ) . dequeue ( ) ;4 })5 }) ;67 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {8 /∗ . . . ∗/9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de [email protected] slide: 21 / 30
![Page 83: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/83.jpg)
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 [email protected] slide: 22 / 30
![Page 84: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/84.jpg)
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 [email protected] slide: 22 / 30
![Page 85: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/85.jpg)
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 [email protected] slide: 22 / 30
![Page 86: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/86.jpg)
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 [email protected] slide: 22 / 30
![Page 87: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/87.jpg)
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 [email protected] slide: 22 / 30
![Page 88: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/88.jpg)
Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . b ind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unb ind ( ’ 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 ’ ) . t r i g g e r ( ” c l i c k ” ) ;
http://westhoffswelt.de [email protected] slide: 23 / 30
![Page 89: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/89.jpg)
Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . b ind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unb ind ( ’ 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 ’ ) . t r i g g e r ( ” c l i c k ” ) ;
http://westhoffswelt.de [email protected] slide: 23 / 30
![Page 90: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/90.jpg)
Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . b ind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unb ind ( ’ 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 ’ ) . t r i g g e r ( ” c l i c k ” ) ;
http://westhoffswelt.de [email protected] slide: 23 / 30
![Page 91: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/91.jpg)
Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . b ind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unb ind ( ’ 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 ’ ) . t r i g g e r ( ” c l i c k ” ) ;
http://westhoffswelt.de [email protected] slide: 23 / 30
![Page 92: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/92.jpg)
Event object abstraction
Event object always send to event handler
No need for window.event
Normalized according to W3C standard (jQuery.Event)
f u n c t i o n hand l e r ( even t ) {even t . t ype ;even t . t a r g e t ;e ven t . pageX ;even t . pageY ;/∗ . . . ∗/
even t . p r e v e n tDe f a u l t ( ) ;e ven t . s t opP ropaga t i on ( ) ;/∗ . . . ∗/
}
http://westhoffswelt.de [email protected] slide: 24 / 30
![Page 93: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/93.jpg)
Event object abstraction
Event object always send to event handler
No need for window.event
Normalized according to W3C standard (jQuery.Event)
f u n c t i o n hand l e r ( even t ) {even t . t ype ;even t . t a r g e t ;e ven t . pageX ;even t . pageY ;/∗ . . . ∗/
even t . p r e v e n tDe f a u l t ( ) ;e ven t . s t opP ropaga t i on ( ) ;/∗ . . . ∗/
}
http://westhoffswelt.de [email protected] slide: 24 / 30
![Page 94: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/94.jpg)
Event object abstraction
Event object always send to event handler
No need for window.event
Normalized according to W3C standard (jQuery.Event)
f u n c t i o n hand l e r ( even t ) {even t . t ype ;even t . t a r g e t ;e ven t . pageX ;even t . pageY ;/∗ . . . ∗/
even t . p r e v e n tDe f a u l t ( ) ;e ven t . s t opP ropaga t i on ( ) ;/∗ . . . ∗/
}
http://westhoffswelt.de [email protected] slide: 24 / 30
![Page 95: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/95.jpg)
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 ,mouseenter , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hove r ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , . . . ) ;
http://westhoffswelt.de [email protected] slide: 25 / 30
![Page 96: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/96.jpg)
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 ,mouseenter , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hove r ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , . . . ) ;
http://westhoffswelt.de [email protected] slide: 25 / 30
![Page 97: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/97.jpg)
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 ,mouseenter , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hove r ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , . . . ) ;
http://westhoffswelt.de [email protected] slide: 25 / 30
![Page 98: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/98.jpg)
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 ,mouseenter , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hove r ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , . . . ) ;
http://westhoffswelt.de [email protected] slide: 25 / 30
![Page 99: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/99.jpg)
Live events
Bind event handlers to items which do not exist yet
$ ( ’ p ’ ) . l i v e ( ” c l i c k ” , f u n c t i o n ( e ) {$ ( t h i s ) . c s s ( ’ background−c o l o r ’ , ’ r ed ’ ) ;
}) ;
Remove live event handlers again
$ ( ’ p ’ ) . d i e ( ” c l i c k ” ) ;
live and die are using event delegation, which enhancesperformance with big element counts
http://westhoffswelt.de [email protected] slide: 26 / 30
![Page 100: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/100.jpg)
Live events
Bind event handlers to items which do not exist yet
$ ( ’ p ’ ) . l i v e ( ” c l i c k ” , f u n c t i o n ( e ) {$ ( t h i s ) . c s s ( ’ background−c o l o r ’ , ’ r ed ’ ) ;
}) ;
Remove live event handlers again
$ ( ’ p ’ ) . d i e ( ” c l i c k ” ) ;
live and die are using event delegation, which enhancesperformance with big element counts
http://westhoffswelt.de [email protected] slide: 26 / 30
![Page 101: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/101.jpg)
Live events
Bind event handlers to items which do not exist yet
$ ( ’ p ’ ) . l i v e ( ” c l i c k ” , f u n c t i o n ( e ) {$ ( t h i s ) . c s s ( ’ background−c o l o r ’ , ’ r ed ’ ) ;
}) ;
Remove live event handlers again
$ ( ’ p ’ ) . d i e ( ” c l i c k ” ) ;
live and die are using event delegation, which enhancesperformance with big element counts
http://westhoffswelt.de [email protected] slide: 26 / 30
![Page 102: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/102.jpg)
Live events
Bind event handlers to items which do not exist yet
$ ( ’ p ’ ) . l i v e ( ” c l i c k ” , f u n c t i o n ( e ) {$ ( t h i s ) . c s s ( ’ background−c o l o r ’ , ’ r ed ’ ) ;
}) ;
Remove live event handlers again
$ ( ’ p ’ ) . d i e ( ” c l i c k ” ) ;
live and die are using event delegation, which enhancesperformance with big element counts
http://westhoffswelt.de [email protected] slide: 26 / 30
![Page 103: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/103.jpg)
Live events
Bind event handlers to items which do not exist yet
$ ( ’ p ’ ) . l i v e ( ” c l i c k ” , f u n c t i o n ( e ) {$ ( t h i s ) . c s s ( ’ background−c o l o r ’ , ’ r ed ’ ) ;
}) ;
Remove live event handlers again
$ ( ’ p ’ ) . d i e ( ” c l i c k ” ) ;
live and die are using event delegation, which enhancesperformance with big element counts
http://westhoffswelt.de [email protected] slide: 26 / 30
![Page 104: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/104.jpg)
Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b ind ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . unb ind ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . unb ind ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de [email protected] slide: 27 / 30
![Page 105: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/105.jpg)
Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b ind ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . unb ind ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . unb ind ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de [email protected] slide: 27 / 30
![Page 106: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/106.jpg)
Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b ind ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . unb ind ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . unb ind ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de [email protected] slide: 27 / 30
![Page 107: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/107.jpg)
Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b ind ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . unb ind ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . unb ind ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de [email protected] slide: 27 / 30
![Page 108: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/108.jpg)
Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b ind ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . unb ind ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . unb ind ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de [email protected] slide: 27 / 30
![Page 110: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/110.jpg)
Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o ad ( ” s om e f i l e . html #i d . c l a s s ” )
Fire a HTTP GET request:
$ . ge t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Fire a HTTP POST request:
$ . pos t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Load and execute a remote <script>:
$ . g e t S c r i p t ( ” s ome s c r i p t . j s ” , [ c a l l b a c k ] ) ;
Callback functions are only executed on success
http://westhoffswelt.de [email protected] slide: 28 / 30
![Page 111: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/111.jpg)
Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o ad ( ” s om e f i l e . html #i d . c l a s s ” )
Fire a HTTP GET request:
$ . ge t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Fire a HTTP POST request:
$ . pos t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Load and execute a remote <script>:
$ . g e t S c r i p t ( ” s ome s c r i p t . j s ” , [ c a l l b a c k ] ) ;
Callback functions are only executed on success
http://westhoffswelt.de [email protected] slide: 28 / 30
![Page 112: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/112.jpg)
Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o ad ( ” s om e f i l e . html #i d . c l a s s ” )
Fire a HTTP GET request:
$ . ge t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Fire a HTTP POST request:
$ . pos t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Load and execute a remote <script>:
$ . g e t S c r i p t ( ” s ome s c r i p t . j s ” , [ c a l l b a c k ] ) ;
Callback functions are only executed on success
http://westhoffswelt.de [email protected] slide: 28 / 30
![Page 113: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/113.jpg)
Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o ad ( ” s om e f i l e . html #i d . c l a s s ” )
Fire a HTTP GET request:
$ . ge t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Fire a HTTP POST request:
$ . pos t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Load and execute a remote <script>:
$ . g e t S c r i p t ( ” s ome s c r i p t . j s ” , [ c a l l b a c k ] ) ;
Callback functions are only executed on success
http://westhoffswelt.de [email protected] slide: 28 / 30
![Page 114: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/114.jpg)
Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o ad ( ” s om e f i l e . html #i d . c l a s s ” )
Fire a HTTP GET request:
$ . ge t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Fire a HTTP POST request:
$ . pos t ( ” h t tp : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ t ype ] ) ;
Load and execute a remote <script>:
$ . g e t S c r i p t ( ” s ome s c r i p t . j s ” , [ c a l l b a c k ] ) ;
Callback functions are only executed on success
http://westhoffswelt.de [email protected] slide: 28 / 30
![Page 115: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/115.jpg)
Advanced AJAX requests
Manual complex AJAX requests are possible
1 $ . a j a x ({2 u r l : /∗ Request u r l ∗/ ,3 be fo r eSend : 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 [email protected] slide: 29 / 30
![Page 116: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/116.jpg)
Advanced AJAX requests
Manual complex AJAX requests are possible
1 $ . a j a x ({2 u r l : /∗ Request u r l ∗/ ,3 be fo r eSend : 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 [email protected] slide: 29 / 30
![Page 117: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/117.jpg)
Advanced AJAX requests
Manual complex AJAX requests are possible
1 $ . a j a x ({2 u r l : /∗ Request u r l ∗/ ,3 be fo r eSend : 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 [email protected] slide: 29 / 30
![Page 118: Bubbles and Trees with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051613/54c75ce34a795905108b456b/html5/thumbnails/118.jpg)
Thanks for listening
Questions, comments or annotations?
Slides: http://slideshare.net
Contact:
Jakob Westhoff <[email protected]>http://westhoffswelt.de@jakobwesthoff
Bastian Feder <[email protected]://bastian-feder.de@lapistano
http://westhoffswelt.de [email protected] slide: 30 / 30