Advanced JQuery

Prepared by: Ahmed EL-Harouny

Senior Software Engineer

1. Handling Events1. Binding To Events2. Event Object3. Binding Shortcuts4. Manually Trigger Events5. Keyboard Events6. Unbind Events7. The Live() function

2. Ajax1. load() – the simplest2. jQuery.ajax() – the giant3. Json and Jsonp4. Twitter demo!

3. Build a plugin Demo

Agenda

Handling EventsBinding to events

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.

Handling EventsEvent Object

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

Handling EventsBinding ShortcutsMost DOM events exists as functions for short• click()• change()• mousedown(), mouseenter(), mouseleave(), mousemove() …etc• ready()• scroll()

Handling EventsManually Trigger Events

Shortcut functions can also be used for triggering events:

trigger() function: Execute all handlers and behaviors attached to the matched elements for the given event type.

Handling EventsKeyboard Events

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.

Handling EventsUnbind Eventsunbind() function: Remove a previously-attached event handler from the elements.

Handling EventsThe Live() functionlive() 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.

Ajaxload() – the simplest

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)]

AjaxjQuery.ajax() – the giant

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

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

Json and Jsonp

Json and Jsonp (continued)Jason Format:

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

Json and Jsonp (continued)

Json and Jsonp (continued)

Demo

Build a plugin Demo

Demo

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