0
Introduction                                              to                                           jQuery             ...
AgendaWhat is jQuery?Extenting jQuery – Understanding PluginsHow jQuery worksGet jQuery on your pageWalk through a re...
What is jQuery?jQuery is JavaScript3     December 18, 2012   Presented By: Rashid Azar
What is jQuery?With javascript show a hidden element       if (browserType == "gecko" )                         document....
What is jQuery?Show a hidden DIV using jQuery       $(“#hiddenDIV”).show()5    December 18, 2012            Presented By:...
What is jQuery?jQuery is JavaScriptIt is a light weight libraryEasy and fast HTML DOM selectionBuilt to work on all mo...
Benefits of jQuery?jQuery is Extensible    Thousands of plugins available    Create/release your own pluginjQuery work...
Who is using jQuery?GoogleAmazonIBMMicrosoftTwitterDell8       December 18, 2012   Presented By: Rashid Azar
Setting up jQuery?Include jQuery on the page    Download latest from jQuery.com    <script src="jquery-1.9.2.min.js" ty...
Setting up jQuery?Set jQuery to run when the DOM is loaded     $(document).ready(function(){             //put your jQuer...
Setting up jQuery?                         $(“div”).show();11   December 18, 2012                      Presented By: Rashi...
Setting up jQuery?                    $(“div”)               $(“div#intro h2”)            $(“div.section > child”)     $(“...
How jQuery is structured?Core     .each(), .length(), .eq(), .get(), .index()Selectors     #id, .class, element, :first,...
How jQuery is structured?Events     .ready(), .hover(), .toggle(), .blur(), .mouseout()AJAX     .ajax(), .load(), .getJS...
Thank You15   December 18, 2012               Presented By: Rashid Azar
Upcoming SlideShare
Loading in...5
×

Introduction to j query

1,143

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,143
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to j query"

  1. 1. Introduction to jQuery Presented by: Rashid Azar © 2005 KPIT Cummins Infosystems LimitedWe value our relationship
  2. 2. AgendaWhat is jQuery?Extenting jQuery – Understanding PluginsHow jQuery worksGet jQuery on your pageWalk through a real world example2 December 18, 2012 Presented By: Rashid Azar
  3. 3. What is jQuery?jQuery is JavaScript3 December 18, 2012 Presented By: Rashid Azar
  4. 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. 5. What is jQuery?Show a hidden DIV using jQuery $(“#hiddenDIV”).show()5 December 18, 2012 Presented By: Rashid Azar
  6. 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 Source6 December 18, 2012 Presented By: Rashid Azar
  7. 7. Benefits of jQuery?jQuery is Extensible Thousands of plugins available Create/release your own pluginjQuery works with other libraries Dojo Prototype Mootools7 December 18, 2012 Presented By: Rashid Azar
  8. 8. Who is using jQuery?GoogleAmazonIBMMicrosoftTwitterDell8 December 18, 2012 Presented By: Rashid Azar
  9. 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. 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. 11. Setting up jQuery? $(“div”).show();11 December 18, 2012 Presented By: Rashid Azar
  12. 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. 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. 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. 15. Thank You15 December 18, 2012 Presented By: Rashid Azar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×