introducing jquery
DESCRIPTION
Presenation I gave at internal training in former company I have worked for.TRANSCRIPT
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()
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()