Advanced Jquery
-
Upload
harouny -
Category
Technology
-
view
1.086 -
download
0
description
Transcript of Advanced Jquery
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/