Introducing jQuery


Published on

Presenation I gave at internal training in former company I have worked for.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introducing jQuery

  1. 1. Introducing jQueryGrzegorz Ziolkowski
  2. 2. Agenda●Getting started●Using selectors and page traversing●Handling events●Effects●DOM manipulation●Mouse interaction and UI extensions
  3. 3. 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 withoutrefreshing a page (AJAX)●Simplify common JavaScript tasks
  4. 4. 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)
  5. 5. Our first jQuery Document●Downloading jQuery:●Setting up the HTML document●Writing the jQuery code○finding the element○adding new property○executing the code
  6. 6. Handling eventsGrzegorz Ziolkowski
  7. 7. Events - Performing task on page load●Timing of code execution●Document is completely downloaded to thebrowser○window.onload●DOM is completely ready for use○$( document ).ready()●When you can use jQuerys .load()○image gallery with many images
  8. 8. Events - Multiple scripts on one page●Traditional mechanism for registeringevent handlers through JavaScript○<body onload="doStuff();">○window.onload = doStuff; (more cleanlyseparated from the markup)●What if we want add second functiondoOtherStuff()?○window.onload = doOtherStuff - wrong○$( document ).ready(); - each call adds the newfunction to the internal queue of behaviours
  9. 9. 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()
  10. 10. Events - The journey of an event●Event occurs on a page - entire hierarchyof DOM elements gets chance to handle it○When the anchor is clicked, the <div>, <span>, and<a> all should respond to the click
  11. 11. Events - Event capturing●Allowing multiple elements to respond toan event is called event capturing○ The event is first given to the most all-encompassingelement, and then to more specific ones
  12. 12. Events - Event bubbling●Opposite strategy is called event bubbling○ The event gets sent to the most specific element, and afterelement has opportunity to react, the event bubbles tomore general elements
  13. 13. Events - Implementation in browsers :)●Different browser developers - differentmodels 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 theprocess●Always registers event handlers for thebubbling phase of the model to providecross-browser consistency
  14. 14. Events - Side effects of event bubbling●Event bubbling can cause unexpectedbehavior when the wrong elementresponds to a mouseover or mouseout○when the users mouse cursor exits <div> mouseoutisnt propagated to other elements○when the cursor exits the <a> element, mouseout isbubbled up to the parent elements (can causeunexpected behaviors)●The .hover() method is aware of thisproblems
  15. 15. Events - Limiting and ending events●We can access event object which ispassed to each event handler●It provides information about event, suchas where the mouse was at the time○$( #elem ).click( function( event ) {...} )●Use property to locate wherean event takes effect (part of DOM)○if ( == this ) { ... }●.stopPropagation() method can eliminatebubbling completely for the event
  16. 16. Events - Preventing default actions●Default actions - submit button in form,anchor with href - click event●These actions occur nowhere in the normalflow of event propagation so calling .stopPropagation() will not help●.preventDefault() stops the event in itstracks before the default action is triggered●We can stop both mechanisms simplyreturning false in our event handler
  17. 17. Events - Removing an event handler●We can use .off() method to remove thehandler(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 allfunctions●Omitting the method name will remove allevents
  18. 18. Events - Simulating user interaction●The .trigger() method allow us to executecode that we have bound to an event●Even if the normal circumstances of theevent are not occurring●When triggering event that way eventpropagation does not occur●We have to perform trigger on elementwhere handlers were attached directly●Shortcuts are allowed - click()
  19. 19. DOM manipulationGrzegorz Ziolkowski
  20. 20. DOM - Manipulating attributes●So far we have seen methods which allowchange elements class:○.addClass()○.removeClass()○.toggleClass()●We already know how to change elementsattributes and appearance:○.attr()○.removeAttr()○.css()●Using .each() method and iterator
  21. 21. DOM - New use of $() factory●So far weve been using $() function toaccess 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, removeselected code or even copy some part of page
  22. 22. DOM - Manipulation methods●To insert new element(s) inside everymatched element, you can use:○.append() or appendTo()○.prepend() or .prependTo()●To insert new element(s) adjacent to every matchedelement, you can use:○.after() or insertAfter()○.before() or insertBefore()
  23. 23. DOM - Manipulation methods●To insert new element(s) around everymatched element, you can use:○.wrap()●To replace every matched element with newelement(s) or text, you can use:○.html()○.text()
  24. 24. DOM - Manipulation methods●To remove element(s) inside everymatched element, you can use:○.empty()●To remove every matched element anddescendants from the document withoutactually deleting them, you can use○.remove()