Rupesh Kumar Tiwari<br />June, 2011<br />Basics of JQueryThe write less, do more JavaScript  library<br />
Agenda<br /><ul><li>jQuery Basics
Plugins
Advanced jQuery</li></li></ul><li>jQueryBasics…<br />$<br /><ul><li>$(CSS Selector)
$(HTML)
$(DOM element)</li></li></ul><li>jQueryBasics…<br />Demo<br />
jQueryBasics…<br />$<br /><ul><li>$(something).action();</li></li></ul><li>jQueryBasics…<br />$:Basic actions<br />
jQueryBasics…<br />$:Traversal<br /><ul><li>.not(expression)
.add(expression)
.next()
.nextAll()
.prev()
.prevAll()
.slice(start,end)
.siblings()
.children()
.children(expression)
.parent()
.parent(expression)
.find(expression)
.filter(expression)
.filter(function)
eq(index)</li></li></ul><li>jQueryBasics…<br />$:Traversal<br /><ul><li>.end()</li></li></ul><li>jQueryBasics…<br />Demo<b...
jQueryBasics…<br />$:Manipulation<br /><ul><li>.html(val)
.text(val)
.append(content)
.appendTo(expression)
.appendTo(jQuery object)
.prepend(content)
.prependTo(expression)
.prependTo(jQuery object)
.after(content)
.before(content)
.wrap(html)
.empty()
.remove()
.remove(expression)</li></li></ul><li>jQueryBasics…<br />Demo<br />
jQueryBasics…<br />Selectors<br /><ul><li>:odd
:contains(text)
:empty
:hidden
:vissible
[attribute]
[attribute=value]
[attribute!=value]
Upcoming SlideShare
Loading in …5
×

Basics of j query

