http://harouny.wordpress.com/

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

2. 1. What is JQuery?
2. Referencing JQuery library
3. Using Content Delivery Networks (CDN)
4. Go through Documentation
5. Using the JQuery Ready Function
6. Basic Selectors
1. Select By Tag Name
2. Select By ID
3. Select By Class
4. Select By Attributes
7. Dom Manipulations
1. Concepts
2. Iterate through objects
3. Modify properties and attributes
4. Create objects
5. Adding and Removing objects

3. 8. Handling Events
1. Binding To Events
2. Click Event
3. Change Event
4. Mouse Events
5. Unbind Events
6. The Live() function

4. 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:

5. =

6. 1. Download the latest lib from jquery.com
2. 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.

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

8. http://docs.jquery.com/Main_Page

9. 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.
Or use this shortcut:

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

12. Your awesome selectors handbook!
http://api.jquery.com/category/selectors/

13.  Multiple Applying
Any manipulation function you call on a wrapped set is
applied to all elements in the set.
 Chaining
All manipulation functions returns the wrapper set again after
executing its logic.

14. The each() function of the wrapped set:

15.  The attr() function
Used to Set and Get Attributes
Get Value:
Set Value:

16.  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

17.  html() function
used to get and set inner HTML of an element
Get html:
Set html:
 text() function
used to get and set inner text of an element
Note: when providing html tags to text function JQuery HTML-encodes
it.

19.  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