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

http://jquery.com/download/



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()

DOM - Manipulation methods●To insert new element(s) around every

matched element, you can use:○ .wrap()

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

DOM - Manipulation methods●To remove element(s) inside every

matched element, you can use:○ .empty()

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

Technology

Introducing jQuery