Introduction to j query
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,493
On Slideshare
975
From Embeds
518
Number of Embeds
3

Actions

Shares
Downloads
26
Comments
0
Likes
0

Embeds 518

http://blog.ecafechat.com 412
http://local.blog.ecafechat.com 104
http://blog-rashid.rhcloud.com 2

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