Advanced Jquery


Published on

Advanced Jquery session in Horizons Software

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

Advanced Jquery

  1. 1. Prepared by: Ahmed EL-HarounySenior Software Engineer
  2. 2. 1. Handling Events 1. Binding To Events 2. Event Object 3. Binding Shortcuts 4. Manually Trigger Events 5. Keyboard Events 6. Unbind Events 7. The Live() function2. Ajax 1. load() – the simplest 2. jQuery.ajax() – the giant 3. Json and Jsonp 4. Twitter demo!3. Build a plugin Demo
  3. 3. Bind() function: attach a handler to an event for the elements.Multiple HandlersWhen an event reaches an element, all handlers bound to that event type forthe element are fired. If there are multiple handlers registered, they willalways execute in the order in which they were bound. After all handlers haveexecuted, the event continues along the normal event propagation path.
  4. 4. event object: an object that contains information and functionality related tothe current event is passed to all event handlers:
  5. 5. Most DOM events exists as functions for short• click()• change()• mousedown(), mouseenter(), mouseleave(), mousemove() …etc• ready()• scroll()
  6. 6. trigger() function: Execute all handlers and behaviors attached to thematched elements for the given event type.Shortcut functions can also be used for triggering events:
  7. 7. keyup(): The keyup event is sent to an element when the user releases a keyon the keyboard.keydown (): The keydown event is sent to an element when the user firstpresses a key on the keyboard.Note: keyboard events are only triggered on elements that have focus.
  8. 8. unbind() function: Remove a previously-attached event handler from theelements.
  9. 9. live() function: Attach an event handler for all elements which match the current selector, now and in the future.Note: #thirdBtn don’t exist on the page yet.
  10. 10. load() function: Load data from the server and place the returned HTMLinto the matched element.Also takes those optional parameters:[, data] [, complete(responseText, textStatus, XMLHttpRequest)]
  11. 11. jQuery.ajax() function: Perform an asynchronous HTTP (Ajax) request.Reference:
  12. 12.  Json JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. Despite its relationship to JavaScript, it is language- independent, with parsers available for many languages.
  13. 13. Jason Format:
  14. 14.  Jsonp JSONP or "JSON with padding" is a complement to the base JSON data format. It provides a method to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy.
  15. 15. Demo
  16. 16. Demo