1. Introduction
to
jQuery
Presented by:
Rashid Azar
© 2005 KPIT Cummins Infosystems Limited
We value our relationship

2. Agenda
What is jQuery?
Extenting jQuery – Understanding Plugins
How jQuery works
Get jQuery on your page
Walk through a real world example
2 December 18, 2012 Presented By: Rashid Azar

3. What is jQuery?
jQuery is JavaScript
3 December 18, 2012 Presented By: Rashid Azar

4. What is jQuery?
With javascript show a hidden element
if (browserType == "gecko" )
document.poppedLayer =
eval('document.getElementById(”HiddenDIV")');
else if (browserType == "ie")
document.poppedLayer =
eval('document.getElementById(”HiddenDIV")');
else
document.poppedLayer =
eval('document.layers[”HiddenDIV"]');
document.poppedLayer.style.visibility = "visible";
4 December 18, 2012 Presented By: Rashid Azar

5. What is jQuery?
Show a hidden DIV using jQuery
$(“#hiddenDIV”).show()
5 December 18, 2012 Presented By: Rashid Azar

6. What is jQuery?
jQuery is JavaScript
It is a light weight library
Easy and fast HTML DOM selection
Built to work on all modern browsers
(IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)
It is Open Source
6 December 18, 2012 Presented By: Rashid Azar

7. Benefits of jQuery?
jQuery is Extensible
Thousands of plugins available
Create/release your own plugin
jQuery works with other libraries
Dojo
Prototype
Mootools
7 December 18, 2012 Presented By: Rashid Azar

8. Who is using jQuery?
Google
Amazon
IBM
Microsoft
Twitter
Dell
8 December 18, 2012 Presented By: Rashid Azar

9. Setting up jQuery?
Include jQuery on the page
Download latest from jQuery.com
<script src="jquery-1.9.2.min.js" type="text/javascript></script>
Include the latest from Google AJAX Libraries API
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"
type="text/javascript"></script>
9 December 18, 2012 Presented By: Rashid Azar

10. Setting up jQuery?
Set jQuery to run when the DOM is loaded
$(document).ready(function(){
//put your jQuery code here.
});
10 December 18, 2012 Presented By: Rashid Azar

11. Setting up jQuery?
$(“div”).show();
11 December 18, 2012 Presented By: Rashid Azar

12. Setting up jQuery?
$(“div”)
$(“div#intro h2”)
$(“div.section > child”)
$(“a[href=‘http://www.jquery.com’]”)
$(“ul#nav li:first”)
12 December 18, 2012 Presented By: Rashid Azar

13. How jQuery is structured?
Core
.each(), .length(), .eq(), .get(), .index()
Selectors
#id, .class, element, :first, [attribute=value]
Attributes
.removeAttr(), .addClass(), .hasClass(), .toggleClass(), .html()
Traversing
.not(), .add (), .children(), .next(), .siblings()
Manipulation
.append(), .after(), .wrap(), .replaceWith(), .empty()
CSS
.width(), .innerHeight(), .height(), .outerHeight(), .css()
13 December 18, 2012 Presented By: Rashid Azar

14. How jQuery is structured?
Events
.ready(), .hover(), .toggle(), .blur(), .mouseout()
AJAX
.ajax(), .load(), .getJSON(), .get(), .post()
Effects
.hide(), .show(), .toggle(), .slideUp(), .slideDown()
14 December 18, 2012 Presented By: Rashid Azar

15. Thank You
15 December 18, 2012 Presented By: Rashid Azar