1,390 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,390
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basics of j query

  1. 1. Rupesh Kumar Tiwari<br />June, 2011<br />Basics of JQueryThe write less, do more JavaScript library<br />
  2. 2. Agenda<br /><ul><li>jQuery Basics
  3. 3. Plugins
  4. 4. Advanced jQuery</li></li></ul><li>jQueryBasics…<br />$<br /><ul><li>$(CSS Selector)
  5. 5. $(HTML)
  6. 6. $(DOM element)</li></li></ul><li>jQueryBasics…<br />Demo<br />
  7. 7. jQueryBasics…<br />$<br /><ul><li>$(something).action();</li></li></ul><li>jQueryBasics…<br />$:Basic actions<br />
  8. 8. jQueryBasics…<br />$:Traversal<br /><ul><li>.not(expression)
  9. 9. .add(expression)
  10. 10. .next()
  11. 11. .nextAll()
  12. 12. .prev()
  13. 13. .prevAll()
  14. 14. .slice(start,end)
  15. 15. .siblings()
  16. 16. .children()
  17. 17. .children(expression)
  18. 18. .parent()
  19. 19. .parent(expression)
  20. 20. .find(expression)
  21. 21. .filter(expression)
  22. 22. .filter(function)
  23. 23. eq(index)</li></li></ul><li>jQueryBasics…<br />$:Traversal<br /><ul><li>.end()</li></li></ul><li>jQueryBasics…<br />Demo<br />
  24. 24. jQueryBasics…<br />$:Manipulation<br /><ul><li>.html(val)
  25. 25. .text(val)
  26. 26. .append(content)
  27. 27. .appendTo(expression)
  28. 28. .appendTo(jQuery object)
  29. 29. .prepend(content)
  30. 30. .prependTo(expression)
  31. 31. .prependTo(jQuery object)
  32. 32. .after(content)
  33. 33. .before(content)
  34. 34. .wrap(html)
  35. 35. .empty()
  36. 36. .remove()
  37. 37. .remove(expression)</li></li></ul><li>jQueryBasics…<br />Demo<br />
  38. 38. jQueryBasics…<br />Selectors<br /><ul><li>:odd
  39. 39. :contains(text)
  40. 40. :empty
  41. 41. :hidden
  42. 42. :vissible
  43. 43. [attribute]
  44. 44. [attribute=value]
  45. 45. [attribute!=value]
  46. 46. #id
  47. 47. .class
  48. 48. .elementType
  49. 49. :first
  50. 50. :last
  51. 51. :not(expression)
  52. 52. .parent > child
  53. 53. :even</li></li></ul><li>jQueryBasics…<br />Demo<br />
  54. 54. jQueryBasics…<br />$:Attributes & CSS<br /><ul><li>.val(val)
  55. 55. .css(name,value)
  56. 56. css(properties)
  57. 57. .addClass(class)
  58. 58. .removeClass(class)
  59. 59. .attr(name,value)
  60. 60. .attr(name,function)
  61. 61. .attr(properties)
  62. 62. .removeAttr(name)</li></li></ul><li>jQueryBasics…<br />Demo<br />
  63. 63. jQueryBasics…<br />$:Just a few more <br /><ul><li>.height()
  64. 64. .width()
  65. 65. .is(expression)
  66. 66. .hasClass(class)
  67. 67. .offset()
  68. 68. .html()
  69. 69. .text()
  70. 70. .val()
  71. 71. .attr(name)
  72. 72. .css(name)</li></li></ul><li>Demo<br />
  73. 73. jQueryBasics…<br />Chaining<br />Speed + Not much code + pretty code + Fun<br />
  74. 74. jQueryBasics…<br />Attaching multiple functions to a single selector<br />$(CSS Selector).action1().action2();<br />
  75. 75. jQuery Basics…<br />Bindings<br />How to respond to user interaction<br />
  76. 76. jQuery Basics…<br />Events<br /><ul><li>click
  77. 77. mouseover
  78. 78. mouseout
  79. 79. mouseenter
  80. 80. mouseleave
  81. 81. blur
  82. 82. change
  83. 83. dblclick
  84. 84. focus
  85. 85. keydown
  86. 86. keyup
  87. 87. keypress
  88. 88. scroll
  89. 89. resize
  90. 90. load
  91. 91. ready</li></li></ul><li>jQueryBasics…<br />Demo<br />
  92. 92. jQueryBasics…<br />Effects<br /><ul><li>$(expression).function();
  93. 93. $(expression).function(speed);
  94. 94. $(expression).function(speed,callback);</li></li></ul><li>jQuery Basics…<br />Effects<br /><ul><li>show
  95. 95. hide
  96. 96. toggle
  97. 97. slideUp
  98. 98. slideDown
  99. 99. slideToggle
  100. 100. fadeIn
  101. 101. fadeOut
  102. 102. fadeTo
  103. 103. scroll
  104. 104. resize
  105. 105. load
  106. 106. ready</li></li></ul><li>jQueryBasics…<br />Demo<br />
  107. 107. jQueryBasics…<br />Advanced animations<br />If you need that little extra something<br />
  108. 108. jQueryBasics…<br />.animate(params,duration,easing,callback)<br />
  109. 109. jQueryBasics…<br />Demo<br />
  110. 110. jQueryBasics…<br />AJAX<br />Want to be buzzword compliant, don’t you?<br />
  111. 111. jQueryBasics…<br />AJAX<br /><ul><li>$(CSS Selector).load(url, data, callback);
  112. 112. $.post(url, data, callback);
  113. 113. $.get(url, data, callback)</li></li></ul><li>jQueryBasics…<br />$.ajax - options<br /><ul><li>data
  114. 114. type
  115. 115. url</li></li></ul><li>jQueryBasics…<br />AJAX events (global)<br />$(CSS selector).bind(‘globalAjaxEvent’,…);<br />
  116. 116. jQuery Basics…<br /><ul><li>ajaxStart
  117. 117. ajaxSend
  118. 118. ajaxSuccess
  119. 119. ajaxError</li></ul>AJAX events (global)<br />
  120. 120. jQueryBasics…<br />AJAX events (local)<br />$.ajax({<br />enventName:function(){<br /> …<br /> }<br /> });<br />
  121. 121. jQueryBasics…<br />AJAX events (local)<br /><ul><li>beforeSend
  122. 122. success
  123. 123. error
  124. 124. complete</li></li></ul><li>jQueryBasics…<br />Demo<br />
  125. 125. Plugins<br />Plugins<br />If you think jQuery should do more, this part is for you<br />
  126. 126. Plugins…<br />How to build Plugins<br /><ul><li>Extend jQuery.fn
  127. 127. jQuery.fn.myPlugin = function(){ … };
  128. 128. $( … ).myPlugin();</li></li></ul><li>Plugins…<br />The magical plugin helper<br /> .each(function)<br />
  129. 129. Plugins…<br />The typical plugin<br />jQuery.fn.myPlugin = function () {<br /> return $(this).each(function(){<br /> //Do stuff with $(this) here<br /> });<br />}<br />
  130. 130. AdvancedjQuery<br />Advanced jQuery<br />Now have I left you wondering how all this near stuff works?<br />Sorry for leaving you hanging – I’ll answer that right now..<br />
  131. 131. AdvancedjQuery…<br />The Stack<br />
  132. 132. AdvancedjQuery…<br />Advanced Scripting<br /><ul><li>$.getScript(url, callback)
  133. 133. $.getJSON(url, data, callback)</li></li></ul><li>Resources<br /><ul><li>http://jquery.com/
  134. 134. http://visualjquery.com/
  135. 135. Book: jQueryin Action </li></li></ul><li>ThankYou<br /><ul><li>roopkt@gmail.com
  136. 136. Tweeter: @roopkt
  137. 137. http://Rupesht.wordpress.com</li>

×