JQuery introduction

1,070 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,070
On SlideShare
0
From Embeds
0
Number of Embeds
349
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQuery introduction

  1. 1. – S. Pradeep Kumar
  2. 2. Why Third Party Library <ul><li>Cross Browser (W3C model & IE model) </li></ul>
  3. 3. Why jQuery ? <ul><li>Size and Speed
  4. 4. Write Less,Do More </li></ul>
  5. 5. jQuery
  6. 6. Selector Engine
  7. 7. Decorating <ul><li>$.addClass(),$.hasClass(),$.removeClass()
  8. 8. .css()
  9. 9. .height(),width(),innerHeight(),outerHeight()
  10. 10. .position(),offset() </li></ul>
  11. 11. Enhancing <ul><li>Html(),attr(),prop()
  12. 12. Add(),children(),closest(),filter(),find(),siblings(),prev(),next() </li></ul>
  13. 13. Events
  14. 14. DOM Ready function <ul><li>$(document).ready(function(){ </li></ul><ul><ul><li>Handler code------ </li></ul><li>});
  15. 15. (or)
  16. 16. $(function(){ </li><ul><li>handler code---- </li></ul><li>}); </li></ul>
  17. 17. jQuery Event API <ul><li>$(selector).bind(“eventtype”handler)
  18. 18. Short cut's .click(),mousedown(),mousemove(),
  19. 19. mouseup()
  20. 20. Unbind(eventype,handler) </li></ul>
  21. 21. Advanced Events <ul><li>Support's event binding for elements added in future
  22. 22. Live() , die() (Chaining not supported)
  23. 23. Delegate() , Undelegate()
  24. 24. Custom events
  25. 25. Bind() , Trigger() (example hiding)
  26. 26. Passing the custom data with e.data </li></ul>
  27. 27. Playing with scope <ul><li>$.proxy(function,context);
  28. 28. Example setTimeOut(); </li></ul>setTimeout($.proxy( function (){ handler }, context ), delay);
  29. 29. AJAX
  30. 30. IE vs Firefox <ul>// Functions to create xhrs function createStandardXHR() { try { <ul>return new window.XMLHttpRequest(); } catch( e ) {} </ul>} function createActiveXHR() { try { <ul>return new window.ActiveXObject( &quot;Microsoft.XMLHTTP&quot; ); </ul>} catch( e ) {} } </ul>
  31. 31. Ajax API's <ul>$.ajax(url, beforesend:function(xhr){}, success:function(data){} ); <li>$.get() to make a get request
  32. 32. $.post to make a post request </li></ul>
  33. 33. Types of Plugins <ul><li>jQuery selection or method functions plugin ($.fn.xxx equivalent to $.prototype), this allows to perform operation on set of elements (method plugins)
  34. 34. jQuery function plugins ($.xxx), this provide the additonal stand along functions (function plugins)
  35. 35. The first one returns the jQuery object and the other returns the jQuery object. First one supports chaining and other doesn’t </li></ul>
  36. 36. jQuery along with other libararies <ul><li>jQuery.noConflict()
  37. 37. Example is using the prototype.js </li></ul>
  38. 38. Points to remember <ul><li>Don't use if($(“selector”).api()) , instead check for the size
  39. 39. Always store you jQuery objects with name
  40. 40. $”varaibleName” (ex:$formElements)
  41. 41. Always follow Self executing single, self-executing function pattern
  42. 42. (function($) {})(jQuery); </li></ul>
  43. 43. References <ul><li>http://jqfundamentals.com/
  44. 44. http://jquery.com/
  45. 45. http://jqapi.com/
  46. 46. http://ejohn.org/
  47. 47. http://paulirish.com/ </li></ul>
  48. 48. Assignments <ul><li>BorderLayout Plugin
  49. 49. ContentPanel Plugin
  50. 50. Css3 Editor with Preview </li></ul>

×