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

Introduction to j query

on

  • 1,401 views

 

Statistics

Views

Total Views
1,401
Views on SlideShare
883
Embed Views
518

Actions

Likes
0
Downloads
25
Comments
0

3 Embeds 518

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to j query Introduction to j query Presentation Transcript

  • Introduction to jQuery Presented by: Rashid Azar © 2005 KPIT Cummins Infosystems LimitedWe value our relationship
  • 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
  • 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.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
  • What is jQuery?Show a hidden DIV using jQuery $(“#hiddenDIV”).show()5 December 18, 2012 Presented By: Rashid Azar
  • 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
  • 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
  • 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" 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
  • 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
  • Setting up jQuery? $(“div”).show();11 December 18, 2012 Presented By: Rashid Azar
  • 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
  • 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
  • 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
  • Thank You15 December 18, 2012 Presented By: Rashid Azar