![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](https://image.slidesharecdn.com/introductiontojquery-121217214600-phpapp01/85/Introduction-to-j-query-4-320.jpg)
![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](https://image.slidesharecdn.com/introductiontojquery-121217214600-phpapp01/85/Introduction-to-j-query-12-320.jpg)
![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](https://image.slidesharecdn.com/introductiontojquery-121217214600-phpapp01/85/Introduction-to-j-query-13-320.jpg)
Introduction to j query
- 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