Prepared by: Ahmed EL-Harouny

Senior Software Engineer

1. What is JQuery?2. Referencing JQuery library3. Using Content Delivery Networks (CDN)4. Go through Documentation5. Using the JQuery Ready Function6. Basic Selectors

1. Select By Tag Name2. Select By ID3. Select By Class4. Select By Attributes

7. Dom Manipulations1. Concepts2. Iterate through objects3. Modify properties and attributes4. Create objects5. Adding and Removing objects

8. Handling Events1. Binding To Events

2. Click Event

3. Change Event

4. Mouse Events

5. Unbind Events

6. The Live() function

jQuery is a fast JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

This means moving from this:

To This:

=

1. Download the latest lib from jquery.com2. Add Reference to it on the page

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

Note: Always use minified versions of the script during runtime because you will get significant decrease in the file size of the file.

A CDN — short for Content Delivery Network — distributes static content across servers in various, physical locations. When a user’s browser resolves the URL for these files, their download will automatically target the closest available server in the network.

How?<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

When you include JQuery using a CDN service you will get the following benefits:◦ High Availability◦ Performance◦ Caching

Available free JQuery CDNs:◦ Google http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js◦ Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js◦ JQuery http://code.jquery.com/jquery-1.7.2.min.js

http://docs.jquery.com/Main_Page

Or use this shortcut:

Use document ready function to execute code that depends on DOM elements. The code you write will execute when the DOM is ready to be traversed and manipulated.

When using JQuery selectors to select DOM objects; a wrapped set (Array) is returned to you where each item in that set is a wrapper on the native DOM object

http://api.jquery.com/category/selectors/

Your awesome selectors handbook!

Multiple ApplyingAny manipulation function you call on a wrapped set is applied to all elements in the set.

ChainingAll manipulation functions returns the wrapper set again after executing its logic.

The each() function of the wrapped set:

The attr() functionUsed to Set and Get Attributes

Get Value:

Set Value:

Other manipulation function (mostly shortcuts to attr() function):◦ val() getting and setting form elements values

◦ addClass() add class to an element

◦ removeClass() remove class from an element

◦ toggleClass() toggles a class for an element

◦ removeAttr() removes an attribute from an element

◦ hide() hides an element from the page

◦ show() shows an element from the page

◦ css() alter css for an element

html() functionused to get and set inner HTML of an element

Get html:

Set html:

text() functionused to get and set inner text of an elementNote: when providing html tags to text function JQuery HTML-encodes it.

append() insert DOM content (parameter) to the end of the

caller DOM element

appendTo() insert DOM content the caller to the end of a

DOM element (parameter)

prepend() insert DOM content (parameter) to the

beginning of the caller DOM element

prependTo() insert DOM content the caller to the

beginning of a DOM element (parameter)

remove() removes DOM element from the DOM