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

1. Prepared by:
Ahmed EL-Harouny
Senior Software Engineer

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() function
2. Ajax
1. load() – the simplest
2. jQuery.ajax() – the giant
3. Json and Jsonp
4. Twitter demo!
3. Build a plugin Demo

3. Bind() function: attach a handler to an event for the elements.
Multiple Handlers
When an event reaches an element, all handlers bound to that event type for
the element are fired. If there are multiple handlers registered, they will
always execute in the order in which they were bound. After all handlers have
executed, the event continues along the normal event propagation path.

4. event object: an object that contains information and functionality related to
the current event is passed to all event handlers:

5. Most DOM events exists as functions for short
• click()
• change()
• mousedown(), mouseenter(), mouseleave(), mousemove() …etc
• ready()
• scroll()

6. trigger() function: Execute all handlers and behaviors attached to the
matched elements for the given event type.
Shortcut functions can also be used for triggering events:

7. keyup(): The keyup event is sent to an element when the user releases a key
on the keyboard.
keydown (): The keydown event is sent to an element when the user first
presses a key on the keyboard.
Note: keyboard events are only triggered on elements that have focus.

8. unbind() function: Remove a previously-attached event handler from the
elements.

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. load() function: Load data from the server and place the returned HTML
into the matched element.
Also takes those optional parameters:
[, data] [, complete(responseText, textStatus, XMLHttpRequest)]

11. jQuery.ajax() function: Perform an asynchronous HTTP (Ajax) request.
Reference: http://api.jquery.com/jQuery.ajax/

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. Jason Format:

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. Demo

16. Demo
http://harouny.wordpress.com/2012/06/06/make-your-first-
jquery-plugin-in-2-minutes/