Your SlideShare is downloading. ×
Introduction to j query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to j query

1,122
views

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,122
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to jQuery Presented by: Rashid Azar © 2005 KPIT Cummins Infosystems LimitedWe 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 example2 December 18, 2012 Presented By: Rashid Azar
  • 3. What is jQuery?jQuery is JavaScript3 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 Source6 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 Mootools7 December 18, 2012 Presented By: Rashid Azar
  • 8. Who is using jQuery?GoogleAmazonIBMMicrosoftTwitterDell8 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 You15 December 18, 2012 Presented By: Rashid Azar

×