Developer Evangelist Rachel Appel Independent Consultant Introduction to jQuery Course Topics Introduction to jQuery 01 jQuery 101 05 Effects 02 Selection 06 Ajax and ID: 429514
Download Presentation The PPT/PDF document "Jeremy Foster" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Jeremy Foster | Developer EvangelistRachel Appel | Independent Consultant
Introduction to
jQuerySlide2
Course Topics
Introduction to jQuery
01 | jQuery
101
05 | Effects
02
| Selection
06 | Ajax and
Async
03 | Manipulating the DOM
07 | Libraries
04 | EventsSlide3
04 | EventsJeremy Foster | @codefoster
Rachel
Appel | @
RachelAppelSlide4
Attachment and the Event objectBrowser eventsDocument loading eventsForm eventsKeyboard events
Mouse events
Module OverviewSlide5
Attachment and the Event ObjectSlide6
Attaching to Events.on() and .off().bind() and .unbind()
.delegate() and .undelegated()
.one()
.live() and .die()
.trigger() and .
triggerHandler
()Slide7
codepen.io/codefoster/pen/jaIDbSlide8
The Event ObjectHolds all of the event propertiesHelpful properties include…
.
currentTarget
.type
.which
.timestamp
.target
.dataSlide9
codepen.io/codefoster/pen/uvonHSlide10
Browser EventsSlide11
Browser Events.error()Called if an element is not loaded correctly
.
resize()
When the size of the browser window changes
.scroll()
When the user scrolls to a different place in an elementSlide12
codepen.io/codefoster/pen/gAEfySlide13
Document Loading EventsSlide14
Document Loading Events.load()When an element is being loaded
.ready()
When the DOM is loaded and ready (minus content like images)
Use $(function) as a shortcut
.unload()
Opposite of load, when an element is being unloadedSlide15
codepen.io/codefoster/pen/aowebSlide16
Form EventsSlide17
Form Events.change()When an element’s value changes
.focus()
When an element receives focus
.blur()
When an element loses focus
.
focusin
()
When an element or any nested elements receives
focus
.
focusout
()
When an element loses focus
.select()
When the user makes a text selection inside
.submit()
When the user is attempting to submit a formSlide18
Keyboard EventsSlide19
Keyboard Events.keydown()
When a key is pressed down
.
keypress
()
When the browser registers keyboard input (may vary by browser!)
Not triggered by Shift, Esc, delete, etc.
.
keyup
()
When
a key returns to the up positionSlide20
Mouse EventsSlide21
Mouse Events.click().dblclick
()
.hover()
.
mousedown
()
.
mouseenter
()
.
mouseleave
()
.
mousemove
()
.
mouseout
()
.
mouseover
()
.
mouseup
()Slide22
Attachment and the Event objectBrowser eventsDocument loading eventsForm eventsKeyboard events
Mouse events
SummarySlide23