jQuery <ul><li>Javascript that doesn't suck! </li></ul>Presented By Mir Nazim www.mirnazim.com [email_address]
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>...
WHY <ul><li>Doesn’t mess with the language </li></ul><ul><ul><ul><ul><li>(Prototype) </li></ul></ul></ul></ul><ul><li>Does...
OTHER REASONS <ul><li>Great Documentaions </li></ul><ul><li>Great community </li></ul><ul><li>Tons of plugins </li></ul><u...
What jQuery Deos <ul><li>GENRAL PURPOSE </li></ul><ul><li>ABSTRACTION LAYER </li></ul><ul><li>FOR </li></ul><ul><li>COMMON...
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...
How jQuery does it <ul><li>Leverage knowledge of CSS </li></ul><ul><li>Abstract away browser quirks </li></ul><ul><li>Alwa...
Getting Started <ul><li><head> </li></ul><ul><ul><li><script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;> <...
The  $()  function <ul><li>A factory for jQuery object </li></ul><ul><li>Provides a jQuery instance </li></ul><ul><li>All ...
Element Selection - CSS <ul><li>$(document).ready(function(){ </li></ul><ul><li>//select all ”p” elements </li></ul><ul><l...
More Element Selection <ul><li>/* select 'li' elements that are children of 'ul' with id=”some-ul” */ </li></ul><ul><li>$(...
Element Selection - XPath <ul><li>//all links with a title attributes </li></ul><ul><li>$('a[@title]') </li></ul><ul><li>/...
Xpath + RegEx <ul><li>//all links with ”href” starting with ”mailto:” </li></ul><ul><li>$('a[@href^=&quot;mailto:&quot;]')...
Custom Selectors <ul><li>//selects 2 nd  div from the set </li></ul><ul><li>$('div.someclass:eq(0)') </li></ul><ul><li>// ...
Select Even/Odd Rows of table <ul><li>$('tr:odd')  //all odd rows </li></ul><ul><li>$('tr:even')  //all even rows </li></ul>
DOM Traversal <ul><li>Same Effect, Different way </li></ul><ul><li>$('tr').filter(':odd')  //all odd rows </li></ul><ul><l...
DOM Traversal <ul><li>//select the parent element of ”th” </li></ul><ul><li>$('th').parent() </li></ul><ul><li>//select al...
More DOM <ul><li>$('td:contains(&quot;Henry&quot;)').siblings() </li></ul><ul><li>$('td:contains(&quot;Henry&quot;)').pare...
Method Chaining <ul><li>//get every cell containing &quot;Henry&quot; </li></ul><ul><li>$('td:contains(&quot;Henry&quot;)'...
Events <ul><li>$('#some-element').bind('click',function() { </li></ul><ul><li>$('body').addClass('large'); </li></ul><ul><...
Compound Events <ul><li>// add and remove class on alternate clicks </li></ul><ul><li>$('#some-element'). toggle (function...
One compound event <ul><li>//works like ”:hover” pseudo class </li></ul><ul><li>$('#some-element').hover(function() { </li...
Manipulating Attributes <ul><li>//change the ”title” attribute of ”a” element where id=”some-id” </li></ul><ul><li>$('a#so...
Changing the tag content <ul><li>//eq of element.innerHTML() </li></ul><ul><li>$('#some-div').html() </li></ul><ul><li>//e...
AJAX <ul><li>/* when a buttong with id=”some-button” is clicked load ”a.html” in div with id=”some-div” */ </li></ul><ul><...
AJAX + JSON <ul><li>$('#some-button').click(function() { </li></ul><ul><li>$.getJSON('b.json'); </li></ul><ul><li>}); </li...
Take action on data <ul><li>$('#some-button').click(function() { </li></ul><ul><li>$.getJSON('b.json', function(data) { </...
Execute a script <ul><li>$('#some-button').click(function() { </li></ul><ul><ul><li>$.getScript('c.js'); </li></ul></ul><u...
Load other data formats <ul><li>$('#some-button').click(function() { </li></ul><ul><li>$.get('my-format.data', function(da...
A GET request <ul><li>$.get('e.php',  </li></ul><ul><li>{'term': $(this).text()}, </li></ul><ul><li>function(data) { </li>...
POST request <ul><li>$.post('e.php',  </li></ul><ul><li>{'term': $(this).text()},  </li></ul><ul><li>function(data) { </li...
AJAX observers <ul><li>$('#loading'). ajaxStart (function() { </li></ul><ul><li>$(this).show(); </li></ul><ul><li>}). ajax...
There is more <ul><li>Loads of good quality plugins for </li></ul><ul><ul><li>Extended AJAX functionality </li></ul></ul><...
Resources <ul><li>http://doc.jquery.com </li></ul><ul><li>www.visualjquery.com </li></ul><ul><li>www.Google.com </li></ul>...
 
Thanks A Millions <ul><li>? </li></ul>QEUSTIONS
Upcoming SlideShare
Loading in...5
×

Introduction to jQuery

15,461

Published on

Mir Nazim - Introduction to jQuery

Published in: Technology
1 Comment
35 Likes
Statistics
Notes
  • Manu

    The title is not Extending jQuery, but Introduction to jQuery<br /><br/>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
15,461
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1,410
Comments
1
Likes
35
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×