Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prepared by: Ahmed EL-HarounySenior Software Engineer
1.        Handling Events     1.    Binding To Events     2.    Event Object     3.    Binding Shortcuts     4.    Manuall...
Bind() function: attach a handler to an event for the elements.Multiple HandlersWhen an event reaches an element, all hand...
event object: an object that contains information and functionality related tothe current event is passed to all event han...
Most DOM events exists as functions for short• click()• change()• mousedown(), mouseenter(), mouseleave(), mousemove() …et...
trigger() function: Execute all handlers and behaviors attached to thematched elements for the given event type.Shortcut f...
keyup(): The keyup event is sent to an element when the user releases a keyon the keyboard.keydown (): The keydown event i...
unbind() function: Remove a previously-attached event handler from theelements.
live() function: Attach an event handler for all elements which match the current selector, now and in the future.Note: #t...
load() function: Load data from the server and place the returned HTMLinto the matched element.Also takes those optional p...
jQuery.ajax() function: Perform an asynchronous HTTP (Ajax) request.Reference: http://api.jquery.com/jQuery.ajax/
   Json    JavaScript Object Notation, is a lightweight text-based open    standard designed for human-readable data inte...
Jason Format:
   Jsonp    JSONP or "JSON with padding" is a complement to the base    JSON data format. It provides a method to request...
Demo
Demohttp://harouny.wordpress.com/2012/06/06/make-your-first-jquery-plugin-in-2-minutes/
Upcoming SlideShare
Loading in …5
×

Advanced Jquery

1,505 views

Published on

Advanced Jquery session in Horizons Software
http://harouny.wordpress.com/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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: http://api.jquery.com/jQuery.ajax/
  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. Demohttp://harouny.wordpress.com/2012/06/06/make-your-first-jquery-plugin-in-2-minutes/

×