Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to jQuery

16,308 views

Published on

Mir Nazim - Introduction to jQuery

Published in: Technology

Introduction to jQuery

  1. 1. jQuery <ul><li>Javascript that doesn't suck! </li></ul>Presented By Mir Nazim www.mirnazim.com [email_address]
  2. 2. WHAT and WHEN <ul><li>John Resig - www.ejohn.org </li></ul><ul><li>Released at BarCamp NYC on Jan 2006 </li></ul><ul><li>jQuery 1.0 out on Aug 2006 </li></ul><ul><li>version 1.1.3 latest </li></ul><ul><ul><li>~ 800% faster for DOM processing </li></ul></ul><ul><ul><li>numerous other improvements </li></ul></ul>
  3. 3. WHY <ul><li>Doesn’t mess with the language </li></ul><ul><ul><ul><ul><li>(Prototype) </li></ul></ul></ul></ul><ul><li>Doesn’t try to be Python </li></ul><ul><ul><ul><ul><li>(Mochikit) </li></ul></ul></ul></ul><ul><li>Only essentials: > 20 KB </li></ul><ul><ul><ul><ul><li>(Scriptaculous, Dojo) </li></ul></ul></ul></ul><ul><li>More than cosmetic effects </li></ul><ul><ul><ul><ul><li>(Moo.fx) </li></ul></ul></ul></ul><ul><li>Makes common tasks a breeze </li></ul>
  4. 4. OTHER REASONS <ul><li>Great Documentaions </li></ul><ul><li>Great community </li></ul><ul><li>Tons of plugins </li></ul><ul><li>Works everywhere RELIABLY </li></ul><ul><ul><ul><ul><li>IE 6+, Firefox, Safari 2+, and Opera 9+ </li></ul></ul></ul></ul>
  5. 5. What jQuery Deos <ul><li>GENRAL PURPOSE </li></ul><ul><li>ABSTRACTION LAYER </li></ul><ul><li>FOR </li></ul><ul><li>COMMON </li></ul><ul><li>WEB SCRIPTING </li></ul><ul><li>TASKS </li></ul>
  6. 6. What's Good in it <ul><li>Access parts of a page </li></ul><ul><li>Modify the appearance of a page </li></ul><ul><li>Alter the content of a page </li></ul><ul><li>Respond to a user's interaction </li></ul><ul><li>Add animation to a page </li></ul><ul><li>Retrieve information (Ajax) </li></ul><ul><li>Simplify common tasks </li></ul>
  7. 7. How jQuery does it <ul><li>Leverage knowledge of CSS </li></ul><ul><li>Abstract away browser quirks </li></ul><ul><li>Always work with sets </li></ul><ul><li>Allow multiple actions in one line </li></ul><ul><li>Support extensions </li></ul>
  8. 8. Getting Started <ul><li><head> </li></ul><ul><ul><li><script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;> </script> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><ul><li>$(document).ready(function(){ </li></ul></ul></ul><ul><ul><ul><ul><li>// your stuff goes here </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li></head> </li></ul>
  9. 9. The $() function <ul><li>A factory for jQuery object </li></ul><ul><li>Provides a jQuery instance </li></ul><ul><li>All operations are done using $() </li></ul>
  10. 10. Element Selection - CSS <ul><li>$(document).ready(function(){ </li></ul><ul><li>//select all ”p” elements </li></ul><ul><li>$(”p”); </li></ul><ul><li>//select an element with id=”soem-id” </li></ul><ul><li>$(”#some-id”); </li></ul><ul><li>//select all elements with class=”soem-class” </li></ul><ul><li>$(”.some-class”); </li></ul><ul><li>}); </li></ul>
  11. 11. More Element Selection <ul><li>/* select 'li' elements that are children of 'ul' with id=”some-ul” */ </li></ul><ul><li>$('ul#some-ul > li') </li></ul>
  12. 12. Element Selection - XPath <ul><li>//all links with a title attributes </li></ul><ul><li>$('a[@title]') </li></ul><ul><li>//all ”divs” containing on ”ol” element </li></ul><ul><li>$('div[ol]') </li></ul>
  13. 13. Xpath + RegEx <ul><li>//all links with ”href” starting with ”mailto:” </li></ul><ul><li>$('a[@href^=&quot;mailto:&quot;]') </li></ul><ul><li>//all links with ”href” ending with ”.pdf” </li></ul><ul><li>$('a[@href$=&quot;.pdf&quot;]') </li></ul><ul><li>//all links that contain ”mysite.com” anywhere in ”href” </li></ul><ul><li>$('a[@href*=&quot;mysite.com&quot;]') </li></ul>
  14. 14. Custom Selectors <ul><li>//selects 2 nd div from the set </li></ul><ul><li>$('div.someclass:eq(0)') </li></ul><ul><li>// same as above but CSS based </li></ul><ul><li>$('div.someclass:nth-child(1)') </li></ul>
  15. 15. Select Even/Odd Rows of table <ul><li>$('tr:odd') //all odd rows </li></ul><ul><li>$('tr:even') //all even rows </li></ul>
  16. 16. DOM Traversal <ul><li>Same Effect, Different way </li></ul><ul><li>$('tr').filter(':odd') //all odd rows </li></ul><ul><li>$('tr').filter(':even') //all even rows </li></ul>
  17. 17. DOM Traversal <ul><li>//select the parent element of ”th” </li></ul><ul><li>$('th').parent() </li></ul><ul><li>//select all even ”tr” but not that contain a ”th” </li></ul><ul><li>$('tr:not([th]):even') </li></ul><ul><li>//select all odd ”tr” but not that contain a ”th” </li></ul><ul><li>$('tr:not([th]):odd') </li></ul>
  18. 18. More DOM <ul><li>$('td:contains(&quot;Henry&quot;)').siblings() </li></ul><ul><li>$('td:contains(&quot;Henry&quot;)').parent().find('td:gt(0)') </li></ul><ul><li>$('td:contains(&quot;Henry&quot;)').parent().find('td') </li></ul><ul><ul><li>.not(':contains(&quot;Henry&quot;)') ) </li></ul></ul><ul><li>$('td:contains(&quot;Henry&quot;)').parent().find('td:eq(1)') </li></ul>
  19. 19. Method Chaining <ul><li>//get every cell containing &quot;Henry&quot; </li></ul><ul><li>$('td:contains(&quot;Henry&quot;)') </li></ul><ul><li>//get its parent </li></ul><ul><li>.parent() </li></ul><ul><li>//find inside the parent the 2nd cell </li></ul><ul><li>.find('td:eq(1)') </li></ul><ul><li>//add the &quot;highlight&quot; class to that cell </li></ul><ul><li>.addClass(highlight') </li></ul><ul><li>//revert back to the parent of the cell containing &quot;Henry&quot; </li></ul><ul><li>.end() </li></ul><ul><li>//find inside the parent the 3rd cell </li></ul><ul><li>.find('td:eq(2)') </li></ul><ul><li>//add the &quot;highlight&quot; class to that cell </li></ul><ul><li>.addClass('highlight'); </li></ul>
  20. 20. Events <ul><li>$('#some-element').bind('click',function() { </li></ul><ul><li>$('body').addClass('large'); </li></ul><ul><li>//some more stuff </li></ul><ul><li>//even some more stuff </li></ul><ul><li>}); </li></ul><ul><li>use event names without on part. E.G </li></ul><ul><li>onClick => click </li></ul><ul><ul><li>onKeyPress => keypress </li></ul></ul>
  21. 21. Compound Events <ul><li>// add and remove class on alternate clicks </li></ul><ul><li>$('#some-element'). toggle (function() { </li></ul><ul><ul><li>$('#switcher.button').addClass('hidden'); </li></ul></ul><ul><li>}, function() { </li></ul><ul><ul><li>$('#switcher.button').removeClass('hidden'); </li></ul></ul><ul><li>}); </li></ul>
  22. 22. One compound event <ul><li>//works like ”:hover” pseudo class </li></ul><ul><li>$('#some-element').hover(function() { </li></ul><ul><ul><li>$(this).addClass('hover'); </li></ul></ul><ul><li>}, function() { </li></ul><ul><ul><li>$(this).removeClass('hover'); </li></ul></ul><ul><li>}); </li></ul>
  23. 23. Manipulating Attributes <ul><li>//change the ”title” attribute of ”a” element where id=”some-id” </li></ul><ul><li>$('a#some-id').attr({'title': 'Some Text here'}); </li></ul><ul><li>//more than one at a time </li></ul><ul><li>$('a#some-id').attr({ </li></ul><ul><li>'title':'Some Text here', </li></ul><ul><li>'href':'www.example.com', </li></ul><ul><li>'id':'some-other-id', </li></ul><ul><li>}); </li></ul>
  24. 24. Changing the tag content <ul><li>//eq of element.innerHTML() </li></ul><ul><li>$('#some-div').html() </li></ul><ul><li>//eq of element.innerHTML = some-var </li></ul><ul><li>$('#some-div').html(some-var) </li></ul><ul><li>//eq of some-input.value </li></ul><ul><li>$('input').val() </li></ul><ul><li>//eq of some-input.value = some-var </li></ul><ul><li>$('input').val(some-var) </li></ul>
  25. 25. AJAX <ul><li>/* when a buttong with id=”some-button” is clicked load ”a.html” in div with id=”some-div” */ </li></ul><ul><li>$('#some-button').click(function() { </li></ul><ul><li>$('#some-div').load('a.html'); </li></ul><ul><li>}); </li></ul>
  26. 26. AJAX + JSON <ul><li>$('#some-button').click(function() { </li></ul><ul><li>$.getJSON('b.json'); </li></ul><ul><li>}); </li></ul>
  27. 27. Take action on data <ul><li>$('#some-button').click(function() { </li></ul><ul><li>$.getJSON('b.json', function(data) { </li></ul><ul><li>// do some stuff with data you just go </li></ul><ul><li>}); </li></ul>
  28. 28. Execute a script <ul><li>$('#some-button').click(function() { </li></ul><ul><ul><li>$.getScript('c.js'); </li></ul></ul><ul><li>}); </li></ul>
  29. 29. Load other data formats <ul><li>$('#some-button').click(function() { </li></ul><ul><li>$.get('my-format.data', function(data) { </li></ul><ul><ul><ul><li>//handle your data way you want </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul><ul><li>}); </li></ul>
  30. 30. A GET request <ul><li>$.get('e.php', </li></ul><ul><li>{'term': $(this).text()}, </li></ul><ul><li>function(data) { </li></ul><ul><li>$('#some-div').html(data); </li></ul><ul><li>} </li></ul><ul><li>); </li></ul>
  31. 31. POST request <ul><li>$.post('e.php', </li></ul><ul><li>{'term': $(this).text()}, </li></ul><ul><li>function(data) { </li></ul><ul><li>$('#some-div').html(data); </li></ul><ul><li>} </li></ul><ul><li>); </li></ul>
  32. 32. AJAX observers <ul><li>$('#loading'). ajaxStart (function() { </li></ul><ul><li>$(this).show(); </li></ul><ul><li>}). ajaxStop (function() { </li></ul><ul><li>$(this).hide(); </li></ul><ul><li>}); </li></ul>
  33. 33. There is more <ul><li>Loads of good quality plugins for </li></ul><ul><ul><li>Extended AJAX functionality </li></ul></ul><ul><ul><li>Cool Effects </li></ul></ul><ul><ul><li>Extensions to core jQuery </li></ul></ul><ul><ul><li>much more </li></ul></ul><ul><ul><li>http://jquery.com/plugins </li></ul></ul><ul><ul><li>http://doc.jquery.com/Plugins </li></ul></ul>
  34. 34. Resources <ul><li>http://doc.jquery.com </li></ul><ul><li>www.visualjquery.com </li></ul><ul><li>www.Google.com </li></ul><ul><ul><li>15 days of jQuery (blog) </li></ul></ul><ul><ul><li>Learning jQuery (blog) </li></ul></ul>
  35. 36. Thanks A Millions <ul><li>? </li></ul>QEUSTIONS

×