Introduction to jQuery


Published on

A quick introduction to jQuery framework and jQuery UI

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to jQuery

  1. 1. jQuery(Framework and UI)<br />By Achinth Anand Gurkhi<br />
  2. 2. What is jQuery?<br />Is a JavaScript framework<br />It was first released in Jan 2006<br />Latest version is 1.4.4<br />Makes JavaScript development easier<br />Developers need not worry about cross browser compatibility<br />Reduces lines of code<br />Supports IE6+, Firefox1.5+, Safari2.0.2+, Opera9+ & Chrome0.2+<br />Also contains a separate UI library to simplify UI tasks<br />Is superfast and small – just 24 KB<br />Used by over 31% of the 10,000 most visited websites<br />Supported by Microsoft as well<br />
  3. 3. jQuery Features<br />DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project<br />DOM traversal and modification<br />Events <br />CSS manipulation <br />Effects and animations <br />Ajax <br />Extensibility through plug-ins <br />
  4. 4. jQuery Components<br />jQuery Framework<br />jQuery UI<br />jQuery Plug-ins<br />
  5. 5. jQuery Framework<br />
  6. 6. How to use jQuery?<br />Option 1: Download jquery-<version>.min.js from and use it using <script type=‘text/javascript’ src=‘jquery.min.js’/> <br />Option 2: From Google using <script type=‘text/javascript’ src=‘’/><br />Option 3: From Microsoft using <script type=‘text/javascript’ src=‘’/><br />Note: Option 2 and 3 are recommended in production for performance reasons.<br />
  7. 7. The $ shortcut<br />$ is the shortcut to access the jQuery library<br />jQuery(‘p’).addClass() <br />$(‘p’).addClass()<br />
  8. 8. DOM ready event<br />$(document).ready()<br />$(document).ready(function() {<br /> // do something<br /> });<br /> Note: Document ready event is different from body on load event.<br />
  9. 9. Selectors<br />$('div') - Accesses all the div elements in the HTML file.<br />$('#A') - Accesses all the HTML elements with id=A.<br />$('.b') - Accesses all the HTML elements with class=b.<br />$(‘p.b’) - Accesses all the paragraph element with class=b.<br />$(‘.a.b’) - Accesses all the HTML elements with class=a and b.<br />and there are many more like (a+b), (a > b), (a/b), (a, b), etc.<br /><br />
  10. 10. Filters<br />filter()<br />not()<br />lt()<br />gt()<br />eq()<br />contains()<br />has()<br />
  11. 11. DOM traversal methods<br />find()<br />children()<br />parents()<br />parent()<br />siblings()<br />prev()<br />next()<br />
  12. 12. DOM manipulation methods<br />text()<br />html()<br />attr()<br />val()<br />prepend() and prependTo()<br />append() and appendTo()<br />before() and insertBefore()<br />after() and insertAfter()<br />wrap()<br />clone()<br />empty()<br />remove()<br />
  13. 13. CSS Manipulation<br />addClass()<br />removeClass()<br />toggleClass()<br />css()<br />
  14. 14. Demo 1<br />$<br />DOM ready event<br />Accessing a node<br />text()<br />html()<br />addClass()<br />children()<br />parent()<br />each()<br />prepend() and prependTo()<br />clone()<br />this<br />
  15. 15. Arrays<br />Array is defined as below:<br />vararr = [“abc”, “bcd”, “cde”, “efg”];<br />Some common functions used on arrays:<br />join<br />each<br />get<br />sort<br />grep (filtering)<br />match (regular expressions)<br />splice (array splitting)<br />concat (join two arrays)<br />
  16. 16. Object Array <br />varstudents=[ <br /> { "role": 101, "name": "Ben", "emailId":"" }, <br /> { "role": 102, "name": "Ian", "emailId":"" }, <br /> { "role": 103, "name": "Caroline", "emailId":"" } <br /> ]<br />
  17. 17. Demo 2<br />Array - join and each functions<br />
  18. 18. Events<br />Two ways to bind controls to event<br />$(’#x').bind('click', function(){<br /> // event handling<br />});<br />$(’#x').click(function(){ <br /> // event handling<br />});<br />
  19. 19. Events – continued<br />Use $( or ‘this’ to determine which control caused the event. <br />Events can be triggered using the trigger(event) function.<br />Use unbind() to de-register a control event handler.<br />Use one() instead of bind() if you want the event handler to trigger only once.<br />
  20. 20. Mouse events<br />click()<br />dblClick()<br />mouseUp()<br />mouseDown()<br />mouseOver()<br />mouseOut()<br />Mouse button clicked can be determined using event.button<br />1 = left button<br />2 = right button<br />Mouse co-ordinate can be determined using event.screenX and event.screenY<br />
  21. 21. Keyboard and Document events<br />Keyboard<br />keyPress()<br />keyUp()<br />keyDown()<br />Which key is pressed can be determined using event.keyCode<br />Document<br />ready()<br />load()<br />unload()<br />error()<br />
  22. 22. Form and Browser Events<br />Form Elements<br />focus()<br />blur()<br />submit()<br />change()<br />select()<br />Browser<br />resize()<br />scroll()<br />
  23. 23. Demo 3<br />Binding events<br />Triggering events<br />
  24. 24. Animations<br />show() <br />hide()<br />toggle()<br />fadeIn()<br />fadeOut()<br />slideUp()<br />slideDown()<br />slideToggle()<br />fadeTo() <br />animate()<br />
  25. 25. Demo 4<br />show()<br />hide()<br />fadeIn()<br />fadeOut()<br />slideDown()<br />slideUp()<br />
  26. 26. AJAX<br />$.ajax(<br /> url: ‘’,<br /> type: get/post,<br /> data: ….<br /> timeout: (in milliseconds),<br /> success: function(),<br /> error: function(),<br /> dataType: xml/html/json/script,<br /> async: true/false<br /> )<br />
  27. 27. AJAX Shortcut methods<br />get()<br />post()<br />load()<br />getJSON()<br />getScript()<br />
  28. 28. Demo 5<br />load()<br />ajax()<br />
  29. 29. jQuery UI<br />jQuery UI<br />(<br />
  30. 30. jQuery UI<br />jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications<br />
  31. 31. Interactions<br />Dragging<br />Dropping<br />Re-sizing<br />Selecting<br />Sorting<br />
  32. 32. Widgets<br />Accordion<br />AutoComplete<br />Button<br />DatePicker<br />Dialog<br />ProgressBar<br />Slider<br />Tabs<br />
  33. 33. Effects<br />Color Animation<br />ToggleClass<br />AddClass<br />RemoveClass<br />SwitchClass<br />Effect<br />Toggle<br />Hide<br />Show<br />
  34. 34. Demo 6<br /><br />