Introducing jQuery

Introducing jQuery
Grzegorz Ziolkowski

Agenda
●Getting started
●Using selectors and page traversing
●Handling events
●Effects
●DOM manipulation
●Mouse interaction and UI extensions

What jQuery does?
●Access parts of page (DOM traversing)
●Modify the appearance of a page
●Alter the content of a page
●Respond to a user’s interaction with a page
●Add animation to a page
●Retrieve information from a server without
refreshing a page (AJAX)
●Simplify common JavaScript tasks

Why jQuery works well?
●Leverage knowledge of CSS
●Support extension
●Abstract away browser quirks
●Always works with sets (implicit iteration)
●Allow multiple actions in one line
(chaining)

Our first jQuery Document
●Downloading jQuery: http://jquery.
com/download/
●Setting up the HTML document
●Writing the jQuery code
○finding the element
○adding new property
○executing the code

Handling events
Grzegorz Ziolkowski

Events - Performing task on page load
●Timing of code execution
●Document is completely downloaded to the
browser
○window.onload
●DOM is completely ready for use
○$( document ).ready()
●When you can use jQuery's .load()
○image gallery with many images

Events - Multiple scripts on one page
●Traditional mechanism for registering
event handlers through JavaScript
○<body onload="doStuff();">
○window.onload = doStuff; (more cleanly
separated from the markup)
●What if we want add second function
doOtherStuff()?
○window.onload = doOtherStuff - wrong
○$( document ).ready(); - each call adds the new
function to the internal queue of behaviours

Events - Simple events
●Shortcuts for code brevity
○$( document ).ready( function() {} );
○$().ready( function() {} );
○$( function() {} );
●Using .on() in examples
●Shorthand for native JavaScript events
●Compound event handlers
○.hover()

Events - The journey of an event
●Event occurs on a page - entire hierarchy
of DOM elements gets chance to handle it
○When the anchor is clicked, the <div>, <span>, and
<a> all should respond to the click

Events - Event capturing
●Allowing multiple elements to respond to
an event is called event capturing
○ The event is first given to the most all-encompassing
element, and then to more specific ones

Events - Event bubbling
●Opposite strategy is called event bubbling
○ The event gets sent to the most specific element, and after
element has opportunity to react, the event bubbles to
more general elements

Events - Implementation in browsers :)
●Different browser developers - different
models for event propagation
●DOM standard:
○event is captured from general to specific
○event bubbles back up to the top of the DOM tree
○event handlers can be registered for either part of the
process
●Always registers event handlers for the
bubbling phase of the model to provide
cross-browser consistency

Events - Side effects of event bubbling
●Event bubbling can cause unexpected
behavior when the wrong element
responds to a mouseover or mouseout
○when the user's mouse cursor exits <div> mouseout
isn't propagated to other elements
○when the cursor exits the <a> element, mouseout is
bubbled up to the parent elements (can cause
unexpected behaviors)
●The .hover() method is aware of this
problems

Events - Limiting and ending events
●We can access event object which is
passed to each event handler
●It provides information about event, such
as where the mouse was at the time
○$( '#elem' ).click( function( event ) {...} )
●Use event.target property to locate where
an event takes effect (part of DOM)
○if ( event.target == this ) { ... }
●.stopPropagation() method can eliminate
bubbling completely for the event

Events - Preventing default actions
●Default actions - submit button in form,
anchor with href - click event
●These actions occur nowhere in the normal
flow of event propagation so calling .
stopPropagation() will not help
●.preventDefault() stops the event in its
tracks before the default action is triggered
●We can stop both mechanisms simply
returning false in our event handler

Events - Removing an event handler
●We can use .off() method to remove the
handler(s) from element
●It takes an event type as its first argument,
and a function to remove as second
●Omitting the function name will remove all
functions
●Omitting the method name will remove all
events

Events - Simulating user interaction
●The .trigger() method allow us to execute
code that we have bound to an event
●Even if the normal circumstances of the
event are not occurring
●When triggering event that way event
propagation does not occur
●We have to perform trigger on element
where handlers were attached directly
●Shortcuts are allowed - click()

DOM manipulation
Grzegorz Ziolkowski

DOM - Manipulating attributes
●So far we have seen methods which allow
change element's class:
○.addClass()
○.removeClass()
○.toggleClass()
●We already know how to change element's
attributes and appearance:
○.attr()
○.removeAttr()
○.css()
●Using .each() method and iterator

DOM - New use of $() factory
●So far we've been using $() function to
access elements in a document to:
○attach or deattach effect
○attach or deattach event
○add, modify or delete property
●It also allows insert a set of HTML elements,
move part of HTML to another place, remove
selected code or even copy some part of page

DOM - Manipulation methods
●To insert new element(s) inside every
matched element, you can use:
○.append() or appendTo()
○.prepend() or .prependTo()
●To insert new element(s) adjacent to every matched
element, you can use:
○.after() or insertAfter()
○.before() or insertBefore()

●To insert new element(s) around every
○.wrap()
●To replace every matched element with new
element(s) or text, you can use:
○.html()
○.text()

●To remove element(s) inside every
○.empty()
●To remove every matched element and
descendants from the document without
actually deleting them, you can use
○.remove()

Introducing jQuery

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Introducing jQuery

Similar to Introducing jQuery (20)

Recently uploaded

Recently uploaded (20)

Introducing jQuery